Repolode
Enviar
google-labs-code

google-labs-code/stitch-skills

Colección de Agent Skills y plugins que permiten a los agentes de programación trabajar con proyectos de diseño de Google Stitch mediante el servidor MCP de Stitch.

Alternativa open source a:Figma

Ver en GitHubSitio web
Estrellas
8,546
Forks
1,115
Issues abiertos
17
Último commit
hace 2 meses

¿Qué es?

Stitch Skills es un conjunto de habilidades para agentes de Google Stitch, una herramienta de diseño. Cada habilidad es una carpeta de instrucciones que un agente de programación como Claude Code, Cursor, Codex o Gemini CLI puede cargar para realizar un flujo de trabajo específico de Stitch. Las habilidades requieren que el servidor MCP de Stitch esté configurado en el entorno del agente.

Las habilidades se agrupan en tres plugins: stitch-design permite generar y editar pantallas, administrar sistemas de diseño, extraer archivos DESIGN.md del código fuente y subir recursos; stitch-build permite convertir pantallas de Stitch en código de dashboards con React, React Native o React + Vite, además de ofrecer orientación sobre shadcn/ui y videos tutoriales con Remotion; stitch-utilities permite mejorar prompts, generar archivos DESIGN.md y crear sitios web de varias páginas.

Las habilidades se pueden instalar desde el marketplace de Codex, con los comandos npx plugins o skills, o copiarlas manualmente para OpenCode. Algunas habilidades dependen de otras, así que las instalaciones selectivas deben incluir también sus dependencias.

Funciones clave

  • 01Genera pantallas nuevas de Stitch a partir de texto o imágenes y edita las existentes.
  • 02Extrae archivos de sistemas de diseño DESIGN.md del código fuente del frontend.
  • 03Convierte pantallas de Stitch en código de dashboards con React, React Native o React + Vite.
  • 04Sube HTML, imágenes y mockups locales a proyectos de Stitch.
  • 05Se instala en Claude Code, Cursor, Codex, Gemini CLI y otros agentes compatibles con Agent Skills.

Casos de uso

  • Convertir un código base de frontend existente en un diseño de Stitch para revisarlo e iterarlo.
  • Generar componentes React a partir de pantallas de Stitch y mantener la coherencia de los tokens de diseño.
  • Crear un archivo DESIGN.md que documente el sistema visual de un proyecto para que otros agentes lo sigan.
  • Crear un video tutorial de un proyecto de Stitch.

Inicio rápido

  1. 1

    Añade el marketplace de Stitch Skills a Codex mediante la CLI

    codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities
  2. 2

    O instala solo las skills que necesites con npx

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

Antes de usarlo

  • Para que las skills funcionen, primero necesitas configurar el servidor MCP de Stitch y las credenciales.
  • No es un producto con soporte oficial de Google.

Temas

#ai-agents#design-to-code#mcp#react#design-system#coding-agents#ui-generation

Preguntas frecuentes

¿Qué es stitch-skills?
Colección de Agent Skills y plugins que permiten a los agentes de programación trabajar con proyectos de diseño de Google Stitch mediante el servidor MCP de Stitch. Stitch Skills es un conjunto de habilidades para agentes de Google Stitch, una herramienta de diseño. Cada habilidad es una carpeta de instrucciones que un agente de programación como Claude Code, Cursor, Codex o Gemini CLI puede cargar para realizar un flujo de trabajo específico de Stitch. Las habilidades requieren que el servidor MCP de Stitch esté configurado en el entorno del agente.
¿stitch-skills es gratuito? ¿Qué licencia tiene?
stitch-skills es open source bajo la licencia Apache-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿stitch-skills sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de stitch-skills fue el 17 ago 2026.
¿Para qué puedo usar stitch-skills?
Convertir un código base de frontend existente en un diseño de Stitch para revisarlo e iterarlo. Generar componentes React a partir de pantallas de Stitch y mantener la coherencia de los tokens de diseño. Crear un archivo DESIGN.md que documente el sistema visual de un proyecto para que otros agentes lo sigan. Crear un video tutorial de un proyecto de Stitch.
¿Cómo se instala stitch-skills?
Añade el marketplace de Stitch Skills a Codex mediante la CLI: codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities O instala solo las skills que necesites con npx: npx skills add google-labs-code/stitch-skills
¿Dónde consigo stitch-skills?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/google-labs-code/stitch-skills

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados