Google Stitch: diseña interfaces con IA (y exporta código listo para usar)

El 19 de marzo de 2026, el precio de las acciones de Figma cayó un 8%. No fue por un trimestre malo. Fue porque Google publicó, ese mismo día, una actualización de Google Stitch que convierte esta herramienta en algo que no existía hace un año: un diseñador de interfaces de IA con canvas infinito, control por voz, y exportación directa a herramientas de código como Claude Code, Cursor o Gemini CLI.

Si Figma te parece caro, o si diseñar interfaces UI es un cuello de botella en tus proyectos porque no eres diseñador, este post es para ti.

---

¿Qué es Google Stitch?

Google Stitch es una herramienta de diseño de UI basada en IA, disponible en stitch.withgoogle.com a través de Google Labs. Se presentó en Google I/O 2025 como una forma de convertir texto e imágenes en interfaces visuales sin saber diseño. En marzo de 2026 recibió su rediseño más ambicioso hasta la fecha.

La propuesta central es lo que Google llama "vibe design": describes lo que quieres en lenguaje natural ("una pantalla de login limpia, estilo SaaS moderno, fondo oscuro") y Stitch genera la interfaz. No necesitas saber usar Figma, ni manejar componentes, ni conocer sistemas de diseño. Escribes y ves.

Pero la actualización de marzo va mucho más lejos que eso.

---

El rediseño de marzo 2026: qué ha cambiado

Canvas infinito con IA nativa

El cambio más estructural es la interfaz. Stitch ya no es una herramienta de "genera y ve". Ahora tiene un canvas infinito de tipo whiteboard donde puedes:

• Explorar múltiples variaciones de diseño en paralelo
• Añadir imágenes de referencia, texto, código o wireframes como punto de partida
• Ver el historial de decisiones de diseño mientras evolucionas el proyecto
• Trabajar en una idea desde el boceto inicial hasta el prototipo funcional, todo en el mismo espacio

Es la diferencia entre tener una hoja de papel y un taller completo. El canvas no desaparece entre sesiones: tus ideas, variaciones y decisiones persisten.

Agente de diseño con gestión de múltiples direcciones

Junto al canvas, Stitch introduce un Agente de diseño que actúa como coordinador:

• Rastrea tu progreso a lo largo del proyecto
• Puede trabajar en múltiples direcciones de diseño en paralelo (algo imposible con una herramienta tradicional de un solo flujo)
• Sugiere alternativas cuando le pides opciones: "Dame tres versiones de esta pantalla: una minimalista, una con más color, una orientada a móvil"
• Mantiene coherencia visual entre pantallas aunque cambies de sesión

Para un equipo pequeño sin diseñador dedicado, esto es como tener un junior de diseño disponible a tiempo completo.

Control por voz: vibe design en modo hablado

La feature más llamativa: puedes hablar con tu canvas. El agente de Stitch escucha en tiempo real y:

• Hace cambios en vivo mientras hablas: "Mueve el botón más arriba, hazlo azul, y cambia el texto a 'Empezar gratis'"
• Realiza critiques de diseño en tiempo real: te señala problemas de jerarquía visual, contraste, o coherencia
• Puede entrevistar al usuario para entender qué quiere antes de generar: "Cuéntame para quién es esta pantalla y qué tiene que hacer"

Es el primer tool de diseño que he visto donde hablar es más rápido que hacer clic.

DESIGN.md: un archivo de diseño para agentes de IA

Esta es la novedad más técnica y, potencialmente, la más importante para builders.

Stitch introduce el concepto de DESIGN.md: un archivo Markdown que contiene las reglas de diseño de tu proyecto (tipografía, colores, espaciados, componentes habituales, principios visuales) en un formato que los agentes de IA pueden leer y aplicar.

Puedes:

• Extraer un DESIGN.md de cualquier URL existente (Stitch analiza el sitio y genera las reglas automáticamente)
• Importar un DESIGN.md en un nuevo proyecto para aplicar esas reglas desde el primer prompt
• Exportar tu DESIGN.md para usarlo en otras herramientas de diseño o coding

¿Por qué importa? Porque rompe el aislamiento entre herramientas. Tu sistema de diseño ya no vive solo en Figma o Stitch: existe como un archivo de texto portable que cualquier agente de IA puede interpretar y aplicar.

SDK y MCP: diseño directamente en tu flujo de código

La integración más potente de esta actualización: Stitch ahora tiene un SDK y un servidor MCP que lo conecta con asistentes de código como Claude Code, Gemini CLI y Cursor.

El flujo concreto:

1. Diseñas la interfaz en Stitch
2. Exportas el diseño (en formato compatible con Figma, o como código)
3. El SDK/MCP lleva ese diseño directamente a tu entorno de código, listo para implementar

Antes, el paso de diseño a código requería o bien exportar y reimportar manualmente, o bien reescribir el diseño en código desde cero mirando la imagen. Ahora es una operación continua.

Para equipos que trabajan con n8n y necesitan interfaces personalizadas (dashboards de automatización, formularios de entrada, portales de cliente), esto es especialmente relevante.

---

Los dos modelos: Flash vs Pro

Stitch funciona sobre dos modelos de Gemini, con planes de uso distintos:

Para trabajo diario de prototipado y exploración, Flash es más que suficiente. Para presentaciones de cliente o cuando el detalle importa, Pro da otro nivel de acabado.

350 generaciones al mes en el plan gratuito es mucho margen para proyectos reales.

---

Casos de uso reales para PYMEs y builders

1. Prototipo rápido de app interna

Tienes una idea para una herramienta interna: un panel para que tu equipo registre clientes, por ejemplo. Antes, necesitabas o bien pagarte un diseñador, o bien usar plantillas de Notion/Airtable que no se adaptan del todo.

Con Stitch: describes la pantalla, la generas, exportas el código, y lo integras en tu stack. En horas tienes un prototipo usable.

2. Landing page sin diseñador

Necesitas una landing para un nuevo servicio. Vas a Stitch, pegas la URL de tu web actual para que extraiga tu DESIGN.md, y le pides: "Crea una landing page para este servicio nuevo, usando los colores y tipografía de mi web". El resultado es coherente con tu branding existente.

3. Diseño de formularios para automatizaciones

Si construyes flujos de n8n que necesitan formularios de entrada de datos (pedidos, solicitudes de presupuesto, onboarding de clientes), Stitch puede generar el diseño de esos formularios y exportarlos en código listo para integrar.

4. Iteración rápida con cliente

El cliente quiere ver opciones antes de decidir. Con el Agente de Stitch generando tres variaciones en paralelo en el canvas, puedes presentar opciones reales en minutos, en lugar de tardar días en producirlas manualmente.

5. Documentar el sistema de diseño existente

Si ya tienes una web o una app con un diseño establecido, usa Stitch para extraer el DESIGN.md automáticamente. Ahora tienes tu sistema de diseño documentado de forma que cualquier agente de IA puede leer y reproducir.

---

Stitch vs Figma: ¿deben preocuparse?

La caída del 8% en las acciones de Figma en el día del lanzamiento no fue irracional. Stitch ataca directamente el segmento de Figma entre usuarios no-diseñadores: equipos técnicos, founders sin equipo creativo, consultores que necesitan prototipar rápido.

Lo que Figma sigue teniendo a su favor:

• Colaboración en tiempo real entre equipos grandes
• Ecosistema de plugins muy maduro
• Handoff a desarrollo con herramientas como Zeplin o Dev Mode
• Historial de versiones detallado y control de diseño fino

Lo que Stitch tiene a su favor:

• Curva de aprendizaje cero para no-diseñadores
• Integración nativa con IA en todo el flujo
• Precios: el tier gratuito es muy generoso
• Exportación a código directa sin intermediarios
• Velocidad de prototipado incomparable

No son lo mismo. Figma es una herramienta profesional de diseño colaborativo. Stitch es una herramienta de generación rápida de UI con IA para quien necesita resultados sin proceso de diseño tradicional.

Para PYMEs que no tienen diseñador en plantilla, la elección es clara.

---

Cómo empezar con Google Stitch ahora mismo

1. Ve a stitch.withgoogle.com
2. Inicia sesión con tu cuenta de Google (necesitas acceso a Google Labs)
3. Crea un nuevo proyecto y empieza con un prompt de texto describiendo lo que quieres diseñar
4. Experimenta con el modo de voz: haz clic en el micrófono y describe cambios en voz alta
5. Cuando tengas algo que te guste, explora las opciones de exportación: Figma format, código, o DESIGN.md

No requiere instalación, no requiere cuenta de pago para empezar, y el canvas guarda tu trabajo automáticamente.

---

Conclusión: el diseño ya no es una barrera para construir

Google Stitch con el rediseño de marzo 2026 no es solo una herramienta de diseño más. Es la confirmación de que la barrera entre "tengo una idea de interfaz" y "tengo una interfaz usable" está desapareciendo.

Para PYMEs y builders que trabajan sin equipo de diseño, sin presupuesto para consultoras creativas, y con más velocidad que recursos, Stitch es una herramienta que vale la pena poner en el toolkit ahora mismo.

La integración con Claude Code y otros agentes de código es, además, la señal de que Google está pensando en un ecosistema donde diseño y código fluyen juntos. Eso es bueno para todos los que construimos cosas.

Si tienes un proyecto en mente y quieres explorar cómo integrar Stitch en tu flujo de trabajo o en tus automatizaciones, desde Nexflow podemos ayudarte. Cuéntanos qué estás construyendo.

---

Post escrito en marzo de 2026. Google Stitch está disponible en stitch.withgoogle.com a través de Google Labs. El rediseño descrito se publicó el 19/03/2026.