Stitch Design Skills: de una frase a una pantalla y a un componente
Google Stitch dibuja interfaces, pero conectarlo a mano con el código del proyecto lleva tiempo. Estas skills trabajan con el servidor MCP de Stitch y se reparten en tres plugins: stitch-design para pantallas, stitch-build para código y stitch-utilities para prompts y sistemas de diseño. El agente genera pantallas, sube un frontend existente a Stitch y convierte diseños en componentes.
Claude Code, Codex, Cursor, Gemini CLI, Antigravity, OpenCode
Qué hace
generate-design crea pantallas a partir de texto o imagen, edita las existentes y genera variantes como modo oscuro o mayor densidad.
code-to-design y extract-static-html llevan un frontend en React o Vue a un proyecto de Stitch mediante HTML estático autocontenido.
extract-design-md y design-md vuelcan el sistema de diseño en DESIGN.md; manage-design-system lo sube y lo aplica a las pantallas.
react-components, react-native y react-vite-dashboard convierten pantallas de Stitch en componentes con tokens coherentes y validación.
enhance-prompt concreta una idea vaga de interfaz y stitch-loop construye un sitio de varias páginas a partir de una sola petición.
Cuándo usarla
Tienes una app funcionando sin diseños y quieres llevar sus pantallas a Stitch para que un diseñador las mejore.
El diseño ya está terminado en Stitch y quieres componentes React sin rehacer el maquetado a mano.
Debes enseñar a un cliente varias versiones de la pantalla principal en estilos distintos en poco tiempo.
Pídale al agente
Crea en Stitch una pantalla de inicio de sesión para una app de reparto y tres variantes en modo oscuro
Analiza /src y extrae nuestro sistema de diseño a .stitch/DESIGN.md
Convierte todas las pantallas del proyecto de Stitch projects/123 en componentes React
Preguntas
¿Cómo se instala Stitch Design Skills en Claude Code?
Con npx plugins add google-labs-code/stitch-skills --scope project --target claude-code, que instala los plugins en el proyecto actual. Las skills sueltas se instalan con npx skills add.
¿Funcionan en Codex y en OpenCode?
En Codex se registra el repositorio como marketplace y se instalan stitch-design, stitch-build y stitch-utilities. En OpenCode se copian las carpetas a mano y se añade el MCP de Stitch en opencode.json.
¿Es un producto oficial de Google?
No. El README aclara que no es un producto con soporte oficial de Google y que no entra en su programa de recompensas por vulnerabilidades.
