Cómo escribir un prompt de UI para un agente de programación con IA
Convierte una idea de producto en bruto en un prompt de UI que se puede construir, con el objetivo del usuario, el comportamiento, los estados, las restricciones y verificaciones de pasa o no pasa.
Un buen prompt de UI le dice al agente quién necesita qué resultado, cómo debe comportarse la interfaz, qué estados debe manejar, qué restricciones del proyecto aplican y cómo verificar el resultado. Nombra un componente solo cuando su comportamiento encaja con el trabajo.
1. Empieza con el objetivo del usuario, no con el nombre de un componente
Di quién intenta terminar qué tarea y por qué importa. Añade un término de UI solo cuando su comportamiento coincida con ese trabajo. El nombre de un componente es una posible solución, no el objetivo del producto.
- Débil: Añade un hermoso dashboard con glassmorphism.
- Mejor: Ayuda a un líder de soporte a detectar tickets sin resolver, entender la urgencia y abrir el siguiente ticket sin perder los filtros actuales.
2. Describe el comportamiento, los estados y los límites
Explica qué abre la interfaz, qué cambia después de cada acción, cómo se cierra y qué debe quedar guardado. Incluye los estados de carga, vacío, error, éxito, reintentar, cancelar y permisos cuando puedan ocurrir.
3. Elige un patrón por su comportamiento, y después añade estilo y movimiento
Usa el atlas cuando puedas imaginar la interfaz pero no sepas su nombre. Compara patrones parecidos antes de elegir. Mantén el comportamiento, el estilo visual y el movimiento como decisiones separadas, para que una petición estética no cambie en silencio cómo funciona el producto.
4. Añade criterios de aceptación que el agente pueda verificar
Convierte las reglas importantes en verificaciones observables de pasa o no pasa. Cubre el uso del teclado, el foco visible, los anuncios de estado, las pantallas pequeñas, el zoom, el movimiento reducido, la carga, los fallos, el reintento y la persistencia de datos donde apliquen.
5. Da el contexto del proyecto antes de pedir código
Nombra el stack existente, el sistema de diseño, los componentes reutilizables, la fuente de datos, la ruta y los archivos que están dentro del alcance. Dile al agente qué no debe cambiar. Aun así, debe revisar el proyecto real y sus pruebas antes de editar.
6. Usa una estructura de prompt que deje las decisiones a la vista
Un orden útil es: resultado, usuarios y situación, comportamiento, estados, contenido y datos, dirección visual, accesibilidad, restricciones del proyecto, criterios de aceptación y trabajo fuera de alcance. Marca las suposiciones y las preguntas abiertas en lugar de esconderlas.
- Resultado: ¿quién debería poder hacer qué cuando este trabajo esté terminado?
- Comportamiento y estados: ¿cómo empieza, cambia, termina, falla y se recupera el flujo?
- Verificaciones: ¿qué evidencia exacta mostrará que el resultado funciona?