Si hay algo que me ha costado siempre en el desarrollo de aplicaciones, es el diseño de interfaces. Soy de los que pueden pasar horas peleándose con CSS para que un botón quede centrado, y al final sigue sin convencerme. Seguro que a más de uno os suena.

Pero últimamente Google ha estado soltando herramientas experimentales que, combinadas, pueden cambiar completamente cómo trabajamos. Hoy os traigo la combinación de Google Stitch + Google Antigravity: una dupla que te permite generar aplicaciones funcionales y visualmente atractivas en cuestión de minutos, no días.

¿Qué son estas herramientas?

Google Stitch: diseño por «vibe designing»

Google Stitch es el laboratorio de Google para generación de interfaces. Pero no es un simple generador de imágenes: describes lo que quieres construir y Stitch te propone diseños completos, con múltiples pantallas, flujos de navegación y componentes visuales listos para usar.

Lo mejor es que no te quedas con una imagen estática. Puedes interactuar con el diseño, pedir cambios, anotar modificaciones y, cuando estés satisfecho, descargar el código en HTML/CSS o React/Tailwind.

Actualmente está en beta gratuita (sin límites, de momento), así que es momento de aprovechar.

Google Antigravity: tu compañero de código con IA

Google Antigravity es el IDE de Google con agentes de IA integrados. Piensa en VS Code, pero donde la IA no solo autocompleta: planifica, codifica, depura e itera sobre proyectos complejos con mínima supervisión.

Durante la preview gratuita tienes acceso a Gemini Pro, Deep Think y Flash sin esos molestos límites de API que nos tienen acostumbrados otros servicios.

¿Por qué conectarlas?

Separadas son útiles. Juntas, son otro nivel:

• Stitch se encarga del diseño visual
• Antigravity se encarga de la lógica, base de datos, autenticación y despliegue

El truco está en añadir Stitch como servidor MCP (Model Context Protocol) dentro de Antigravity. Así, el agente puede consultar diseños de Stitch directamente e integrarlos en el código que genera.

Paso a paso: la integración

Paso 1: Instalar el servidor MCP de Stitch en Antigravity

En la ventana de agente de Antigravity (la derecha), hacemos clic en los tres puntos y seleccionamos MCP Servers.

Buscamos «stitch» en la lista y lo instalamos. Es un proceso de un clic.

Paso 2: Obtener la API key de Stitch

Necesitamos una clave para que Antigravity pueda hablar con Stitch:

1. Vamos a stitch.withgoogle.com
2. En la esquina superior derecha, hacemos clic en nuestro perfil
3. Seleccionamos «API Keys» y generamos una nueva
4. Copiamos la clave (empieza por algo como sk-...)

Paso 3: Configurar la API key en Antigravity

Volvemos a Antigravity, a la configuración del MCP Server de Stitch, y pegamos la API key en el campo correspondiente.

Y listo. La integración está completa.

Creando nuestra primera aplicación

Veamos un ejemplo real. Quiero construir un gestor de hábitos con modo oscuro y diseño minimalista.

1. Generamos el diseño en Stitch

Abrimos Stitch y escribimos:

«Aplicación minimalista para llevar un registro de hábitos con modo oscuro, gráficos de progreso semanales y botones para marcar la asistencia diaria. Estética limpia y moderna con toques en color morado».

En menos de un minuto, Stitch genera:

• Pantalla principal con lista de hábitos
• Gráfico de progreso semanal
• Modal para añadir nuevos hábitos
• Diseño responsive

Podemos iterar hasta que nos guste el resultado final.

2. Pasamos a Antigravity

Ahora viene la magia. En Antigravity, abrimos el chat con el agente y escribimos algo como:

«Crea una aplicación de gestión de hábitos usando el diseño que obtengas del servidor Stitch MCP. La app debe incluir:
– Autenticación con Clerk
– Base de datos con Convex
– Las funcionalidades que propone el diseño de Stitch
– Despliegue en Vercel»

El agente consultará Stitch, obtendrá el diseño, y empezará a construir la aplicación completa.

3. Iteración automática

Aquí es donde brilla Antigravity: no solo genera código, sino que:

• Abre el navegador para probar la app
• Detecta errores y los corrige
• Verifica que la autenticación funcione
• Comprueba que la base de datos se conecte correctamente

En mi caso, construí una app funcional en 23 minutos. Y no es un prototipo: tiene auth real, base de datos persistente y está lista para producción.

Trucos y consideraciones

Lo que funciona de maravilla

• Diseños complejos: Stitch maneja bien múltiples pantallas y estados
• Componentes modernos: Tailwind CSS, React, layouts responsive
• Iteración rápida: cambiar el diseño en Stitch y pedir a Antigravity que actualice el código funciona sorprendentemente bien

Lo que aún falla

• Detalles muy específicos: a veces hay que ajustar manualmente márgenes o colores exactos
• Integraciones complejas: si necesitas APIs de terceros poco comunes, puede requerir intervención
• Sesiones largas: después de muchos mensajes, el contexto se pierde un poco

Consejos prácticos

1. Sé específico en Stitch: cuanto más detalle des en el prompt, mejor será el diseño base
2. Itera en el diseño primero: mejor gastar 5 minutos ajustando en Stitch que 30 cambiando código
3. Verifica pasos intermedios: pide a Antigravity que te muestre el diseño integrado antes de añadir complejidad

El futuro del desarrollo

Esta combinación de herramientas me hace reflexionar sobre hacia dónde vamos. No creo que vayan a reemplazar a los desarrolladores, pero sí que cambian el tipo de trabajo que hacemos:

• Menos tiempo peleándose con CSS
• Menos tiempo configurando boilers
• Más tiempo pensando en la lógica de negocio y la experiencia de usuario

Es como pasar de ser albañil a ser arquitecto. Sigues construyendo, pero a otro nivel de abstracción.

¿Habéis probado ya esta combinación? ¿Qué experiencias tenéis con herramientas de IA para desarrollo? Me encantaría leer vuestros comentarios.

Recursos útiles:
Google Stitch
Google Antigravity
Documentación MCP