📸 La foto fija no muestra el baile
¿Eres nuevo aquí? Uno screenshot es una captura fija de la pantalla en un instante exacto: congelada, píxel por píxel. Es la base del ciclo que aprendiste en el módulo 5.3: el agente toma la captura, la compara con lo que debería estar ahí y ajusta el CSS hasta que coincida.
Imagina que le pides a alguien que juzgue si un baile salió bien comparando dos fotos: una del inicio del movimiento y otra del final. Verás las dos posiciones de los brazos, pero no verás el trayectoria, la velocidad, si el movimiento fue fluido o entrecortado, si el timing coincidió con la música. Esa es exactamente la limitación del ciclo de capturas de pantalla: muestra estados, nunca la transición entre ellos.
Leyenda: las dos fotos (inicio y final) son todo lo que ve el bucle de screenshot. Todo lo que ocurre entre ellas —la curva del movimiento— queda invisible para una comparación de imágenes.
💡 Concepto principal
El bucle de capturas de pantalla es excelente para comparar estados. Él no ve transiciones.
- •Diseño, color, espaciado, alineación: todo eso es estado. El bucle lo resuelve.
- •Una transición suave de 300ms entre dos estados: eso es movimiento. El ciclo no lo ve.
✅ Lo que el bucle hace bien
Antes de hablar de lo que falta, conviene destacar dónde funciona muy bien el ciclo, porque la lección de este módulo no es «no confíes en el ciclo», sino «sabe dónde se detiene». Todo lo que es estado visual estático (la apariencia de la pantalla en un instante, sin considerar lo que ocurrió antes o después) el bucle compara con precisión de píxel.
✓ El bucle funciona
- ✓Espaciado incorrecto, elemento desalineado, margen dañado
- ✓Color fuera de la paleta, contraste insuficiente
- ✓Texto cortado, overflow, saltos de línea inadecuados
- ✓Diseño roto en móvil vs. escritorio
- ✓Un elemento se superpone a otro, z-index incorrecto
✗ El ciclo pierde
- ✗Si una transición de hover es fluida o entrecortada
- ✗Si el timing de una animación de entrada «encaja» con el contenido
- ✗Si un parallax de fondo da una sensación real de profundidad
- ✗Si un gradiente animado fluye o se traba (jank)
- ✗Si la sensación general de la interfaz parece costosa o barata
🔍 Por dentro
La regla práctica: si la diferencia entre «correcto» e «incorrecto» se ve en una foto fija, el loop lo resuelve solo. Si la diferencia solo aparece en vivo, con el paso del tiempo, el loop necesita ayuda.
🎬 Las dos cegueras: animación y fondo en movimiento
¿Eres nuevo aquí? Animación CSS es un cambio gradual de una propiedad visual (posición, color, tamaño) a lo largo del tiempo, controlado por el navegador. Hover es el estado de un elemento cuando el mouse pasa por encima de él: normalmente activa una transición. Parallax es la técnica de mover capas del fondo a velocidades distintas del desplazamiento, para crear una sensación de profundidad.
Son dos familias de cosas que escapan del bucle:
Animación — transición, hover, efecto de entrada
El agente toma dos fotos (antes y después del hover, por ejemplo) y ambas parecen correctas por separado. Pero el easing (la curva de aceleración/desaceleración del movimiento — "suave al inicio, rápido en el medio" es diferente de "lineal todo el tiempo") puede estar mal, y ninguna foto lo muestra.
Fondo en movimiento — parallax, partículas, video, gradiente animado
La misma limitación, a mayor escala: una foto del fondo estático nunca muestra la fluidez ni si el movimiento es constante o se traba (el jank — bloqueo visual cuando el navegador no logra dibujar los cuadros a tiempo).
Leyenda: el punto en movimiento (punto cian pulsante) recorre una curva suave, pero las dos cámaras solo capturan el inicio y el final. El "medio" del movimiento, donde está el easing, nunca se convierte en imagen.
💡 Consejo práctico
Si el agente dice «comparé las capturas de pantalla antes y después del hover, todo está bien», pregúntale específicamente por la suavidad de la transición. Es muy probable que tenga razón sobre el estado final y que no haya revisado nada del recorrido para llegar a él.
🔬 Por qué sucede — la raíz técnica
No es falta de esfuerzo del agente: es una limitación de la herramienta. La captura de pantalla automatizada captura la pantalla en un único instante (un frame, un cuadro fijo). Para «ver» el movimiento de verdad, habría que capturar una secuencia de cuadros a lo largo del tiempo y luego interpretar la diferencia entre ellos: mucho más caro, más lento y, aun así, más difícil de juzgar si algo es «bonito» o «feo» que comparar dos imágenes.
Paso 1 — el agente escribe el CSS de una animación
Define la `transition` o `@keyframes`, según lo que leyó en el diseño o te pidió.
Paso 2 — toma una captura del estado inicial
Esto es confiable y fácil de comparar.
Paso 3 — activa el efecto y toma otra captura
De nuevo, un instante: al final de la transición o en un punto arbitrario en medio de ella.
Paso 4 — compara las dos fotos y "aprueba"
Aquí está el riesgo: las dos capturas coinciden con lo esperado, pero nadie comprobó cómo fue el trayecto entre ellas: si se trabó, si fue demasiado rápido, si el ritmo encajó con el resto de la página.
⚠️ Atención
El agente puede genuinamente «creer» que todo está bien: no es mala fe, es que la herramienta que tiene a mano solo ve estados. Por eso tú necesitas conocer este límite, no solo corregirlo.
🛠️ Construir: trabajar directamente en el código cuando falla el bucle
Cuando la pieza es movimiento, la solución no es insistir con más capturas de pantalla: es cambiar de método: pedirle al agente (1) que lea los valores exactos de CSS que controlan el movimiento (duración, easing, delay), (2) que explique qué hace cada valor con palabras sencillas y (3) que abra el navegador de verdad para que observes el movimiento en vivo, en lugar de confiar solo en la comparación automática de imágenes.
Preciso que você ajuste a animação do botão ""
no arquivo .
Antes de mexer, faça isto:
1. Leia o CSS atual da transição/animação desse elemento e me diga, em português simples,
qual é a duração, o easing e o delay usados hoje.
2. Não confie só em screenshot pra validar o resultado. Depois de editar, abra o navegador
de verdade (ou peça pra eu abrir) e descreva o que observou no movimento ao vivo:
ficou suave? ficou rápido demais? travou (jank) em algum ponto?
3. Só then ajuste o valor - o objetivo é .
Ao final, me diga exatamente qual linha de CSS mudou e por quê. Obligar al agente a revisar los valores reales de CSS y observar el movimiento en vivo, no solo comparar imágenes.
El prompt de arriba, adaptando el elemento, el archivo y el resultado deseado entre corchetes.
Abre tú mismo la página en el navegador y pasa el mouse o activa el efecto. Si a tu ojo parece correcto, está correcto: ese juicio no se puede delegar.
🔍 Por dentro
- Duración: cuánto tiempo tarda el movimiento (p. ej., `transition: all 300ms`): demasiado rápido parece un «salto»; demasiado lento, «pesado».
- Easing: la curva de velocidad del movimiento (`ease-in-out`, `ease-out`, `linear`) — es lo que da la sensación de ser "natural" o "robótico".
- Delay: cuánto tiempo espera antes de empezar — útil para encadenar varias animaciones seguidas.
📊 El 40% que falta — dónde entra tu criterio
Vale la pena cerrar con el número que te acompañará durante el resto de esta ruta: el ciclo de capturas de pantalla lleva un front-end de genérico a sólido — algo así como el primer 60% del camino hacia un resultado «profesional». El 40% final —movimiento, ritmo, «feeling», la diferencia entre parecer un producto caro y parecer una plantilla— todavía depende de alguien que mire la pantalla de verdad y decida. Ese límite no es un defecto del ciclo: es donde termina la ayuda que la IA puede dar por sí sola y empieza el criterio humano.
Leyenda: la barra muestra el 60% que el bucle automatizado cubre bien (estado visual) y el 40% final, donde el movimiento y el timing requieren que alguien mire la pantalla de verdad.
🎯 Concepto principal
- •El bucle no se sustituye — sigue haciendo el trabajo un 60% más rápido de lo que lo harías a mano.
- •Los últimos 40% son donde intervienes: abres el navegador, observas el movimiento y decides si «está bien».
Verificación rápida (opcional): ¿por qué el ciclo de capturas de pantalla no detecta bien una transición de hover mal ajustada?
✏️ Ejercicio
Toma cualquier botón o tarjeta con efecto hover que el agente ya haya ajustado usando el ciclo de capturas de pantalla (módulo 5.3). Abre la página en el navegador, mueve el mouse despacio y observa el movimiento en vivo durante 10 segundos.
- 1.¿El movimiento parece suave o da un «salto» perceptible?
- 2.Si no te gustó, usa el prompt del tema 5 para pedirle al agente que lea los valores de CSS y los ajuste revisando el código, no solo comparando capturas.
- 3.Repite la prueba en vivo después del ajuste — esa es la única forma de cerrar el ciclo aquí.