Más allá del vibe coding para la Web

1. Introducción

A medida que los agentes de codificación se vuelven fundamentales para el desarrollo de software diario, ya sea que seas un ingeniero experimentado o un nuevo desarrollador que busca lanzar su primera app, la forma en que compilas y lo que compilas está cambiando de forma fundamental. Cuando comienzas a usar agentes de codificación, por lo general, empiezas con prompts "de cero", es decir, una sola instrucción que indica en lenguaje humano y de forma breve lo que deseas. Esto genera problemas rápidamente:

• Sesgo de complacencia: Los modelos suelen aceptar restricciones o premisas defectuosas, ya que buscan completar tu solicitud lo más rápido posible, y no verifican que lo que están creando realmente haga lo que pretendías.
• Brecha de verificación: Los agentes, incluso cuando escriben pruebas, no suelen verificar su trabajo para asegurarse de que funcione. Cuando se intenta usar sitios web en un navegador en vivo, se detectan errores ocultos, diseños dañados y controles inaccesibles.
• Deuda técnica: Debido a la forma en que se entrenan y funcionan los modelos, el código que escriben se inclina hacia patrones antiguos y desactualizados, lo que aumenta la deuda técnica que cuesta más tokens y más tiempo y esfuerzo humanos y de la máquina para administrar. La deuda técnica puede incluso afectar negativamente la experiencia del usuario.

El plan de 4 pasos

Para ayudar a guiar a los agentes de programación a producir un mejor código que se alinee más con tus requisitos, considera seguir un ciclo de vida de desarrollo de productos de 4 pasos:

1. Planifica y diseña: Escribe de forma colaborativa documentos de requisitos del producto (PRD) con el agente y haz que cree prototipos y diseñe los PRD en el navegador antes de comenzar la implementación de producción. Luego, redacta documentos de diseño (especificaciones) arquitectónicos a partir de tus PRD y diseños antes de que comience la codificación.
2. Codificación y compilación: Indica a tus agentes que compilen tus PRD, diseños y especificaciones en lugar de una instrucción de cero disparos, y haz que ejecuten otro agente para verificar su trabajo.
3. Repite el proceso: Vuelve a realizar los pasos 1 y 2 para cada función nueva que quieras agregar.
4. Implementar: Envía a producción.

En este documento, se explica cómo usar los agentes de IA como socios activos y colaborativos con prácticas diseñadas para ayudarte a reducir la deuda técnica y mejorar la calidad del código de salida. Usarás Antigravity junto con Modern Web Guidance y DevTools for Agents para crear un juego de palabras casual y mejorarlo con capacidades de IA. Luego, la implementas en Google Cloud con Firebase para compartirla con tus amigos y familiares.

Qué aprenderás

• Cómo tratar las tareas de programación con IA como ciclos de vida de desarrollo de productos en miniatura
• Por qué debes separar los requisitos del producto de las especificaciones de arquitectura
• Cómo coordinar flujos de trabajo de varios agentes para crear prototipos directamente en el navegador y revisar tu código
• Cómo aprovechar las herramientas y las habilidades de terceros para mejorar tanto tu desarrollo como las experiencias de los usuarios
• Cómo implementar aplicaciones web directamente en producción con el MCP de Firebase

Requisitos previos

• Una Cuenta de Google personal y un proyecto de Google Cloud o Firebase (consulta las instrucciones en la configuración del proyecto)
• Conocimientos básicos de HTML, CSS y JavaScript
• Un navegador web, como Chrome
• Node.js instalado (se recomienda LTS)

2. Configura el proyecto

Cuenta de Google

Si aún no tienes una Cuenta de Google personal, puedes crear una.

Accede a la consola de Google Cloud

Accede a la consola de Google Cloud con una Cuenta de Google personal.

Habilita la facturación

Nota: Si configuraste la facturación con créditos de Google Cloud, puedes omitir el paso "Crea un proyecto de Firebase".

Para configurar una cuenta de facturación personal, ve a habilitar la facturación en la consola de Cloud.

Crea un proyecto de Firebase

Nota: Si configuraste un proyecto de Google Cloud como parte de la configuración de los créditos de Google Cloud, usa ese proyecto para configurar tu proyecto de Firebase. Si lo haces, no es necesario que conectes tu cuenta de facturación, ya que ya está conectada.

1. Navega a la consola de Firebase y accede con tu Cuenta de Google personal.
2. Haz clic en Agregar proyecto (o Crear un proyecto).
3. En el asistente de creación de proyectos, haz lo siguiente:
   • Ingresa un nombre de proyecto (por ejemplo, wordup-web-app) o reutiliza el proyecto de Google Cloud que configuraste durante la configuración del proyecto.
4. Conectar la cuenta de facturación
   • En la barra lateral de Firebase console, busca la insignia del plan en la parte inferior (dice "Spark"). Haz clic en Actualizar.
   • Selecciona el plan Pago por uso.
   • Selecciona la cuenta de facturación que configuraste durante el paso de configuración del proyecto.
   • Confirma la selección para vincular tu cuenta de facturación al proyecto. (Firebase Hosting proporciona un nivel gratuito generoso; completar este instructivo suele costar USD 0).

Instala herramientas

• Antigravity 2.0: Es el arnés de codificación principal con capacidad de agencia con el que trabajas, junto con el modelo Gemini Flash más reciente para una codificación rápida y de vanguardia.
• Orientación sobre la Web moderna: Es una habilidad para codificar agentes que los ayuda a escribir código CSS, HTML y JavaScript modernos. Instala a través de Antigravity Settings > Customization > Build With Google Plugins > Modern Web Guidance.
• Herramientas para desarrolladores para agentes: Permite que los agentes controlen Chrome, inspeccionen el DOM en vivo, prueben el diseño y depuren en el tiempo de ejecución. Instala a través de Settings > Customization > Build With Google Plugins > Herramientas para desarrolladores de Chrome y Settings > Customization > Add MCP Servers > Herramientas para desarrolladores de Chrome para agentes de Antigravity.
• Servidor de MCP de Firebase: Para una configuración de proyectos sin problemas y una implementación con una sola instrucción. Instala a través de Antigravity Settings > Customization > Build With Google Plugins > Firebase and Antigravity Settings > Customization > Add MCP Servers > Firebase.

3. Comienza con un plan

La tentación común en la programación con agentes es enviar una instrucción sin ejemplos ("Crea un juego de palabras") y esperar lo mejor. Esto casi siempre genera casos extremos omitidos, bases de código infladas y ciclos interminables de corrección de errores.

En cambio, trata cada tarea como un ciclo de vida de desarrollo de un producto en miniatura. Los agentes de programación tienen herramientas de investigación y razonamiento que les permiten actuar como un socio colaborativo para ayudarte a aclarar tus ideas antes de escribir cualquier código. El acto de hablar sobre tu idea a menudo te ayuda a encontrar y responder preguntas antes de que se conviertan en problemas. En la ingeniería de software, esto se conoce como depuración con patito de goma. Puedes usar tus agentes de codificación como patitos de goma para planificar tus proyectos y funciones.

Estás creando un juego de palabras casual. Pídele a tu agente que te ayude a diseñar el juego que quieras.

I want to make a casual word guessing game. Go do deep research on those kinds
of games, then ask me questions to help me write a PRD for the game's features.

Esta es la forma básica de la instrucción. Remíxala según tus necesidades. La clave aquí es que realice una investigación profunda y te haga preguntas basadas en esa investigación para ayudarte a planificar tu trabajo.

Comienza con esta instrucción, ya que trabajar con agentes de codificación implica mucha revisión. Desglosar un plan de implementación completo en partes más pequeñas y enfocadas facilita mucho la revisión, permite detectar casos extremos con anticipación, puede aportar conocimientos fuera de los datos de entrenamiento del agente y, lo más importante, permite tomar más descansos entre las revisiones.

• Separa el "qué" del "cómo": Definir la experiencia del usuario y el alcance del producto en un documento formal de requisitos del producto (PRD) separa qué quieres que suceda de cómo se implementa, lo que te permite enfocarte en un aspecto del desarrollo del producto a la vez en lugar de todo a la vez.
• Identifica casos extremos con anticipación: Una sesión interactiva de preguntas y respuestas te obliga a aclarar tus requisitos antes de que comience el diseño o la implementación.
• Investigación activa del agente: Dado que el entrenamiento del agente se interrumpe en una fecha determinada y la información que contiene se resume mucho, extraer información de la investigación activa puede aportar información nueva que, de otro modo, se perdería.

Nota: Si ves que tu agente de codificación hace algo que te gusta o algo que no te gusta, puedes agregar instrucciones a un archivo AGENTS.md en la carpeta de tu proyecto para corregir o reforzar su comportamiento. Intenta agregar lo siguiente para asegurarte de que Antigravity use su herramienta de preguntas integrada cuando te haga preguntas:

When I ask you to ask me questions, you are **REQUIRED** to use your `ask_question` tool to do so.

Ejercicio 1

Ahora es tu turno. Configura tu proyecto y crea tu PRD.

1. Agrega una instrucción a tu archivo AGENTS.md para indicarle que guarde tu resultado en docs/plans/{{YYYY-MM-DD}}-{{description}}.md.
2. Ejecuta la instrucción de investigación anterior, con los ajustes que desees, para desarrollar tu PRD.
3. [Objetivo de ampliación] Actualiza tu archivo AGENTS.md con las acciones que realiza tu agente que no te gustan y vuelve a ejecutar tu instrucción.

Nota: Antigravity 2.0 tiene un comando /grill-me que puedes ejecutar específicamente para realizar este tipo de exploración.

Práctica recomendada: Antigravity 2.0 tiene una herramienta "Artifact" que te permite comentar línea por línea o destacar texto específico y dejar comentarios, al igual que en Documentos de Google. Debes dejar comentarios intercalados en lugar de agregarlos a la instrucción. Guarda la instrucción para los comentarios en todo el documento. Si envías tu instrucción, incluso si está vacía, se enviarán tus comentarios y se le indicará a Antigravity que regenere tu documento con tus comentarios abordados.

Precaución: A veces, incluso cuando le indicas que solo escriba un PRD, incluye el diseño y la arquitectura del software en él. Si lo hace, deja un comentario o pídele que quite esos elementos y se enfoque solo en la experiencia del usuario.

4. Diseño en el navegador

El diseño de IU estático se basa en simulaciones que suelen verse increíbles, pero que pueden no tener en cuenta los casos extremos, las restricciones y las interacciones reales de los usuarios. Al igual que con el código, pedirle a un agente que "diseñe" la aplicación de tu sitio genera diseños que convergen en un diseño genérico (a menudo, de color morado).

En el caso de las apps web, puedes usar la capacidad de tu agente para controlar un navegador web a través de DevTools for agents para diseñar en el navegador. Ya sea que seas diseñador y trabajes para mejorar la fidelidad de tus diseños, o bien codificador o compilador y busques mejorar la IU y la UX de tu proyecto, o ambos trabajando juntos, trabajar en el medio real para el que estás compilando produce mejores resultados.

El diseño en el navegador también te brinda la oportunidad de coordinar varios agentes que trabajan juntos para producir un solo resultado. Estos subagentes son agentes con arquetipos y objetivos específicos que se pueden coordinar para producir mejores resultados que un solo agente trabajando por su cuenta. Con el diseño, puedes solicitar que un agente de diseño visual, un agente de experiencia del usuario y un agente de accesibilidad trabajen juntos para ayudarte con tu diseño y que te lo muestren directamente en el navegador.

Precaución: Usar subagentes para completar tareas requiere más tokens. Si bien pueden producir resultados de mucha mayor calidad, ten en cuenta que su uso puede generar costos adicionales.

Inicia un panel de agentes de diseño para que te ayuden a elegir un diseño según tu PRD.

Using the PRD, start a panel of expert agents: one UX design, one web
accessibility, and one for visual design, and have them work together to design
3 different UI mockups and show them to me in-browser.

Sugerencia: Puedes escribir @ en el área de instrucciones de Antigravity y comenzar a escribir el nombre de un archivo para que Antigravity lo analice.

Diseñar en el medio para el que estás creando, en este caso, la Web, en lugar de un medio estático, te permite detectar casos extremos y restricciones que, de otro modo, serían difíciles de administrar, y te permite obtener comentarios visuales inmediatos que son fieles a la producción.

Ejercicio 2

Ahora es tu turno. Diseña tu proyecto.

1. Ejecuta la instrucción de diseño anterior, con los ajustes que desees, para crear tu diseño. Incluye ideas para las diferentes direcciones de diseño que te gustaría ver (como moderno, divertido, realista, etcétera).
2. Elige un diseño que te guste y trabaja en él con tu agente.
3. Pídele a tu agente que actualice el PRD para que apunte al diseño acordado.
4. Objetivo adicional: Ejecuta pruebas de accesibilidad y de diseño adaptable para el diseño que elegiste, y ajústalo en función de esas auditorías.

Precaución: A veces, los agentes se exceden y toman esta dirección como una aprobación para desarrollar la aplicación completa. Observa cómo piensa y, si ves que hace más de lo que esperas, deténla y pídele que cambie de rumbo.

5. Escribe una especificación

Con un PRD aprobado ("qué se debe compilar") y un diseño visual seleccionado ("cómo se verá"), ahora necesitas una alineación técnica en la arquitectura ("cómo se debe compilar").

Un documento de diseño técnico o especificación (especificación para abreviar) detalla las estructuras de archivos, la administración de estados, las interfaces de componentes, las canalizaciones de eventos y las dependencias. Crear una especificación antes de escribir el código te permite detectar desalineaciones y patrones de codificación no deseados de forma anticipada, antes de que se conviertan en código que sea más difícil de comprender y refactorizar.

Write a detailed technical design document on how to implement the game with
the chosen design.

Por qué lo haces

• Claridad arquitectónica: Definir la jerarquía de componentes y el flujo de transición de estados (por ejemplo, Idle → InGame → EvaluatingGuess → GameOver) evita las condiciones de carrera y el código espagueti frágil.
• Alineación con los estándares modernos: Con la Orientación para la Web Moderna habilitada, el agente hace referencia a los estándares modernos (por ejemplo, consultas @container de CSS, elementos
  integrados para modales o superposiciones de ayuda, y módulos ES modulares) en lugar de extraer bibliotecas heredadas pesadas.
• Revisiones por etapas: Separar la revisión del PRD funcional de la revisión del documento de diseño técnico te permite evaluar la arquitectura de forma independiente de la experiencia del usuario.

Ejercicio 3

1. Indica a tu AGENTS.md que guarde el resultado en la carpeta actual:

   PRDs should _always_ be written to the current project's root in `docs/plans/{{YYYY-MM-DD}}-{{description}}.md` format
   

2. Ejecuta la instrucción del documento de diseño y revísala para asegurarte de que abarque aspectos como la estructura de directorios, el control de eventos y el almacenamiento.
3. Objetivo ambicioso: Incluir diagramas de Mermaid para explicar el flujo de estados a través de la aplicación, si aún no los incluye.

6. Por último, compila la app

Con el PRD, el boceto de la IU y el documento de diseño establecidos, es hora de compilar. Estos tres elementos son la guía clara y sin ambigüedades que los agentes necesitan para saber qué deben crear.

Esta es otra buena oportunidad para usar subagentes. Puedes ejecutarlos después de compilar el código para revisar qué tan cerca se mantuvo lo que se compiló de tus diseños iniciales y otro para verificar la calidad del código de lo que se compiló.

Use the PRD, design doc, and mockup to implement the site, then send out 2
agents, one to check how closely you followed the requirements, and one to
review the code.

Por qué lo haces

El desarrollo basado en especificaciones con revisores de primer paso le brinda a tu agente requisitos claros y previamente verificados para desarrollar, y un nuevo conjunto de ojos para asegurarse de que se haya cumplido el plan antes de que llegue a ti, lo que mejora la calidad y la fidelidad.

• Requisitos verificados: El agente no necesita adivinar lo que quieres, ya que revisaste todo, excepto la implementación, antes de que se escribiera cualquier código.
• Una mirada fresca: Un agente de revisión generado en un contexto nuevo no tiene sesgo de confirmación por la creación de la base de código, lo que lo hace eficaz para detectar casos extremos no controlados, requisitos de implementación faltantes y otros detalles del código o del producto que se pasaron por alto.

Ejercicio 4

1. Ejecuta la instrucción de compilación y apunta a los archivos exactos que quieres que revise.
2. Observa el resultado mientras se ejecuta. Verás cómo razona tus requisitos mientras intenta desarrollarlo. Si algo parece salirse de control, puedes detenerlo y corregirlo.
3. Haz que ejecute tu servidor de desarrollo para ver el sitio final y verificar su trabajo.
4. Objetivo ambicioso: Vuelve a realizar este proceso para agregar pruebas automatizadas.
5. Objetivo ambicioso: Elige un framework o una pila tecnológica específicos en los que quieres que se cree el sitio. Con el PRD, la maqueta y el documento de diseño separados, debería ser sencillo adaptarlos a diferentes opciones.

7. Implementar en producción

Ya planificaste, diseñaste y codificaste. ¿Qué queda? Se implementa en producción.

Deploy this site to my Firebase project [YOUR_PROJECT_ID] using Firebase
Hosting.

Precaución: Si esto no funciona, asegúrate de tener instalado Firebase MCP. Es posible que también debas acceder la primera vez que ejecutes este comando.

Ejercicio 5

1. Ejecuta la solicitud de implementación y reemplaza el ID de tu proyecto.
2. Copia la URL de alojamiento en vivo que te proporcionó el agente.
3. Abre la URL activa para verificar que se haya implementado y que funcione.
4. Objetivo ambicioso: Usa las Herramientas para desarrolladores para que los agentes ejecuten una auditoría de Lighthouse en tu sitio de producción, realicen ajustes para mejorar la puntuación de Lighthouse y publiquen las actualizaciones.

8. [Opcional] Mejoras con IA

Tu juego de palabras ahora funciona por completo con un diccionario estático. Para cambiar el diccionario estático a una palabra dinámica, puedes solicitar una cada vez con un modelo de lenguaje pequeño y local de la API de Prompt.

Precaución: Si aún no lo hiciste, asegúrate de tener instalada la guía de la Web moderna para que te ayude.

Como no está disponible en todos los dispositivos, usas la mejora progresiva para verificar si la API y el modelo están disponibles. Si es así, úsalas; de lo contrario, recurre a tu lista estática.

Ejercicio 6

Pon en práctica todo lo que aprendiste.

1. Trabaja con tu agente para escribir un PRD que use la API de Prompt para generar una palabra oculta válida.
2. Diseña la barra de progreso de descarga y la IU de integración de IA en el navegador.
3. Escribe una especificación para la implementación. (Sugerencia: Ejecuta un agente para asegurarte de que se haya usado la sintaxis de API correcta aquí).
4. Desarrolla tu nueva función.
5. Implementarlo en producción

9. Conclusión

Felicitaciones. Compilaste, perfeccionaste, mejoraste e implementaste correctamente una aplicación web moderna, accesible y orientada a la IA con las prácticas recomendadas de programación con agentes.

Qué aprendiste

• Flujos de trabajo de agentes basados en productos: Cómo tratar las tareas como ciclos de vida de productos pequeños (PRD → Diseño → Especificación → Compilación) reduce la deuda, la sobrecarga de revisión y la fricción de las idas y vueltas.
• Paneles de especialistas con varios agentes: Cómo ejecutar varios subagentes de IA puede ayudar a mejorar la calidad y la fidelidad de tu trabajo
• PRD vs. documento de diseño: Por qué separar el alcance funcional (plan) de la arquitectura técnica (especificación) es un proceso más preciso y escalable que la generación de instrucciones de funciones sin ejemplos.
• Implementación sin problemas: Cómo usar servidores de MCP (como el de Firebase) para optimizar el acceso a sistemas externos, como la implementación de tu sitio