comunidadbóvedastitch: diseño con ia

Stitch: Diseño con IA

Lo que un diseñador te cobraba miles de dólares, ahora Claude lo hace en menos de cinco minutos. Configura Stitch MCP de Google y diseña interfaces completas — colores, tipografía, estructura, web y móvil — con un solo prompt.

Qué vas a aprender

  • Qué es Stitch — la herramienta gratuita de Google que genera diseños UI desde texto.
  • Configurar el MCP — conectar Stitch a Claude en menos de 30 segundos.
  • Diseñar tu primera app — describir tu idea y que Claude diseñe todo por ti.
  • Las herramientas del MCP — las 8 herramientas que Claude puede usar con Stitch.

01 introducción

Qué es Stitch

Stitch es una herramienta de Google que genera diseños de interfaz completos a partir de texto. Le describes tu app y Stitch crea las pantallas — con colores, tipografía, iconos y estructura. Todo listo para pasar a código HTML.

Es completamente gratis con tu cuenta de Google. El SDK oficial es @google/stitch-sdk — open source y mantenido por Google Labs.

Gratis

Cuenta gratuita con Google. Sin tarjeta de crédito.

Exporta a HTML

HTML/CSS listo para integrar en tu proyecto.

Multi-pantalla

Genera múltiples pantallas. Desktop, móvil y tablet.

02 setup

Crear cuenta y API Key

Paso 1 — Crear cuenta en Stitch

Ve a stitch.withgoogle.com y crea una cuenta gratis con tu cuenta de Google. No necesitas tarjeta de crédito ni aprobación — es instantáneo.

Paso 2 — Generar tu API Key

En tu cuenta de Stitch, ve a la configuración y genera una API Key. Cópiala — la vas a necesitar para configurar el servidor MCP. El SDK usa la variable de entorno STITCH_API_KEY.

Guarda tu API Key

No compartas tu llave con nadie. Es personal y está ligada a tu cuenta de Google. Si la pierdes, puedes generar una nueva en cualquier momento desde Stitch.

03 configuración

Configurar el MCP en Claude

El MCP (Model Context Protocol) es lo que conecta a Claude directamente con Stitch. Una vez configurado, Claude puede crear proyectos, generar pantallas, editar diseños y descargar el código HTML — todo sin salir de la conversación.

La guía oficial de configuración está en stitch.withgoogle.com/docs/mcp/setup — ahí encuentras el JSON exacto para tu cliente (Claude Code, Claude Desktop, Cursor, etc.).

El atajo

La forma más rápida: copia el link de la documentación MCP de Stitch, pega tu API key y dile a Claude que configure el servidor. Claude lee la documentación y hace toda la configuración por ti.

SDK oficial de Google

El paquete oficial es @google/stitch-sdk. Incluye el proxy MCP (StitchProxy) que se comunica con Claude via stdio. La autenticación usa tu API key en la variable STITCH_API_KEY.

Instalar SDK

npm install @google/stitch-sdk

El truco del video

Ve a Stitch, genera tu API key, copia el link de la documentación MCP (stitch.withgoogle.com/docs/mcp/setup) y pégale todo a Claude diciendo que configure el servidor MCP de Stitch. Literalmente, Claude se encarga de todo. En menos de 30 segundos ya tienes todo listo.

04 diseña

Tu primer diseño con Claude + Stitch

Ya tienes todo configurado. Ahora viene lo bueno — descríbele tu app a Claude. Dile qué quieres construir, envía capturas de diseños que te gusten como referencia, y Claude va a diseñar todo: colores, tipografía, estructura, para web y para móvil.

Todo queda listo para pasar a código. Y si algo no te gusta, le dices y él lo ajusta ahí mismo. Con un prompt. Uno.

Qué incluir en tu prompt

  • Descripción de tu app (qué hace, para quién)
  • Estilo visual que te gusta (minimalista, moderno, etc.)
  • Capturas de referencia de diseños que admiras
  • Pantallas que necesitas (home, login, dashboard, etc.)
  • Tipo de dispositivo (desktop, mobile, tablet)

Qué genera Claude

  • Paleta de colores completa
  • Tipografía y jerarquía visual
  • Estructura y layout de cada pantalla
  • Versiones web, móvil y tablet
  • Código HTML listo para implementar

05 herramientas

Qué puede hacer el MCP

El MCP de Stitch le da a Claude acceso a 8 herramientas. Estas son las más importantes:

create_project

Crea un nuevo proyecto en Stitch. Un proyecto es el contenedor para tus diseños de UI.

generate_screen_from_text

Genera una pantalla nueva a partir de un prompt de texto. Soporta mobile, desktop y tablet.

edit_screens

Edita pantallas existentes con un prompt. Pide cambios y Stitch los aplica al diseño.

get_screen

Obtiene los detalles de una pantalla — incluyendo su HTML y la captura del diseño.

generate_variants

Genera variantes de diseño — cambia colores, layout, tipografía o contenido con control creativo.

list_projects / list_screens

Lista tus proyectos y las pantallas dentro de cada uno para navegación y referencia.

Flujo completo

Claude usa create_project para iniciar, generate_screen_from_text para diseñar cada pantalla, edit_screens para ajustes, y get_screen para obtener el HTML final. Todo sin que tú copies ni pegues nada.

06 bonus

Skills oficiales de Stitch

Google también publicó skills oficiales para Claude Code que extienden lo que puedes hacer con Stitch. Están en el repo google-labs-code/stitch-skills.

Ver skills disponibles

npx skills add google-labs-code/stitch-skills --list
stitch-design

Diseño completo con prompt enhancement y sistema de diseño automático.

stitch-loop

Genera un sitio multi-página completo desde un solo prompt.

react:components

Convierte pantallas de Stitch a componentes React con tokens de diseño.

enhance-prompt

Transforma ideas vagas en prompts optimizados para mejores diseños.

Instalar un skill (ejemplo)

npx skills add google-labs-code/stitch-skills --skill stitch-design --global

07 resumen

De diseño a código en minutos

Stitch + Claude = tu diseñador personal gratuito

Crea tu cuenta en Stitch, genera tu API key, configura el MCP y empieza a diseñar. Si algo no te gusta, le dices a Claude y lo ajusta ahí mismo. Lo que antes costaba miles, ahora es un prompt.