Diseña un Hoja inferior (Bottom Sheet) para esta situación: Los filtros del mapa del teléfono se abren en una hoja desplazable. Puede asomarse, abrirse completamente o cerrarse. Usa Glassmorfismo (Glassmorphism) como dirección visual moderada y Animación de resorte (Spring Animation) para dar feedback. Mantén el HTML semántico, el acceso con teclado, el foco visible, el soporte para reducir movimiento y las reglas actuales del proyecto.
Convertir palabras de la interfaz en una solicitud de construcción clara
Elige qué hace la UI, cómo se ve y cómo se mueve. Luego copia una petición clara para tu desarrollador o asistente de IA.
Start with your own situation
Open request builder Build a request you can hand off.
Choose what the UI does, how it looks, and how it moves. Then copy a clear request that includes states, accessibility needs, and checks for done.
Diseña un Paleta de comandos (Command Palette) para esta situación: Presione Command-K, escriba “Invitar compañero de equipo” y ejecute esa acción desde la lista. Usa Minimalismo (Minimalism) como dirección visual moderada y Movimiento reducido (Reduced Motion) para dar feedback. Mantén el HTML semántico, el acceso con teclado, el foco visible, el soporte para reducir movimiento y las reglas actuales del proyecto.
Diseña un Validación del formulario (Form Validation) para esta situación: Si una contraseña rompe una regla, la página lo explica junto al campo. Los lectores de pantalla pueden conectar el mensaje con ese campo. Usa Neobrutalismo (Neobrutalism) como dirección visual moderada y Microinteracción (Microinteraction) para dar feedback. Mantén el HTML semántico, el acceso con teclado, el foco visible, el soporte para reducir movimiento y las reglas actuales del proyecto.
Diseña un Inspector (Inspector) para esta situación: Seleccionar un gráfico abre un inspector para ejes, colores y etiquetas. El lienzo permanece visible. Usa Vidrio Líquido (Liquid Glass) como dirección visual moderada y Transición (Transition) para dar feedback. Mantén el HTML semántico, el acceso con teclado, el foco visible, el soporte para reducir movimiento y las reglas actuales del proyecto.
Diseña un Formulario de inicio de sesión (Sign-In Form) para esta situación: Un cliente que vuelve inicia sesión con correo y contraseña. Pueden mostrar la contraseña, pegarla desde un password manager o recuperar el acceso sin perder su lugar. Usa Estilo suizo (Swiss Style) como dirección visual moderada y Entrar, Salir y Fundido cruzado (Enter, Exit & Crossfade) para dar feedback. Mantén el HTML semántico, el acceso con teclado, el foco visible, el soporte para reducir movimiento y las reglas actuales del proyecto.
Diseña un Estado Vacío, Error y Éxito — Paquete de Aprendizaje (Empty, Error & Success State — Learning Bundle) para esta situación: Una nueva lista de proyectos explica cómo crear el primer elemento. Si la red falla, aparece Retry y los filtros se mantienen guardados. Usa Claymorphism (Claymorphism) como dirección visual moderada y Suavizado (Easing) para dar feedback. Mantén el HTML semántico, el acceso con teclado, el foco visible, el soporte para reducir movimiento y las reglas actuales del proyecto.