Rediseñar cada pantalla desde cero es una forma bastante elegante de perder tiempo y coherencia. Stitch Design Skills convierte las reglas visuales de una web existente en un DESIGN.md reutilizable, y el README exige configurar Stitch MCP y el acceso correspondiente para utilizar el paquete.
TL;DR: El resumen sin rodeos
- Qué hace: extrae colores, tipografía, componentes y otras reglas visuales para reutilizarlas como sistema de diseño.
- Hay más que un MCP: el repositorio contiene skills reales con archivos SKILL.md, recursos, ejemplos y scripts.
- Requisito decisivo: muchas operaciones necesitan Stitch MCP, credenciales y acceso al servicio de Stitch.
- Coste: el código usa licencia Apache-2.0, pero no se ha verificado una tarifa única para los servicios externos.
En este artículo
| Qué es | Un conjunto de skills para recuperar las reglas visuales de un proyecto y llevar diseños de Stitch a código y componentes. |
|---|---|
| Web oficial | https://stitch.withgoogle.com/docs/mcp/setup |
| Repositorio | repo |
| Licencia | Apache-2.0 |
| Precio | El repositorio publica su código bajo Apache-2.0. El agente y los servicios externos tienen condiciones independientes; no se ha verificado una tarifa única. |
| Estrellas en GitHub | 8.347 |
| Año de lanzamiento | 2026 |
| Quién lo mantiene | google-labs-code (organización) |
Revisado el 2026-09-27
Esta herramienta forma parte de estos recopilatorios: Skills de diseño para Claude Code y Codex · Skills para Claude Code, Codex y otros agentes de código
El problema que resuelve
Stitch Design Skills es un paquete de habilidades para agentes de código que conecta el diseño existente, Stitch y la generación de componentes. Su parte más interesante para una web ya construida es stitch::extract-design-md: analiza el código fuente del frontal y genera un archivo .stitch/DESIGN.md.
En cristiano: en lugar de pedir a la IA que improvise otra vez el azul, la tipografía y el aspecto de los botones, le entregas una referencia estructurada. Menos ruleta creativa. Más continuidad entre pantallas.
El repositorio oficial incluye extract-design-md dentro del paquete actual stitch-design. No tiene sentido tratar design-md, react-components, stitch-loop o Remotion como cuatro productos duplicados: son flujos distintos dentro del mismo repositorio.
La estructura documentada separa los complementos stitch-design, stitch-build y stitch-utilities. Usa las rutas publicadas en el árbol actual del repositorio.
Cómo se pone en marcha
El README oficial documenta instalación para Codex, Antigravity, Gemini CLI, Claude Code, Cursor y OpenCode. La compatibilidad está declarada. Que todos los flujos funcionen igual o puedan prescindir de MCP ya es otra historia.
En Claude Code, la instalación de proyecto indicada es npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. Cursor utiliza el mismo instalador con alcance de espacio de trabajo y objetivo cursor. Codex añade primero el repositorio como mercado de complementos y permite limitar la descarga mediante rutas dispersas.
OpenCode requiere copia manual de las skills y configuración separada del servidor remoto. Además, los nombres con formato stitch::... deben adaptarse a minúsculas con guiones para que OpenCode los cargue. No es enchufar y olvidarse.
El ejemplo documentado es concreto: pedir al agente que examine una carpeta /src y genere .stitch/DESIGN.md. extract-design-md describe un análisis del código fuente para preparar el documento. El paquete documenta Stitch MCP como requisito de configuración. Después toca comprobar si el documento refleja los colores, fuentes y componentes del repositorio. Que una pantalla generada vaya a quedar perfecta es otra película.
Copia esto y pégalo en Claude Code, Cursor o tu asistente de código favorito:
Instala Stitch Design Skills desde https://github.com/google-labs-code/stitch-skills y configura Stitch MCP siguiendo https://stitch.withgoogle.com/docs/mcp/setup. Ejecuta stitch::extract-design-md sobre /src y guarda el resultado en .stitch/DESIGN.md. Comprueba colores, tipografías y componentes detectados; informa de lo que no puedas verificar.
La instalación requiere manejar comandos y rutas. También tendrás que aportar las credenciales y revisar la configuración de Stitch MCP.
Para deshacerlo, elimina del proyecto los complementos o carpetas instalados y retira la entrada MCP que hayas añadido. La documentación aportada no incluye un comando universal de desinstalación, así que conviene comprobar los cambios antes de borrarlos a ciegas.
MCP de Stitch Design Skills
Stitch Design Skills contiene instrucciones SKILL.md reales, además de la integración con MCP. El README exige tener Stitch MCP configurado para el conjunto de habilidades, y los flujos que generan, editan o suben diseños dependen del servidor y del acceso correspondiente.
La integración oficial se conecta como servidor MCP remoto siguiendo la configuración de Stitch MCP. El proceso proporciona el punto de conexión y requiere las credenciales o variables de entorno indicadas allí. El dossier no aporta una ejecución verificada con una cuenta real, así que no voy a vender una demo documental como experiencia propia.
El paquete reúne análisis del código y operaciones sobre diseños de Stitch. La configuración de MCP que exige el README forma parte de la puesta en marcha; generar un DESIGN.md no demuestra por sí solo que los flujos posteriores estén listos.
Usándola en marketing real
El caso razonable para un equipo pequeño aparece cuando una marca ya tiene web y necesita producir nuevas landing pages sin convertir cada encargo en una reinterpretación artística. El agente analiza el frontal, prepara el DESIGN.md y utiliza esas reglas como referencia para las siguientes pantallas.
Imagina una campaña con tres landings, cada una construida en momentos distintos. El valor está en mantener decisiones: la jerarquía tipográfica, el radio de los botones, la paleta o el tratamiento de las tarjetas. Generar más píxeles ya sabemos hacerlo.
El riesgo está en considerar el archivo extraído como verdad absoluta. El código también conserva parches, excepciones y decisiones mediocres. Un DESIGN.md puede convertir el caos en una norma perfectamente documentada. Pum. Ahora tienes incoherencia escalable.
Por eso encaja como complemento de una revisión humana y de recursos centrados en criterio visual, como Taste Skill o Frontend Design de Anthropic. Y, por su compatibilidad con varios agentes, también pertenece a la guía de skills para Claude Code, Codex y otros agentes.
Lo que no te cuentan
El primer límite es la dependencia operativa. El repositorio es abierto bajo licencia Apache-2.0, pero el agente utilizado, Stitch y otros servicios pueden tener condiciones independientes. No se ha verificado una tarifa única en euros que permita llamar al conjunto “gratis” sin matices.
El segundo es el soporte. El propio README declara que no es un producto con soporte oficial de Google ni participa en su programa de recompensas por vulnerabilidades de código abierto. Que el mantenedor sea la organización google-labs-code no convierte el repositorio en un servicio con garantías comerciales.
El repositorio registraba 8.347 estrellas en la revisión del 27 de septiembre de 2026. Son estrellas del repositorio, no usuarios, instalaciones de la skill ni proyectos terminados. Tampoco se aportaron opiniones públicas verificadas para esta review, así que no hay base para fabricar un consenso social con dos capturas y mucha ilusión.
El tercer límite es editorial: no hay una alternativa verificada en la ficha. Taste Skill y Frontend Design pueden complementar el control visual, pero el dossier no permite presentarlas como sustitutos equivalentes del flujo código, DESIGN.md y Stitch.
Veredicto
Stitch Design Skills merece atención porque ataca un problema real: conservar las reglas visuales de una web cuando empiezas a generar nuevas pantallas con agentes. La skill extract-design-md propone analizar los archivos del proyecto para obtener un DESIGN.md.
¿La recomendaría? Sí, para equipos que ya usan agentes de código y quieren dejar de rediseñar su identidad en cada prompt. Antes de adoptarla, configura Stitch MCP según el README y revisa que el DESIGN.md represente bien tu proyecto. La compatibilidad documentada no acredita por sí sola un resultado de producción.
La gracia está en que la IA deje de olvidar tu diseño cada cinco minutos. Diseñar sigue siendo cosa tuya.
