¿Necesito una API key de Google para usar Stitch con Claude?

Sí. Necesitas crear una API key gratuita desde stitch.withgoogle.com/settings en la sección API Keys.

¿Qué puedo hacer con Stitch conectado a Claude Code?

Puedes crear proyectos de diseño, generar pantallas desde texto, obtener el código de cada pantalla, ver previews de imagen, y construir sitios web completos — todo desde tu terminal.

¿Funciona en Mac y Windows?

Sí. El servidor MCP de Stitch funciona en cualquier sistema operativo donde tengas Claude Code instalado con Node.js/npx disponible.

Cómo Conectar Google Stitch con Claude Code usando MCP

Q: ¿Qué es Google Stitch?

Google Stitch es una herramienta de diseño UI con IA de Google Labs que usa Gemini 2.5 Pro. Transforma prompts de texto en diseños de interfaz completos con código listo para producción.

¿Y si pudieras pedirle a Claude Code que te diseñe una interfaz completa — con layout, colores, tipografía y código listo — sin abrir Figma, sin abrir el navegador, sin salir de tu terminal?

Eso es exactamente lo que puedes hacer conectando Google Stitch con Claude Code a través de MCP.

Google Stitch es la herramienta de diseño UI con IA de Google Labs (potenciada por Gemini 2.5 Pro). Le describes lo que necesitas en texto y te genera diseños de interfaz completos con código exportable. Y ahora, con su servidor MCP oficial, Claude Code puede usarla directamente como herramienta.

En este post te explico cómo configurar todo paso a paso.

Nuevo con MCP? MCP (Model Context Protocol) es un estándar abierto que permite a las IAs conectarse con herramientas externas — como un "USB universal" para apps. Si quieres ver otro ejemplo, lee mi guía de cómo conectar Claude Code con Notion usando MCP.

¿Qué es Google Stitch?

Google Stitch es una herramienta experimental de Google Labs que convierte descripciones de texto en diseños de interfaz de usuario completos. No es un simple generador de mockups — genera código real listo para usar en tu proyecto.

Lo que lo hace especial:

Usa Gemini 2.5 Pro bajo el capó para entender contexto y generar diseños coherentes
Genera múltiples pantallas a la vez (hasta 5 por solicitud)
Exporta código limpio que puedes usar directamente en tu app
Voice Canvas — puedes diseñar por voz, describiendo conversacionalmente lo que necesitas
Vibe Design — describes un objetivo de negocio y te genera múltiples direcciones de diseño para elegir

Y con el servidor MCP, todo esto lo puedes invocar desde Claude Code sin tocar el navegador.

Requisitos

Claude Code instalado (si no lo tienes, sigue mi guía de instalación con Homebrew)
Node.js y npx disponibles en tu terminal
Una cuenta en Google Stitch (acceso en stitch.withgoogle.com)

Paso 1: Crear tu API Key de Stitch

Ve a stitch.withgoogle.com/settings
Busca la sección API Keys
Haz clic en "Create API Key"
Copia la key — la vas a necesitar en el siguiente paso

Guárdala en un lugar seguro. Esta key es la que permite que Claude Code se autentique con Stitch.

Paso 2: Agregar el servidor MCP a Claude Code

Tienes dos opciones para conectar Stitch:

Opción A: Con npx (recomendada)

Ejecuta este comando en tu terminal:

bash

claude mcp add stitch -- npx @_davideast/stitch-mcp proxy

Después, necesitas configurar tu API key. Abre tu archivo de configuración de Claude Code:

bash

nano ~/.claude/settings.json

Y agrega tu API key en la sección de variables de entorno del servidor MCP. También puedes establecerla como variable de entorno antes de iniciar Claude Code:

bash

export STITCH_API_KEY=tu-api-key-aqui

Opción B: Por CLI con transporte HTTP

Si prefieres conectar directamente al endpoint de Google:

bash

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: TU-API-KEY"  -s user

Reemplaza TU-API-KEY con la key que copiaste en el Paso 1.

Paso 3: Verificar la conexión

Abre Claude Code:

bash

claude

Una vez dentro, escribe:

text

/mcp

Deberías ver "stitch" en la lista de servidores MCP con status saludable (verde). Si aparece, todo está conectado.

¿Qué herramientas tienes disponibles?

Una vez conectado, Claude Code tiene acceso a estas herramientas de Stitch:

Herramienta	Qué hace
`create_project`	Crea un nuevo proyecto de diseño en Stitch
`generate_screen_from_text`	Genera una pantalla de UI a partir de tu descripción
`get_screen`	Obtiene los detalles de una pantalla específica
`get_screen_code`	Extrae el código de una pantalla generada
`get_screen_image`	Obtiene la imagen de preview de una pantalla
`build_site`	Construye un sitio web completo a partir de tus diseños

Ejemplos prácticos

Aquí es donde se pone bueno. Prueba estos prompts dentro de Claude Code:

Crear un proyecto de diseño

text

> crea un proyecto en Stitch llamado "Dashboard Analytics" para una app de métricas de redes sociales

Generar una pantalla

text

> genera una pantalla de login con campos de email y contraseña, botón de Google sign-in, y estilo minimalista oscuro

Generar múltiples pantallas

text

> genera 3 pantallas para una app de delivery: pantalla de inicio con restaurantes, menú de un restaurante, y carrito de compras

Obtener el código

text

> dame el código de la pantalla de login que acabas de generar

Construir un sitio completo

text

> construye un sitio web con las 3 pantallas del proyecto de delivery

Flujo de trabajo completo: de idea a código

La magia real está en combinar Stitch con el flujo normal de Claude Code. Aquí va un ejemplo de workflow completo:

text

> 1. Crea un proyecto en Stitch llamado "Landing SaaS"
> 2. Genera una pantalla de hero section con headline, subtítulo, CTA y imagen de producto
> 3. Genera una pantalla de pricing con 3 planes (Free, Pro, Enterprise)
> 4. Dame el código de ambas pantallas
> 5. Integra ese código en mi proyecto Next.js actual

Claude Code va a:

Crear el proyecto en Stitch
Generar los diseños con Gemini 2.5 Pro
Extraer el código limpio
Adaptarlo a tu stack y meterlo en tu proyecto

Todo sin salir de la terminal.

Nuevas features de Stitch (2026)

Google ha estado lanzando actualizaciones importantes para Stitch:

Voice Canvas — diseño conversacional por voz. Describes lo que necesitas hablando y Stitch genera la interfaz
Vibe Design — describes un objetivo de negocio ("necesito una app para gestionar reservas de un restaurante") y Stitch genera múltiples direcciones de diseño para que elijas
Generación multi-pantalla — hasta 5 pantallas a la vez con un solo prompt
Exportación a herramientas de desarrollo — integración con AI Studio y Antigravity para llevar los diseños directamente a código de producción

Bonus: Nuevas features de Claude Code con MCP

Mientras configuras Stitch, aprovecha estas mejoras recientes de Claude Code con MCP:

MCP Elicitation — los servidores MCP pueden pedirte input a mitad de tarea con formularios interactivos, sin romper el flujo
MCP Tool Search — carga lazy de herramientas MCP, reduciendo el uso de contexto hasta un 95%. Solo se activan las herramientas relevantes según lo que estés haciendo
Ecosistema de 6,000+ apps — Google Drive, Slack, GitHub, Jira, Notion, Stripe, Figma, Zapier y muchas más ya tienen servidores MCP
Plugin Marketplace — terceros pueden publicar skills en el Claude Marketplace
Comando /voice — habla con Claude Code presionando la barra espaciadora
Comando /loop — convierte Claude Code en un worker de fondo con tareas programadas tipo cron

Solución de problemas

"El servidor MCP no aparece en /mcp"

Verifica que el comando se ejecutó correctamente. Puedes listar tus servidores MCP:

bash

claude mcp list

Si no aparece Stitch, vuelve a agregarlo:

bash

claude mcp remove stitch
claude mcp add stitch -- npx @_davideast/stitch-mcp proxy

"Error de autenticación"

Verifica que tu API key sea correcta. Puedes generar una nueva desde stitch.withgoogle.com/settings.

"npx no encuentra el paquete"

Asegúrate de tener Node.js actualizado (v18 o superior):

bash

node --version

Si es anterior, actualízalo con:

bash

brew install node

Resumen rápido

bash

# 1. Crear API Key en stitch.withgoogle.com/settings

# 2. Agregar el MCP a Claude Code
claude mcp add stitch -- npx @_davideast/stitch-mcp proxy

# 3. O con HTTP directo
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: TU-KEY" -s user

# 4. Verificar
claude
> /mcp

# 5. Empezar a diseñar
> genera una pantalla de dashboard con métricas de ventas

Un comando para conectar. IA de Google para diseñar. Claude Code para integrar. Todo desde tu terminal.

¿Ya conectaste Notion? Lee mi guía: Cómo conectar Claude Code con Notion usando MCP. Próximamente: Claude Code + Google Drive y más integraciones MCP.