Pack de 15 skills
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.
indexados aquí
cubiertas
en GitHub
al repositorio
v1.0
Funciona con cualquier agente que lea SKILL.md
npx -y skills add google-labs-code/stitch-skills --agent claude-codeInstala todos los skills del repositorio, solo en este proyecto.
Instala los 15 skills del repositorio de una vez. Cada ficha individual trae su propio comando si solo quieres uno — cada skill instalado ocupa contexto en el agente.
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.
Los 15 más populares del pack, sobre Diseño y UI, Herramientas para desarrolladores, Desarrollo de APIs.
Genera videos de walkthrough a partir de proyectos Stitch usando Remotion, con transiciones suaves, zoom y overlays de texto.
Analiza proyectos de Stitch y sintetiza un sistema de diseño semántico en archivos DESIGN.md.
Fotos profesionales con IA en minutos.
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.
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.
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.
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.
Gestiona design systems en Stitch usando herramientas MCP: recupera assets, crea/actualiza design systems y los aplica a pantallas.
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.
Guía experta para integrar y construir aplicaciones con componentes de shadcn/ui: descubrimiento, instalación, personalización y buenas prácticas.
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.
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).
Convierte cualquier web en datos limpios listos para LLMs.
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.
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.
Genera pantallas nuevas desde texto o imágenes, edita pantallas existentes con prompts y tokens de diseño, y crea variantes usando Stitch MCP.
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.
