stitch::manage-design-systempor Google Labs

Stitch Manage Design System Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: crea, actualiza y aplica sistemas de diseño en Stitch mediante herramientas MCP.

Marca y sistemas de diseño
Sistema de diseño

Descargar OpenDesign Ver guía de uso

google-labs-code/stitch-skills · plugins/stitch-design/skills/manage-design-system/SKILL.mdSKILL.md

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

Metadatos y encabezados de sección leídos del archivo original el 14 de septiembre de 2026 · 5630 caracteres en total

01 Qué hace

Qué Hace el Skill stitch::manage-design-system en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Gestiona el design system que actúa como fuente de verdad del proyecto en Stitch, usando herramientas MCP. Recupera metadatos del proyecto y assets de pantalla (list_projects, list_screens, get_screen, read_url_content), sintetiza tokens ya sea a partir de pantallas existentes mediante el skill design-md o de una descripción simple, escribe .stitch/DESIGN.md, y luego sube el markdown y llama a create_design_system_from_design_md.

Un punto de control estricto exige la aprobación del usuario sobre el nombre visible, los colores, las fuentes y la redondez antes de subir nada. Después de la creación, apply_design_system aplica los tokens a las pantallas existentes usando únicamente los ids de instancia de pantalla, y .stitch/metadata.json registra el proyecto, las pantallas y un resumen del design system.

Qué produce

Un archivo de diseño DESIGN.md generado para el proyecto.
Un archivo .stitch/metadata.json que registra el id del proyecto, el título, todas las pantallas conocidas y un resumen del design system.
Tokens de diseño a nivel de proyecto guardados dentro de Stitch, que los prompts de generación posteriores no necesitan repetir.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Recuperar el Proyecto y los Assets de Pantalla
list_projects encuentra el projectId objetivo, list_screens muestra pantallas representativas como Home o Main Dashboard, y get_screen devuelve las URLs de descarga de la captura de pantalla y del htmlCode antes de obtener el HTML.
02
Sintetizar el Design System
Las pantallas existentes se interpretan con el skill design-md; un proyecto completamente nuevo o una descripción directa se gestiona primero mapeando las palabras imprecisas del usuario a valores precisos.
03
Subir DESIGN.md y Crear el Design System
El script de carga recomendado codifica el markdown en base64 en el mismo proceso y lo envía al endpoint batchCreate del proyecto, evitando los límites de tokens de salida; create_design_system_from_design_md se ejecuta luego con el projectId y la instancia de pantalla devuelta.
04
Aplicar el Sistema a las Pantallas Existentes
apply_design_system toma el projectId, el assetId y una lista de instancias de pantalla para que las pantallas ya construidas adopten los tokens almacenados.

02 Encuentra tu caso de uso

Cuándo usar el skill stitch::manage-design-system

Usa el skill stitch::manage-design-system en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. El ajuste y los límites que siguen están tomados del archivo propio del skill.

Buen caso de uso

Un proyecto que necesita un único lenguaje de diseño autoritativo que mantenga cohesionadas las futuras pantallas.
Un nuevo proyecto de Stitch sin pantallas todavía, donde el usuario solo aporta una descripción de estilo por escrito.
Deducir un design system a partir de pantallas que ya existen en el proyecto, mediante ingeniería inversa.

Conozca los límites

Cualquier DESIGN.md de más de unos 5KB no puede pasar por la herramienta de carga directa de MCP y necesita en su lugar la vía del script.
La guía sobre cómo describir elementos de diseño no está en este archivo; se delega a otro skill.
El esquema completo del objeto designSystem no se detalla aquí; vive en un archivo de referencia independiente.

Qué proporcionar

El id del proyecto de StitchIdentifica a qué proyecto pertenece el design system, y es necesario tanto para el script de carga como para cada llamada MCP posterior.
Pantallas representativasPantallas como Home o Main Dashboard actúan como fuente visual cuando se extraen tokens de un proyecto existente.
Una descripción de estilo en lenguaje sencilloSe usa cuando no existen pantallas, por ejemplo una frase breve que nombra la paleta, la redondez y la tipografía.
Argumentos del script para la cargaEl script de carga necesita el id del proyecto, la ruta del archivo, la API key y un valor generated-by pasado en la línea de comandos.

03 Dentro del skill

Reglas que el skill stitch::manage-design-system Otorga a Claude Code y Codex

6 instrucciones concretas, valores predeterminados y límites que SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Detenerse para Obtener la Aprobación del Usuario Antes de la Carga
El skill debe pausarse y preguntar antes de subir cualquier cosa a Stitch, presentando el nombre visible, los colores clave, las tipografías y la redondez, y esperar una aprobación explícita.
Enviar Solo Id y sourceScreen Al Aplicar
selectedScreenInstances no lleva ningún dato de posición o dimensión, solo los dos campos identificadores.
Excluir las Instancias design-system de la Lista de Destinos
Las instancias de tipo DESIGN_SYSTEM_INSTANCE se filtran; solo las pantallas reales se pasan a apply_design_system.
Etiquetar Quién Generó el Markdown
El argumento generated-by nombra el skill o la herramienta que produjo el DESIGN.md; omitirlo hace que se use una etiqueta predeterminada fija.
Crear el Sistema Justo Después de la Carga
create_design_system_from_design_md se llama inmediatamente después del paso de carga, con el projectId y el selectedScreenInstance.
Leer el Id del Asset a Partir del Nombre del Design System
list_design_systems devuelve un nombre con la forma assets/{assetId}; la parte después de assets/ es el assetId usado al aplicar.

04 Ponlo a trabajar

Instale stitch::manage-design-system en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregue stitch::manage-design-system a Claude Code, Codex o su agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system

Forma genérica de la CLI de skills para plugins/stitch-design/skills/manage-design-system/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Confirme que la carga realmente devolvió ambos identificadores antes de continuar.
Verifique que tanto el script de carga como la llamada de creación hayan finalizado, ya que solo entonces los tokens quedan almacenados a nivel de proyecto.
Obtenga los ids de instancia de pantalla desde get_project en lugar de adivinarlos, para que apply_design_system tenga destinos válidos.
Compare el DESIGN.md generado con la estructura definida en otro lugar antes de subirlo.

En OpenDesign importa stitch::manage-design-system desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónalo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Rama main
Archivo de skill: plugins/stitch-design/skills/manage-design-system/SKILL.md Suma de verificación del contenido registrada en la verificación; commit 0337446
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 8.304 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio google-labs-code/stitch-skills, que contiene 12 skills en este catálogo. No es una calificación ni un recuento de uso para stitch::manage-design-system.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

📥 RecuperaciónCuatro pasos ordenados para extraer activos de proyecto, pantalla y HTML mediante las herramientas Stitch MCP.
🧠 Síntesis a partir de la descripciónCuándo reutilizar el skill design-md y cómo convertir una redacción vaga en valores concretos.
📝 Estructura de salidaIndica que DESIGN.md sigue la estructura definida en el skill design-md.
🚀 Crear o actualizar el sistema de diseño en StitchFlujo de subida y creación en dos pasos, precedido de un punto de confirmación obligatorio del usuario.
🎨 Aplicar el sistema de diseño a las pantallasForma exacta del JSON, más los tres pasos para reunir los ids necesarios.
📋 Actualizar los metadatos del proyectoEscribe .stitch/metadata.json con el id del proyecto, el título, las pantallas y el resumen del sistema.
Referencia del esquemaRemite a reference/tool-schema.md para el esquema completo del objeto designSystem.
💡 Buenas prácticasDelega el consejo sobre la descripción de elementos de diseño al skill design-md.

La descripción propia del Skill

— Administre sistemas de diseño en Stitch usando herramientas MCP. Incluye recuperación de recursos, creación/actualización de sistemas de diseño en Stitch y aplicación de estos a pantallas.

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 5.630 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill stitch::manage-design-system

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Se sube algo a Stitch sin que yo lo acepte?

No. Existe un punto de control explícito: el skill debe presentar un resumen del sistema de diseño que va a crear, con el nombre visible, los colores principales, las fuentes y el radio de esquinas, y esperar la aprobación antes de subirlo.

¿Qué ocurre si mi DESIGN.md ocupa más de unos pocos KB?

Utiliza el script de carga recomendado en lugar de la herramienta MCP directa. Codifica el markdown en base64 dentro del proceso y lo envía al endpoint batchCreate, lo que evita los límites de tokens de salida.

¿De dónde vienen los ids para aplicar un sistema de diseño?

get_project devuelve las screenInstances con su id y sourceScreen, filtradas de nuevo para incluir solo pantallas reales.

¿Puede funcionar en un proyecto totalmente nuevo, sin pantallas?

Sí. Cuando no hay pantallas o el usuario da una descripción directa, el skill traduce los términos vagos a valores precisos, elige códigos hex, familias de fuentes y radio de esquinas concretos, y luego genera DESIGN.md.

Stitch Manage Design System

Ejecuta stitch::manage-design-system en una tarea real de trabajo de marca y sistema de diseño.

Descarga OpenDesign, importa stitch::manage-design-system desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills