🖥️ Vibe Coding: correcciones de frontend en vivo

A todos nos ha pasado: te enfrentas a un bug de CSS —una navbar que se superpone al contenido, un iframe de video cortado en el borde, un modal que funciona en desktop y se desarma en mobile. Le describes el problema al agente y él se sumerge directo en el código, edita tres archivos, ejecuta el build... y la corrección sale mal. Vuelves a describirlo, vuelve a editar, ejecuta el build otra vez, y ahora rompe otra cosa.

El flujo tradicional de IA es de de atrás hacia adelante: primero adivina los cambios de código y espera que el resultado quede bien. Así no trabaja un desarrollador. Un desarrollador abre el navegador, inspecciona el elemento, ajusta el CSS en vivo, ve el resultado al instante y solo entonces escribe el código permanente. El Vibe Coding hace que tu agente trabaje exactamente así.

Antes de hacerlo cualquier trabajo, la skill obliga al agente a confirmar el repositorio activo. Detecta el directorio de trabajo actual y te pregunta claramente si es el proyecto correcto para la sesión. Nada de git, nada de browser, nada de edición hasta que confirmes. Es un paso sencillo que previene un daño costoso: modificar el proyecto equivocado.

Confirmado el workspace, el siguiente paso es crear el sandbox antes de cualquier análisis. El agente verifica el git status; si hay trabajo sin commit, se pausa y ofrece una copia de seguridad local. Con el árbol limpio, pide una descripción breve de la tarea y inmediatamente crea y cambia a una rama local. Tú experimentas sin miedo: la main nunca se toca.

# 1. Verifica se há trabalho não commitado
git status

# 2. (se sujo) oferece backup local antes de começar
git add . && git commit -m "wip: backup antes do vibe"

# 3. cria a sandbox ANTES de abrir o navegador
git checkout -b vibe/fix-navbar-bleed

Ahora viene la parte que le da nombre a la skill. El agente identifica la URL objetivo: puede ser un servidor de desarrollo local (http://localhost:3000) o una URL alojada de staging/producción. Si es local, levanta el servidor en segundo plano; si está alojada, omite este paso. Luego inicia un navegador automatizado visible, NO headless, en tu pantalla: ves cómo ocurre la automatización en vivo.

Con la página abierta, el agente inspecciona el DOM (ahorrándote copiar y pegar HTML) y inyecta CSS/JS en vivo para probar correcciones — sin editar ningún archivo del proyecto. Toma capturas de los ajustes y te las muestra. Como alternativa, genera un snippet de JavaScript puro para que lo pegues en la consola de tu propio navegador.

document.querySelector('.navbar')
  .style.position = 'relative';

Esta es el alma de la skill. Son cuatro puertas de aprobación obligatorias. El agente literalmente no puede saltarse pasos: se detiene y espera tu «adelante» en cada momento crítico. Tu código, tus reglas. Cada puerta tiene un límite claro y ninguna permite que la siguiente se abra por sí sola.

Con la estrategia aprobada, el agente traduce la inyección temporal del navegador en código fuente limpio y permanente. Elimina las utility classes temporales, los console logs y los parches usados en la prueba en vivo. Fíjate en el cambio de vocabulario: es "persistir en la fuente", no "hardcodear". Solo la corrección final y perfecta se convierte en código: el historial de git queda limpio, sin una docena de intentos fallidos.

# Em PowerShell (Windows) NÃO encadeie com &&.
# Rode um comando por vez:
git add .
git commit -m "Fix: navbar bleed-through on staging"
git push origin vibe/fix-navbar-bleed

Ejemplo de salida — una sesión completa

Mira cómo el agente corrige un iframe de video recortado dentro de un modal: desde la revisión del repo hasta el push, deteniéndose en cada punto de control.

🛠️ Ejercicios prácticos