01 Qué es Stitch y por qué conectarlo a Claude
Stitch genera diseños de interfaz de alta fidelidad (colores, tipografía, jerarquía, iconos y maquetación) a partir de lenguaje natural, bocetos o capturas de referencia, y exporta el resultado como HTML y CSS. Usado desde su web ya es útil, pero el salto llega al conectarlo a Claude Code: Claude entiende tu proyecto, escribe mejores descripciones de cada pantalla, itera con Stitch por ti y después integra el código en tu repositorio.
La conexión se hace con el servidor MCP de Stitch, un servicio remoto de Google al que Claude llama como si fueran herramientas propias.
Prototipos para clientes
Tres propuestas visuales de una landing en la primera reunión, en lugar de una semana después.
Rediseño de una web existente
Claude extrae el sistema de diseño actual y Stitch propone una versión modernizada coherente.
MVP de una app
Pantallas móviles y de escritorio que luego se convierten en componentes reales.
02 Paso 1: consigue tu clave de API
-
1
Entra en Stitch
Accede a stitch.withgoogle.com con tu cuenta de Google.
-
2
Genera una clave de API
En los ajustes de tu cuenta de Stitch crea una clave para el servidor MCP y cópiala.
-
3
Guárdala fuera del código
Apúntala en tu gestor de contraseñas. No la pegues en archivos que vayas a subir a un repositorio.
03 Paso 2: conecta Stitch a Claude Code
El servidor MCP de Stitch está en https://stitch.googleapis.com/mcp y se autentica con la cabecera X-Goog-Api-Key. Con el comando oficial de Claude Code para servidores HTTP lo añades a nivel de usuario, disponible en todos tus proyectos:
claude mcp add --transport http stitch https://stitch.googleapis.com/mcp \
--header "X-Goog-Api-Key: TU_CLAVE_DE_STITCH" \
--scope userAbre Claude Code y escribe /mcp: debe aparecer stitch como conectado. Si prefieres que lo configure Claude, pásale la página de configuración MCP de la documentación de Stitch y pídele que siga las instrucciones para tu sistema.
04 Qué puede hacer Claude con Stitch
| Herramienta MCP | Qué hace |
|---|---|
| create_project / list_projects | Crea un proyecto contenedor o lista los que ya tienes. |
| generate_screen_from_text | Genera una pantalla nueva desde una descripción, para móvil, escritorio o tableta. |
| edit_screens | Aplica cambios a pantallas existentes con instrucciones en lenguaje natural. |
| generate_variants | Propone variantes cambiando maquetación, colores, imágenes, tipografía o textos. |
| list_screens / get_screen | Lista las pantallas y descarga su HTML y su captura. |
| create_design_system / apply_design_system | Define un sistema de diseño y lo aplica a las pantallas para mantener coherencia. |
05 Paso 3: tu primer diseño
Cuanto más concreto seas, mejor: para quién es, qué debe conseguir cada pantalla, el tono visual y los dispositivos. Adjuntar dos o tres capturas de referencia ayuda más que cualquier adjetivo.
Usa Stitch para diseñar una app de reservas para una clínica de fisioterapia en Valencia. Público: pacientes de 30 a 65 años, poco técnicos. Estilo: limpio, cálido, mucho espacio en blanco, botones grandes. Crea un proyecto y genera para móvil: inicio con próximas citas, selección de fisioterapeuta, calendario de huecos y confirmación. Antes de generar, enséñame la descripción que vas a enviar de cada pantalla.De la pantalla de inicio, genera tres variantes: una que cambie solo la paleta, otra que reorganice la maquetación y otra más atrevida. Descárgame las capturas y compáralas en una tabla con pros y contras para un público mayor.Descarga el HTML de las pantallas aprobadas y conviértelo en componentes de este proyecto, respetando la estructura de carpetas y los estilos existentes. Extrae colores y tipografías como variables. No inventes textos: deja marcadores donde falte contenido real.06 Extra: las skills oficiales de Stitch
Google Labs publica un repositorio de skills que encapsulan flujos completos: generar diseños, extraer un DESIGN.md desde el código fuente, convertir código existente en un diseño de Stitch, subir recursos, o pasar pantallas a componentes React, React Native o shadcn/ui. Todas necesitan el servidor MCP ya configurado.
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codenpx skills add google-labs-code/stitch-skills07 Límites y consejos
- ✓Stitch genera propuestas, no un producto final: revisa accesibilidad, contraste y textos antes de enseñarlo a un cliente.
- ✓El HTML exportado es un punto de partida; intégralo en tu framework en lugar de pegarlo tal cual.
- ✓Define pronto un sistema de diseño para que todas las pantallas compartan estilo.
- ✓Usa imágenes y marcas propias o con licencia; no copies diseños protegidos de terceros.
- ✓Revisa los límites de uso de tu cuenta de Stitch si generas muchas variantes seguidas.
Preguntas frecuentes
No, pero ayuda saber describir lo que quieres. Las referencias visuales y un público objetivo claro mejoran mucho el resultado.
Sí, cualquier cliente compatible con servidores MCP remotos puede conectarse. Esta guía usa Claude Code porque además puede integrar el código en tu proyecto.
Es la librería oficial para usar Stitch desde tus propios scripts o agentes en JavaScript. No hace falta instalarla para conectar Stitch a Claude Code.
Sí. Las skills oficiales incluyen flujos para extraer el sistema de diseño de tu código y subir pantallas existentes a Stitch para rediseñarlas.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.