Frontend con IA: capturas de pantalla como feedback

Un agente no ve tu interfaz, hasta que le das una captura de pantalla. El feedback visual es la clave para un buen trabajo de frontend con IA.

El problema: la IA no ve tu interfaz

Un agente que escribe código no 've' automáticamente el resultado en el navegador. No sabe si un botón está mal alineado o si el texto se desborda, a menos que se lo muestres. Esa es precisamente la diferencia entre 'haz el dashboard más bonito' (vago) y una captura de pantalla más una instrucción concreta.

Capturas de pantalla como feedback

Puedes insertar capturas directamente: arrastrando y soltando, con copiar y pegar, o como ruta de archivo. Dale al agente una imagen del diseño que quieres y luego haz que tome una captura del resultado y la compare. Así se crea un ciclo que el propio agente puede cerrar, en lugar de que tú revises manualmente cada paso intermedio.

Iteración por componentes

Trabaja en pasos pequeños: construir un componente, hacer una captura, señalar las diferencias con el objetivo, corregir. Esto funciona mejor que pedir 'construye toda la página' de una vez, porque los errores se vuelven visibles antes.

Aprovecha los sistemas de diseño

Si tu proyecto tiene un sistema de diseño (colores fijos, espaciados, componentes), díselo al agente explícitamente o muéstrale componentes existentes como plantilla. Eso evita que invente sus propias soluciones inconsistentes.

Verificar visualmente

Al final lo que cuenta no es el código, sino el resultado visible. Pide siempre una captura de pantalla del resultado real, no solo una descripción de que ya está 'terminado'.

EJEMPLO

Prompt con imagen: '[captura del diseño objetivo adjunta] Implementa este diseño para la cabecera del dashboard. Usa nuestros componentes existentes de @src/components. Después haz una captura del resultado, compárala con el original y enumera las diferencias.'

🛠️ EJERCICIO — PRUÉBALO TÚ

Toma un componente de UI pequeño de un proyecto de práctica (o crea un componente de tarjeta sencillo) y haz que un agente lo itere contra una imagen de referencia.

Busca o crea una imagen de referencia (captura de una web, mockup de diseño) y adjúntala al agente.
Prompt: 'Implementa este diseño como componente. Después haz una captura del resultado y compárala con el original.'
Deja que el agente se autocorrija al menos una vez a partir de la comparación, antes de intervenir tú mismo.

✅ AUTOEVALUACIÓN

☐ ¿El agente realmente hizo una captura y la comparó, o solo afirmó que se veía bien?
☐ ¿Qué diferencias concretas reveló la comparación?
☐ ¿El resultado quedó más cerca del original después de la autocorrección que en el primer intento?

QUIZ RÁPIDO

¿Por qué es más efectiva una captura de pantalla del diseño objetivo que el prompt 'haz el dashboard más bonito'?