# stitch-skills - 15 Claude Skills de google-labs-code > Skills de google-labs-code para Stitch MCP: generar diseños, convertirlos a React/React Native y gestionar DESIGN.md. Fuente: https://skillsagentes.com/skills/google-labs-code/stitch-skills Markdown: https://skillsagentes.com/skills/google-labs-code/stitch-skills.md Colección de skills para agentes que trabajan con Google Stitch a través del servidor Stitch MCP, cubriendo diseño, generación de código y utilidades de sistema de diseño. ## Instalar el pack entero ```bash npx -y skills add google-labs-code/stitch-skills --agent claude-code ``` Instala los 15 skills en el proyecto actual. Añade `-g` para toda la máquina, y cambia `--agent` por `cursor`, `codex`, `gemini`, `windsurf` o `cline`. ## Qué cubre Este repositorio agrupa quince skills organizadas en tres plugins que dependen del servidor Stitch MCP. El plugin de diseño incluye generate-design para crear y editar pantallas, code-to-design y extract-static-html para partir de código frontend existente, manage-design-system y extract-design-md para trabajar con archivos DESIGN.md, y upload-to-stitch para subir assets. El plugin de build cubre la conversión de pantallas de Stitch a react-components, react-native y react-vite-dashboard, además de remotion para generar videos de walkthrough y shadcn-ui como guía de integración de componentes. El plugin de utilidades aporta enhance-prompt, stitch-loop, design-md y taste-design para refinar prompts y generar sistemas de diseño en DESIGN.md. Quien trabaje en un flujo completo con Stitch —desde generar una pantalla hasta convertirla en componentes React o React Native y documentar el sistema de diseño resultante— encontraría sentido en instalar los tres plugins juntos, dado que el README advierte de dependencias entre skills. Equipos centrados solo en una parte del flujo, como extraer DESIGN.md desde código existente o generar videos de presentación, pueden instalar plugins o skills sueltas. Todas las skills requieren tener configurado el servidor Stitch MCP; no funcionan como herramientas de diseño independientes sin esa integración. ## Datos del repositorio - Publicado por: [google-labs-code](https://skillsagentes.com/creators/google-labs-code.md) - Skills indexados: 15 - Categorías: Diseño y UI, Herramientas para desarrolladores, Desarrollo de APIs - Estrellas: 8236 - Licencia: Apache-2.0 - Último push: 2026-08-17 - [Código fuente](https://github.com/google-labs-code/stitch-skills) ## Los 15 skills - [Remotion](https://skillsagentes.com/skills/google-labs-code/stitch-skills/remotion.md): Genera videos de walkthrough a partir de proyectos Stitch usando Remotion, con transiciones suaves, zoom y overlays de texto. - [Design Md](https://skillsagentes.com/skills/google-labs-code/stitch-skills/design-md.md): Analiza proyectos de Stitch y sintetiza un sistema de diseño semántico en archivos DESIGN.md. - [Stitch::code To Design](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-code-to-design.md): Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y subida de archivos. - [Stitch::extract Design Md](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-extract-design-md.md): Extrae un sistema de diseño completo (DESIGN.md) directamente del código fuente frontend —React, Vue, Svelte, Angular, HTML/CSS— analizando componentes, hojas de estilo, configs de Tailwind y tokens de diseño. - [Stitch::extract Static Html](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-extract-static-html.md): Extrae HTML estático autocontenido de una app web o componentes React, inlineando CSS e imágenes, para capturar una vista o subirla a Stitch. - [Stitch Loop](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-loop.md): Enseña a los agentes a construir sitios web de forma iterativa con Stitch mediante un patrón de loop autónomo de paso de baton. - [Stitch::manage Design System](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-manage-design-system.md): Gestiona design systems en Stitch usando herramientas MCP: recupera assets, crea/actualiza design systems y los aplica a pantallas. - [Stitch::react Components](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-components.md): Convierte diseños de Stitch en componentes modulares de Vite y React, o sincroniza/actualiza componentes React existentes con los últimos diseños de Stitch, usando red a nivel de sistema y validación basada en AST. - [Shadcn Ui](https://skillsagentes.com/skills/google-labs-code/stitch-skills/shadcn-ui.md): Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas. - [Taste Design](https://skillsagentes.com/skills/google-labs-code/stitch-skills/taste-design.md): Skill de sistema de diseño semántico para Google Stitch que genera archivos DESIGN.md con estándares premium anti-genéricos: tipografía estricta, color calibrado, layouts asimétricos y micro-movimiento perpetuo. - [React Vite Dashboard](https://skillsagentes.com/skills/google-labs-code/stitch-skills/react-vite-dashboard.md): Convierte diseños de Stitch en dashboards React + Vite en producción con TanStack Query, tokens accesibles desde DESIGN.md y patrones listos para Web3 (ethers/viem). - [Enhance Prompt](https://skillsagentes.com/skills/google-labs-code/stitch-skills/enhance-prompt.md): Convierte ideas vagas de UI en prompts pulidos y optimizados para Stitch: añade especificidad, palabras clave de UI/UX, contexto de sistema de diseño y estructura la salida. - [Stitch::react Native](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-react-native.md): Convierte diseños HTML de Stitch en componentes React Native, o sincroniza/actualiza componentes nativos existentes según los últimos diseños de Stitch, usando StyleSheet. - [Stitch::generate Design](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-generate-design.md): Genera pantallas nuevas desde texto o imágenes, edita pantallas existentes con prompts y tokens de diseño, y crea variantes usando Stitch MCP. - [Stitch::upload To Stitch](https://skillsagentes.com/skills/google-labs-code/stitch-skills/stitch-upload-to-stitch.md): Sube assets locales (imágenes, mockups, HTML extraído, markdown de diseño) a un proyecto de Stitch, útil cuando las llamadas MCP fallan o se truncan por límites de tokens en base64. ## Preguntas frecuentes - **¿Qué incluye stitch-skills?** 15 skills indexados en este directorio, repartidos entre 3 categorías, sobre todo Diseño y UI, Herramientas para desarrolladores, Desarrollo de APIs. Cada uno es un SKILL.md con sus propios archivos, y en la lista de esta página tienes los 15 con enlace a su ficha. - **¿Cómo instalo todo el pack stitch-skills de una vez?** Con un solo comando: npx -y skills add google-labs-code/stitch-skills --agent claude-code. Instala los 15 skills del repositorio en el proyecto actual. Añade -g al final para dejarlos disponibles en toda la máquina, y cambia --agent si usas Cursor, Codex, Gemini CLI, Windsurf o Cline. - **¿Puedo instalar solo uno de los skills?** Sí. Cada ficha de skill trae su propio comando con el selector --skill, así que puedes coger uno suelto sin traerte los 15. Es lo recomendable si solo necesitas una tarea concreta: cada skill instalado ocupa contexto en tu agente. - **¿Qué licencia tiene stitch-skills?** El repositorio declara licencia Apache-2.0. Los archivos son del autor; este directorio solo los indexa y enlaza al origen. - **¿Quién mantiene stitch-skills?** google-labs-code, en GitHub. El último push al repositorio se registró el 17 de agosto de 2026. --- [Todos los packs](https://skillsagentes.com/skills/packs.md) · [Todas las skills](https://skillsagentes.com/skills.md) Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)