stitch::extract-design-mdpor Google Labs

Stitch Extract Design MD Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: extrae un DESIGN.md completo desde código fuente frontend en cualquier framework.

Marca y sistemas de diseño
DESIGN.md

Descargar OpenDesign Ver guía de uso

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

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

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

01 Qué hace

Qué Hace el Skill stitch::extract-design-md 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

Este skill lee una base de código frontend y escribe un DESIGN.md que captura su lenguaje visual, sin compilar ni renderizar la app. Detecta el framework a partir de package.json y archivos de configuración (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, CSS puro), y luego recorre la atmósfera, la paleta de colores y sus roles, la tipografía, los estilos de componentes, los principios de layout y notas para la generación en Stitch.

El resultado se guarda en .stitch/DESIGN.md y debe abrir con un bloque de frontmatter YAML que incluya name y un mapeo colors, porque otros skills lo analizan. Está pensado para diseñadores y desarrolladores que hacen ingeniería inversa, auditan o migran el sistema de diseño de un proyecto existente.

Qué produce

Un documento DESIGN.md ensamblado en el formato estándar de sistema de diseño.
Un bloque de frontmatter YAML con name y un mapeo colors al inicio de ese archivo, seguido de las secciones en markdown.
Una sección final de notas del sistema de diseño para la generación en Stitch, que abarca el lenguaje, las referencias de color y los prompts de componentes.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Detectar el Framework y el Stack
Explora la raíz del proyecto en busca de archivos delatores como package.json, tailwind.config.js, postcss.config.js, theme.js o tokens.js, y luego lee package.json para conocer el framework, las herramientas de CSS y cualquier librería de design tokens.
02
Leer la Referencia del Framework Correspondiente
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular y CSS puro tienen cada uno un archivo de referencia con patrones específicos del framework para localizar colores, tipografía y espaciado.
03
Extraer la Paleta de Colores y Asignar Roles
Los colores provienen de propiedades personalizadas de CSS, la configuración de Tailwind, archivos de tema, estilos de componentes, clases con ámbito acotado y objetos CSS-in-JS, y luego se agrupan por función en lugar de por tonalidad.
04
Analizar Componentes y Layout
El skill examina botones, tarjetas, navegación, campos de entrada y componentes específicos del dominio, además de la cuadrícula, el espacio en blanco, la alineación y el comportamiento responsivo.
05
Escribir el DESIGN.md
Todo se ensambla en el formato estándar de DESIGN.md y se escribe en un directorio .stitch, que se crea si no existe.
06
Opcionalmente, Entregar a Stitch
Si el usuario quiere que el sistema de diseño se envíe a Stitch, el DESIGN.md redactado se convierte en la entrada del skill manage-design-system.

02 Encuentra tu caso de uso

Cuándo usar el skill stitch::extract-design-md

Usa el skill stitch::extract-design-md 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

Tiene una base de código frontend y quiere que su sistema de diseño se extraiga o documente a partir del código fuente.
La aplicación no se puede compilar ni renderizar, pero los archivos fuente están disponibles.
Quiere migrar la identidad visual existente de un proyecto a Stitch.
El estilo en una base de código es inconsistente y necesita unificarse o reconciliarse.

Conozca los límites

No es la ruta de HTML renderizado; eso es lo que hace el skill design-md independiente a partir de HTML renderizado.
No puede ejecutarse sin acceso al directorio fuente del proyecto frontend.

Qué proporcionar

Archivos de tema o de tokens, si existenSeñalar archivos theme. o tokens. proporciona la fuente más autorizada de valores de diseño.
Nombre del proyecto, e ID si se conoceEl título del documento usa el nombre del proyecto; el ID del proyecto se incluye cuando está disponible y se omite en caso contrario.
Una decisión sobre enviar a StitchSi el usuario quiere que el sistema de diseño se envíe a Stitch, el workflow continúa más allá de la Fase 3 hacia la transferencia de integración.

03 Dentro del skill

Reglas que el skill stitch::extract-design-md le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

El YAML Frontmatter es obligatorio
El archivo debe abrir con un bloque YAML que contenga name y un mapeo colors, coincidiendo con examples/DESIGN.md.
Nombrar los colores por carácter, no por matiz
Cada color recibe un nombre descriptivo que evoca su apariencia, de modo que #294056 se convierte en "Deep Muted Teal-Navy" en lugar de "Blue".
Consolidar colores casi duplicados
Los casi duplicados como #333 y #2C2C2C se fusionan bajo el único nombre que mejor representa el color previsto.
Partir de la configuración de Tailwind
Un tailwind.config.js personalizado se trata como el propio sistema de diseño, extrayéndose primero de él, con los componentes revisados de forma puntual después en busca de anulaciones.
Los archivos de tema priman sobre los estilos de componentes
Un archivo de tema que define una paleta revela el sistema de diseño previsto, mientras que los estilos en línea dispersos solo muestran lo que realmente se implementó.
Tratar las propiedades personalizadas de CSS como intención
Una variable como --brand-primary es un token de diseño deliberado, no un valor incidental, y debe respetarse como tal.
Escribir las notas de Stitch en lenguaje natural
Las notas de generación describen los componentes en prosa en lugar de pegar sintaxis CSS o propiedades sin procesar.
Mantener la Atmósfera Editorial
La sección de atmósfera está escrita como texto editorial sobre el ambiente y la filosofía, no como documentación técnica.

04 Ponlo a trabajar

Instalar stitch::extract-design-md 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.

Agregar stitch::extract-design-md 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::extract-design-md

Formato genérico de la CLI de skills para plugins/stitch-design/skills/extract-design-md/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

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

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:

Cada color tiene un nombre descriptivo, un código hexadecimal y un rol funcional.
La tipografía abarca la familia de fuentes, una descripción de los caracteres y la jerarquía completa.
Los estilos de los componentes indican forma, color, estados y transiciones.
El diseño indica el ancho máximo, la cuadrícula, los breakpoints y la estrategia de espaciado.
El documento captura la intención detrás del estilo y no solo los valores brutos.

En OpenDesign importe stitch::extract-design-md desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo 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/extract-design-md/SKILL.md Suma de verificación de 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 14-09-2026 para todo el repositorio google-labs-code/stitch-skills, que contiene 12 skills en este catálogo. No es una valoración ni un recuento de uso de stitch::extract-design-md.
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

Por Qué Existe EstoLeer el código fuente es más rápido que el HTML renderizado y funciona incluso cuando la compilación está rota.
Cuándo UsarloActivadores: extraer, documentar, auditar, migrar un sistema de diseño, unificar estilos inconsistentes.
Requisitos PreviosSolo se necesita acceso al directorio de origen; no se requieren dependencias de compilación ni de entorno de ejecución.
Flujo de TrabajoCuatro fases: descubrimiento del proyecto, extracción profunda, redacción de DESIGN.md, integración opcional con Stitch.
Lista de Verificación de CalidadElementos de verificación para colores, tipografía, componentes, diseño, lenguaje, deduplicación e intención.
Consejos para una Mejor ExtracciónRastree los comentarios del código, prefiera las bibliotecas de tokens y los archivos de tema, trate la configuración de Tailwind como el sistema.

La descripción propia del Skill

— Extrae un sistema de diseño completo (DESIGN.md) directamente desde código fuente frontend: React, Vue, Svelte, Angular, HTML/CSS simple o cualquier framework web. Analiza archivos de componentes, hojas de estilo, configuraciones de Tailwind, definiciones de tema y tokens de diseño para producir un documento de sistema de diseño rico y compatible con Stitch. Use esta skill cuando el usuario quiera hacer ingeniería inversa de un sistema de diseño desde un código base existente, auditar el lenguaje visual de un proyecto, extraer tokens de diseño desde archivos fuente o entender los patrones de estilización en un repositorio frontend, incluso si solo dice "¿cómo luce esta aplicación?" o "extrae el diseño de este código".

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 13.970 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill stitch::extract-design-md

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

¿Necesito instalar dependencias o lograr que la aplicación compile primero?

No. El skill solo lee archivos fuente y no necesita dependencias de compilación ni de entorno de ejecución, por lo que funciona incluso cuando faltan dependencias o la compilación está rota.

¿Con qué frameworks y configuraciones de estilos puede trabajar?

React, Vue, Svelte, Angular, HTML/CSS puro y cualquier framework web, incluidas las configuraciones de Tailwind, CSS-in-JS y los archivos de tema o de tokens. Los patrones de extracción específicos de cada framework se encuentran en archivos de referencia que consulta para React/Tailwind, Vue, Svelte, Angular y CSS puro.

¿Por qué el DESIGN.md necesita frontmatter en YAML?

El bloque contiene el nombre y el mapeo de colores como datos estructurados que otros skills analizan. Omitirlo, o dejar fuera los tokens de color principales, supone un uso incorrecto del skill.

¿Puede enviar el sistema de diseño terminado a Stitch?

Ese paso es opcional y lo gestiona otro skill: la Fase 4 se traspasa a manage-design-system, que realiza las llamadas de creación/actualización del MCP usando el DESIGN.md como entrada. Si solo desea el documento, el trabajo termina después de la Fase 3.

Stitch Extract Design MD

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

Descargue OpenDesign, importe stitch::extract-design-md desde su enlace SKILL.md, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesign Ver todas las skills