stitch::extract-design-mdpor Google Labs

Stitch Extract Design MD Skill.

Uma skill para Claude Code e Codex focada em trabalho de marca e sistema de design: extrai um DESIGN.md completo de código-fonte frontend em qualquer framework.

Marca e Sistemas de Design
DESIGN.md

Baixar OpenDesign Ver guia 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

Front matter e títulos de seção lidos do arquivo upstream em 14/09/2026 · 13.970 caracteres no total

01 O que faz

O que o Skill stitch::extract-design-md Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esse skill lê uma base de código frontend e escreve um DESIGN.md que captura sua linguagem visual, sem compilar ou renderizar o app. Ele detecta o framework a partir do package.json e de arquivos de configuração (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, CSS puro) e então percorre atmosfera, paleta de cores e funções, tipografia, estilizações de componentes, princípios de layout e notas para a geração no Stitch.

A saída fica em .stitch/DESIGN.md e deve começar com um bloco de frontmatter YAML contendo name e um mapeamento colors, pois outros skills fazem o parsing disso. Voltado para designers e desenvolvedores que fazem engenharia reversa, auditoria ou migração do design system de um projeto existente.

O que ele produz

Um documento DESIGN.md montado no formato padrão de design system.
Um bloco de frontmatter YAML com name e um mapeamento colors no topo desse arquivo, seguido pelas seções em markdown.
Uma seção final de notas de design system para a geração no Stitch, cobrindo linguagem, referências de cores e prompts de componentes.

Veja o exemplo de prompt ↗

Como funciona

01
Detectar o Framework e a Stack
Vasculha a raiz do projeto em busca de arquivos indicativos, como package.json, tailwind.config.js, postcss.config.js, theme.js ou tokens.js, e depois lê o package.json para identificar o framework, as ferramentas de CSS e quaisquer bibliotecas de design tokens.
02
Ler a Referência do Framework Correspondente
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular e CSS puro têm cada um um arquivo de referência com padrões específicos do framework para localizar cores, tipografia e espaçamento.
03
Extrair a Paleta de Cores e Atribuir Funções
As cores vêm de custom properties do CSS, configuração do Tailwind, arquivos de tema, estilos de componentes, classes com escopo e objetos CSS-in-JS, e depois são agrupadas por função em vez de por tonalidade.
04
Analisar Componentes e Layout
O skill examina botões, cards, navegação, campos de entrada e componentes específicos do domínio, além de grid, espaços em branco, alinhamento e comportamento responsivo.
05
Escrever o DESIGN.md
Tudo é reunido no formato padrão do DESIGN.md e escrito em um diretório .stitch, que é criado caso não exista.
06
Opcionalmente Repassar ao Stitch
Se o usuário quiser que o design system seja enviado ao Stitch, o DESIGN.md escrito se torna a entrada para a skill manage-design-system.

02 Encontre o ideal para você

Quando Usar a Skill stitch::extract-design-md

Use a skill stitch::extract-design-md no Claude Code ou Codex quando o trabalho for de marca e sistema de design deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Você tem uma base de código frontend e quer que seu design system seja extraído ou documentado a partir da fonte.
O app não pode ser compilado ou renderizado, mas os arquivos-fonte estão disponíveis.
Você quer migrar a identidade visual existente de um projeto para o Stitch.
O estilo em toda a base de código é inconsistente e precisa ser unificado ou reconciliado.

Conheça os Limites

Não é a rota de HTML renderizado; é isso que a skill design-md separada faz a partir do HTML renderizado.
Ela não pode ser executada sem acesso ao diretório de origem do projeto frontend.

O Que Fornecer

Arquivos de tema ou de tokens, se existiremApontar para arquivos theme. ou tokens. fornece a fonte mais autoritativa dos valores de design.
Nome do projeto, e ID se conhecidoO título do documento usa o nome do projeto; o ID do projeto é incluído quando disponível e omitido caso contrário.
Uma decisão sobre enviar ao StitchSe o usuário quiser que o design system seja enviado ao Stitch, o workflow continua além da Fase 3, entrando na transferência de integração.

03 Dentro da skill

Regras que a Skill stitch::extract-design-md Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

O Frontmatter YAML É Obrigatório
O arquivo deve abrir com um bloco YAML contendo name e um mapeamento colors, correspondendo a examples/DESIGN.md.
Nomeie as Cores pelo Caráter, Não pela Tonalidade
Cada cor recebe um nome descritivo que evoca sua aparência, então #294056 se torna "Deep Muted Teal-Navy" em vez de "Blue".
Consolide Cores Quase Duplicadas
Quase duplicadas como #333 e #2C2C2C são mescladas sob o único nome que melhor representa a cor pretendida.
Comece a Partir da Configuração do Tailwind
Um tailwind.config.js personalizado é tratado como o próprio design system, extraído em primeiro lugar, com os componentes verificados pontualmente quanto a substituições depois.
Arquivos de Tema Têm Precedência sobre Estilos de Componentes
Um arquivo de tema que define uma paleta revela o design system pretendido, enquanto estilos inline dispersos mostram apenas o que realmente foi entregue.
Trate Propriedades CSS Customizadas como Intenção
Uma variável como --brand-primary é um token de design deliberado, não um valor incidental, e deve ser respeitada como tal.
Escreva as Notas do Stitch em Linguagem Natural
As notas de geração descrevem os componentes em prosa, em vez de colar sintaxe CSS ou propriedades brutas.
Manter Atmosfera Editorial
A seção de atmosfera é escrita como texto editorial sobre clima e filosofia, não como documentação técnica.

04 Coloque em prática

Instale stitch::extract-design-md no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione stitch::extract-design-md ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formato genérico de CLI de skills para plugins/stitch-design/skills/extract-design-md/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma primeira tarefa de marca e design-system

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Cada cor tem um nome descritivo, um código hexadecimal e uma função.
A tipografia abrange a família da fonte, uma descrição do caractere e a hierarquia completa.
Os estilos dos componentes definem forma, cor, estados e transições.
O layout define a largura máxima, a grade, os breakpoints e a estratégia de espaçamento.
O documento captura a intenção por trás do estilo, e não apenas os valores brutos.

No OpenDesign importe stitch::extract-design-md a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Arquivo da skill: plugins/stitch-design/skills/extract-design-md/SKILL.md Checksum do conteúdo registrado na verificação; commit 0337446
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 8.304 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório google-labs-code/stitch-skills, que contém 12 skills neste catálogo. Não é uma classificação ou contagem de uso para stitch::extract-design-md.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Por Que Isso ExisteLer a fonte é mais rápido do que o HTML renderizado e funciona mesmo quando o build está quebrado.
Quando UsarGatilhos: extrair, documentar, auditar, migrar um design system, unificar estilos inconsistentes.
Pré-requisitosApenas acesso ao diretório de origem; nenhuma dependência de build ou de runtime é necessária.
WorkflowQuatro fases: descoberta do projeto, extração profunda, redação do DESIGN.md, integração opcional com o Stitch.
Checklist de QualidadeItens de verificação para cores, tipografia, componentes, layout, linguagem, deduplicação e intenção.
Dicas para uma Extração MelhorExtraia informações dos comentários no código, prefira bibliotecas de tokens e arquivos de tema, e trate a configuração do Tailwind como o sistema.

A Descrição da Própria Skill

"- Extraia um design system abrangente (DESIGN.md) diretamente do código-fonte frontend — React, Vue, Svelte, Angular, HTML/CSS puro ou qualquer framework web. Analisa arquivos de componentes, folhas de estilo, configurações do Tailwind, definições de tema e design tokens para produzir um documento de design system rico e compatível com Stitch. Use esta skill sempre que o usuário quiser fazer engenharia reversa de um design system a partir de uma base de código existente, auditar a linguagem visual de um projeto, extrair design tokens de arquivos-fonte ou entender os padrões de estilo em um repositório frontend — mesmo que ele apenas diga "como é a aparência deste app?" ou "extraia o design deste código".

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 13.970 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill stitch::extract-design-md

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Preciso instalar dependências ou fazer o app compilar primeiro?

Não. A skill lê apenas os arquivos de origem e não precisa de dependências de build ou de runtime, então funciona mesmo quando faltam dependências ou o build está quebrado.

Quais frameworks e configurações de estilo ela é capaz de lidar?

React, Vue, Svelte, Angular, HTML/CSS puro e qualquer framework web, incluindo configurações do Tailwind, CSS-in-JS e arquivos de tema ou de tokens. Os padrões de extração específicos de cada framework estão em arquivos de referência que ela consulta para React/Tailwind, Vue, Svelte, Angular e CSS puro.

Por que o DESIGN.md precisa de frontmatter em YAML?

O bloco carrega o nome e o mapeamento de cores como dados estruturados que outras skills interpretam. Omiti-lo, ou deixar de incluir os tokens de cor principais, é um uso incorreto da skill.

Ela consegue enviar o design system finalizado para o Stitch?

Essa etapa é opcional e fica a cargo de outra skill: a Fase 4 faz o handoff para manage-design-system, que realiza as chamadas MCP de criação/atualização usando o DESIGN.md como entrada. Se você quiser apenas o documento, o trabalho termina após a Fase 3.

Stitch Extract Design MD

Execute stitch::extract-design-md em uma marca real e em uma tarefa de trabalho de design-system.

Baixe OpenDesign, importe stitch::extract-design-md pelo link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills