👁️ Por qué "ver" tu propio trabajo lo cambia todo
En el módulo 5.1 viste por qué el front-end de un agente queda «genérico»: escribe el código mirando solo el código, nunca el resultado. Es como pintar un cuadro con los ojos vendados: sabes que moviste el pincel, pero no sabes si acertaste con el color, el trazo o la proporción. El código puede ser sintácticamente perfecto y, aun así, la página renderizada (lo que aparece realmente en la pantalla cuando el navegador dibuja el HTML/CSS) puede verse fea, estar rota o no ser lo que pediste.
¿Eres nuevo aquí? Renderizar es el proceso por el que el navegador transforma código (HTML, CSS, JavaScript) en píxeles en la pantalla: es la diferencia entre «leer la receta» y «probar el plato terminado». Un agente que solo lee la receta nunca sabe si el plato quedó bien.
El ciclo de capturas de pantalla resuelve exactamente eso: le da al agente una forma de «probar el plato». Escribe el código, mira el resultado renderizado mediante una captura de pantalla, lo compara con lo que se pidió y lo corrige. Sin este ciclo, el agente entrega el primer intento y reza. Con él, el agente itera —repite el ciclo varias veces— hasta que el resultado coincide con el objetivo. Esta es, por sí sola, la mayor palanca para mejorar la calidad visual que existe en este curso.
💡 Concepto principal
Sin el ciclo, el agente está ciego a su propio resultado visual — solo ve texto y código. Con el ciclo, adquiere un sentido nuevo: la capacidad de recibir feedback sobre lo que produjo.
- •Ciego: escribe código → entrega → descubres el defecto después.
- •Con visión: escribe código → ve el resultado → lo corrige antes de entregártelo.
✗ Sin el ciclo
- ✗El botón desalineado solo aparece cuando abres la página
- ✗Color de fondo incorrecto, texto ilegible: el agente «no lo sabía»
- ✗Cada corrección se convierte en una nueva ronda de conversación contigo
✓ Con el bucle
- ✓El agente ya vio el botón torcido y lo ajustó antes de avisarte
- ✓El contraste, el espaciado y la alineación ya están corregidos
- ✓Solo participas en la revisión final, no en la búsqueda de defectos obvios
🔄 Las 5 etapas del bucle, en círculo
El bucle tiene cinco etapas que se repiten en círculo — no es una línea recta que termina, es una rueda que gira hasta que el resultado queda bien. Cada vuelta completa es una iteración (una repetición del mismo proceso, intentando mejorar un poco cada vez).
Leyenda: el loop siempre sigue el mismo orden: escribe, inicia el servidor, captura, compara, corrige; y vuelve al inicio (flecha cian) hasta que la pregunta «¿coincide con el objetivo?» del centro recibe un sí. Cada vuelta completa es una iteración.
🔍 Por dentro de cada etapa
- 1. Escribe: el agente genera o ajusta el HTML/CSS/JS del front-end.
- 2. Inicia el servidor local: un programa que se ejecuta en tu propia computadora y muestra la página como si fuera un sitio web, pero solo tú (y el agente) pueden verla en una dirección como
localhost:3000. - 3. Captura: toma una captura de pantalla (una imagen exacta de lo que está en pantalla en ese instante) usando automatización del navegador —un programa que controla el navegador sin que toques el mouse, abre la página y «presiona el botón» para tomar la captura por sí solo.
- 4. Compara: mira la captura de pantalla junto a lo que se pidió —la referencia, el objetivo, la marca— y señala las diferencias.
- 5. Corrige: ajusta el código según lo que vio que estaba mal, y el ciclo vuelve a la etapa 1.
🔬 Mira por dentro: qué cambia en cada vuelta
En la primera vuelta del ciclo, el agente suele acertar con la estructura general: los bloques están en el lugar correcto, el texto está ahí, pero falla en detalles que solo se perciben visualmente: poco espacio, mal contraste, elementos «pegados» entre sí. Es exactamente el tipo de error que pasa desapercibido al leer solo el código, pero salta a la vista en una captura de pantalla.
En la segunda y tercera vueltas, el agente ya está corrigiendo detalles: la alineación del botón, el tamaño de la fuente en el celular (lo que cambia cuando la pantalla es más pequeña, llamado adaptable, cuando el diseño se adapta al tamaño de la pantalla), el color al pasar el cursor (el efecto visual cuando el mouse pasa por encima de un botón). Ese pulido incremental —pequeñas correcciones, repetidas— es lo que separa un resultado «genérico» de uno «casi profesional».
Antes (vuelta 1)
- • El botón "Suscribirse" queda cortado en el borde derecho del celular
- • Texto blanco sobre fondo amarillo claro (ilegible)
- • El título y el párrafo están pegados, sin espacio
Después (vuelta 3)
- • El botón queda dentro del margen, con espacio a los lados
- • Contraste ajustado: texto oscuro sobre fondo claro
- • Espaciado entre el título y el párrafo, diseño que «respira»
💡 Consejo práctico
Pide siempre al menos dos vueltas completas del ciclo antes de darlo por listo. La primera resuelve lo obvio; en la segunda el resultado pasa de "funciona" a "parece profesional".
🛠️ Construir: pedir el bucle en la práctica
En la práctica, no necesitas «enseñarle» a Claude Code a iniciar un servidor y tomar capturas de pantalla: ya tiene esa capacidad cuando se lo pides. Tu trabajo es formular la solicitud de manera que exija el ciclo completo: dale el objetivo visual (la referencia), pídele explícitamente que inicie el servidor, capture, compare y corrija, y que repita hasta igualarlo.
Define el objetivo visual
Describe cómo debe verse la página o señala una referencia (captura de pantalla, sitio, imagen de la marca; se profundiza en el módulo 5.5).
Pide el ciclo explícitamente
"Inicia un servidor local, toma una captura de pantalla, compárala con el objetivo y corrígela" — sin esa instrucción clara, el agente puede pasar directamente a la entrega sin verificarlo visualmente.
Exige repetir hasta acertar
Pídele que repita el ciclo hasta que el resultado coincida con el objetivo; no aceptes la primera captura como "listo".
Leyenda: la misma secuencia del diagrama circular, ahora en una línea de tiempo: el arco cian de arriba muestra la repetición que vuelve a la etapa 1.
📋 Bloque copy-run: pedir el ciclo completo
Objetivo: hacer que el agente construya una página y se autocorrija visualmente antes de entregártela, usando el ciclo completo.
Crie a página <nome-da-pagina.html> com <descrição do que ela deve ter — seções, textos, botões>.
Depois de escrever o código:
1. Suba um servidor local nesta pasta (ex.: porta <3000>).
2. Abra a página e tire um screenshot da tela cheia.
3. Compare o screenshot com este objetivo: <descreva o visual esperado,
ou aponte a referência/imagem/marca a seguir>.
4. Se houver diferença (cor, espaçamento, alinhamento, texto cortado),
corrija o código.
5. Tire um novo screenshot e repita os passos 3-4 até o resultado bater
com o objetivo. Não pare na primeira tentativa.
Ao final, me mostre o último screenshot e liste o que foi corrigido em cada volta.Cómo verificar: pídele al agente que indique cuántas vueltas dio del ciclo y qué corrigió en cada una. Si dice «solo una vuelta, quedó bien a la primera», desconfía — pídele que muestre la captura de pantalla del primer y del último intento lado a lado.
🔍 Por dentro
Automatización del navegador: un programa que abre y controla el navegador por sí solo: hace clic, desplaza la página, toma capturas de pantalla, sin que una persona tenga que tocar el mouse. Es la «mano» que permite al agente capturar su propio resultado visual.
⚠️ Errores comunes que rompen el bucle
El ciclo de capturas de pantalla solo funciona si lo alimentas bien. Los errores más comunes no son técnicos: tienen que ver con cómo haces el pedido. Mira los dos que aparecen con más frecuencia.
✗ Error 1: objetivo vago
- ✗"Hazlo bonito" no le da al agente nada con qué comparar
- ✗Sin una referencia visual clara, la comparación se vuelve una opinión del propio agente
- ✗Resultado: «cree» que acertó, pero tú no estás de acuerdo al ver
✓ Corrección
- ✓Describe los colores, los textos, las secciones y el comportamiento esperado
- ✓Remite a una captura o un sitio de referencia cuando exista (módulo 5.5)
- ✓Cuanto más concreto sea el objetivo, más precisa será la comparación
✗ Error 2: creer que una pasada basta
- ✗Pedir "toma una captura de pantalla y muéstramela" — sin pedir la comparación y la corrección
- ✗Aceptar la primera captura como lista sin revisar los detalles
- ✗Queda a mitad de camino: lo viste, pero no lo corregiste
✓ Corrección
- ✓Pide explícitamente "repite hasta que coincida"; no "toma una captura de pantalla"
- ✓Exige al menos 2 vueltas antes de considerar que está listo (tema 3)
- ✓Pide el historial de las correcciones hechas en cada vuelta como prueba
⚠️ Atención
Este loop tiene límites: no sustituye tu criterio final ni lo resuelve todo por sí solo. Los límites concretos (lo que NO puede ver y cuándo dejar de insistir) son el tema completo del próximo módulo, 5.4.
✅ Lista de verificación y ejercicio
Antes de considerar «lista» cualquier página del agente, repasa la lista de verificación de abajo. Resume los cinco pasos del ciclo en forma de comprobación práctica.
☑️ Lista de verificación del ciclo de capturas de pantalla
- ☐Di un objetivo visual concreto (no «hazlo bonito»)
- ☐Pedí explícitamente que iniciara el servidor local y capturara la pantalla
- ☐Pedí explícitamente la comparación entre la captura de pantalla y el objetivo
- ☐Exigí al menos 2 vueltas del bucle, no una sola pasada
- ☐Pedí el historial de lo que se corrigió en cada vuelta
- ☐Revisé yo mismo el resultado final antes de aprobarlo
🎯 Ejercicio
Elige una página sencilla (puede ser una landing de una sola línea, como una "tarjeta de presentación digital"). Pídele a Claude Code, usando el bloque copy-run del tema 4, que:
- Crea la página con al menos 3 secciones (encabezado, parte central y pie de página).
- Ejecuta el ciclo completo —escribir, iniciar el servidor, capturar, comparar, corregir— al menos 2 veces.
- Muéstrame la captura de pantalla del primer y del último intento.
- Enumera, en texto, qué cambió entre las dos.
Si el agente pasa directamente a «listo» sin mostrarte las dos capturas, el ciclo no se ejecutó de verdad. Pídeselo de nuevo con más claridad.
Verificación rápida (opcional): ¿por qué el agente es "ciego" sin el ciclo de screenshot?