1. Introducción
En este codelab, crearás un sitio web listo para producción que combina el diseño impulsado por IA con un entorno de desarrollo centrado en el agente. Usarás Google Stitch para generar una IU de alta fidelidad y, luego, la conectarás al IDE de Antigravity a través del Protocolo de contexto del modelo (MCP). Por último, usarás un agente autónomo para recuperar el "ADN de diseño" y, luego, implementarás una aplicación de React perfecta en píxeles.
Actividades
- Genera IU en Stitch: Usa lenguaje natural para crear un diseño web a gran escala en Google Stitch.
- Puente con MCP: Conecta Antigravity a tu proyecto de Stitch con el Protocolo de contexto del modelo.
- Implementación autónoma: Usa la "Pestaña de agente" de Antigravity para recuperar tokens de diseño y crear un proyecto de React/Tailwind.
- Verificar y definir: Usa el navegador integrado para "verificar la armonía" del código con el diseño original.
Qué aprenderás
- Cómo usar Google Stitch para crear rápidamente prototipos de diseños de IU de alta fidelidad
- Cómo configurar servidores de MCP en el IDE de Antigravity
- Cómo usar agentes autónomos para traducir metadatos de diseño visual en código modular
Requisitos
- Navegador web Chrome
- Un IDE de Antigravity instalado
- Una cuenta de Google Stitch
- Una clave de API de Stitch
- Node.js (v18 o versiones posteriores) instalado de forma local
Antes de comenzar
- En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.
- Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Obtén información para verificar si la facturación está habilitada en un proyecto .
Para obtener créditos de Google Cloud: Para ayudarte a usar Antigravity con proyectos de Google Cloud, canjea tus créditos gratuitos de Google Cloud con este vínculo. Puedes seguir las instrucciones aquí para activar el crédito y crear un proyecto nuevo.
- Navega a stitch.withgoogle.com y asegúrate de poder acceder.
- Asegúrate de tener instalado el IDE de Antigravity (disponible en antigravity.google).
2. Crea el diseño en Google Stitch
El agente necesita una "fuente de verdad" visual para seguir. Antes de escribir código, debemos definir la estética.
- Accede a la plataforma: Navega a stitch.withgoogle.com.
- Selecciona el tipo de proyecto: En el panel principal, busca el botón de activación Start a new design. Haz clic en Web para asegurarte de que tu diseño esté optimizado para diseños basados en navegadores.
- Elige tu modelo: Haz clic en el menú desplegable del modelo (actualmente, se muestra 3.0 Flash) dentro del cuadro de instrucciones. Asegúrate de que esté seleccionado Gemini 3 para obtener el razonamiento y la generación de diseño más avanzados.
- Describe tu visión: En el área de texto etiquetada como "Describe tu diseño", ingresa tu instrucción:
"Diseña una página de destino de SaaS moderna para una startup de tecnología espacial llamada LaunchPad. Usa una paleta de colores azul noche y violeta neón. Incluye una sección de impacto con un botón "Comenzar", una cuadrícula de funciones de 3 columnas y una tabla de precios con efecto de vidrio". 5. Generar: Haz clic en el ícono de flecha (junto al selector de modelos) para comenzar el proceso de generación. 6. Refinar y asignar un nombre: Una vez que se genere la IU, asígnale un nombre a tu proyecto en el encabezado superior. Asígnale el nombre LaunchPad. Puedes usar la barra lateral de chat para definir mejor cualquier elemento específico antes de pasar al IDE.
[!TIP] También puedes elegir entre las opciones de
"Prueba estas instrucciones"
si quieres comenzar rápidamente.
3. Configura el MCP de Antigravity
Para permitir que el agente Antigravity "lea" tu diseño, debes generar una clave de API segura y agregar el servidor de MCP de Stitch.
Genera la clave de la API de Stitch
- En Google Stitch, haz clic en tu foto de perfil en la esquina superior derecha.
- Selecciona Ajustes de costura en el menú desplegable.
- Navega a la sección Clave de API.
- Haz clic en el botón Crear clave.
- Copia la clave: Copia la clave generada de inmediato y guárdala de forma segura. La necesitarás en el próximo paso.
Configura el MCP de Stitch en Antigravity
- Abre el IDE de Antigravity.
- Abre el Administrador de agentes.
En cualquier momento, puedes alternar entre el Administrador de agentes y el editor presionando CMD + E (Mac) o CTRL + E (Windows), o bien a través de los botones Open Editor y Open Agent Manager que se encuentran en la parte superior derecha de la barra de menú. .
- Haz clic en + Abrir espacio de trabajo.
Para iniciar una conversación nueva en un espacio de trabajo, selecciona el espacio de trabajo deseado en la pestaña Iniciar conversación o presiona el botón de signo más junto al nombre del espacio de trabajo en la barra lateral.
- Haz clic en Open New Workspace, asigna el nombre
LaunchPad-Projectal espacio de trabajo y selecciona un directorio local. Esto garantiza que el agente tenga una carpeta raíz específica para generar archivos sin saturar otros proyectos.
Configura el MCP de Stitch
- En tu nuevo espacio de trabajo, vuelve a Agent Manager (CMD + E para Mac o CTRL + E para Windows) y selecciona MCP Servers.
Abre la tienda de MCP a través del menú desplegable "…" en la parte superior del panel del agente del editor.
Antigravity admite el Protocolo de contexto del modelo (MCP), un estándar que permite que el editor se conecte de forma segura a tus herramientas locales, bases de datos y servicios externos. Esta integración le proporciona a la IA contexto en tiempo real más allá de los archivos abiertos en tu editor.
El MCP actúa como un puente entre Antigravity y Google Stitch. En lugar de exportar manualmente tokens de diseño o copiar códigos hexadecimales y metadatos de diseño en el editor, MCP permite que Antigravity recupere el ADN de diseño directamente de tu proyecto de Stitch cuando sea necesario.
- Busca "Stitch" y haz clic en Instalar.
- Cuando se te solicite, pega tu clave de API de Stitch en el campo de configuración.
- Verifica: En el chat del agente, escribe
List my Stitch projects.. Si se muestraLaunchPad, todo está listo.
- Verificación: En el chat del agente, escribe:
List my Stitch projects.. Si el agente devuelveLaunchPad, el puente se configuró correctamente.
4. Recupera el contexto de diseño
Ahora, el agente debe procesar los metadatos de diseño para garantizar la precisión del código.
- En el chat de Antigravity, escribe: "Usa el MCP de Stitch para recuperar el proyecto "LaunchPad". Extrae la paleta de colores y la tipografía, y luego genera un archivo
DESIGN.mden mi directorio raíz". - Revisión: Abre el
DESIGN.mdque acabas de crear para ver los códigos hexadecimales y las reglas de diseño que extrajo el agente.
5. Implementación (la compilación)
Usa el agente para traducir el diseño en una aplicación de React funcional.
- Ingresa la instrucción "Compila":
"Quiero crear este sitio web completo ahora. Usa React y Tailwind CSS. Asegúrate de que los componentes sean modulares. Cuando termines, ejecuta el servidor de desarrollo y muéstramelo en el navegador integrado". 2. Observa al agente: Creará el proyecto en la terminal, escribirá los componentes en el editor y abrirá la vista previa en el navegador integrado.
6. Revisar y definir mejor
Verifica el resultado y usa el agente para corregir cualquier discrepancia visual.
- Compara el resultado del navegador integrado con el diseño original de Stitch.
- Si algún elemento (como el padding del botón o el grosor de la fuente) no coincide, indícale al agente: "El padding del botón "Comenzar" está ligeramente desviado. Consulta el diseño de Stitch y actualiza las clases de Tailwind".
- El agente volverá a recuperar el contexto de diseño y aplicará la corrección de inmediato.
7. Resumen y próximos pasos
¡Felicitaciones! Lograste cerrar la brecha entre un diseño de alta fidelidad y una base de código funcional con Antigravity y el MCP de Stitch.
Resumen de lo que hiciste:
- Se diseñó una IU en Stitch con Gemini 3.
- Se generó una clave de API segura y se configuró Antigravity MCP.
- Se usó un agente autónomo para compilar y verificar un sitio de React + Tailwind.