create-design-mdpor Julien Thibeaut

Create Design MD Skill.

Uma skill para Claude Code e Codex voltada a trabalho de marca e design systems: cria ou atualiza um DESIGN.md a partir de um repositório de produto existente ou site público.

Marca e Sistemas de Design
DESIGN.md

Baixar OpenDesign Ver guia de uso

ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md

--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document

Cabeçalhos de seção e metadados lidos do arquivo original em 14/09/2026 · 16.176 caracteres no total

01 O que faz

O que a Skill create-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

Transforma um produto existente em um contrato de design escrito. No modo repositório, ele audita os tokens, temas, primitivos compartilhados e rotas renderizadas de um produto local e grava DESIGN.md na raiz desse produto; no modo URL, ele reconstrói um rascunho a partir do DOM, dos estilos computados e das folhas de estilo carregadas em larguras desktop e mobile.

Ambos os modos compartilham um único pipeline de evidências — papel, valor, fonte, escopo, recorrência, confiança — e um único esquema de token plano, com destinos de exportação css-tailwind, json-tailwind ou dtcg. Os valores só sobrevivem se uma fonte governante os nomear ou se passarem por um portão de três provas, e o documento não é liberado até que o lint e a exportação sejam bem-sucedidos. Ele não altera nada além do DESIGN.md.

O que ele produz

Um rascunho de DESIGN.md reconstruído e gravado no workspace atual no modo URL, identificado como rascunho.
Um relatório listando o modo e o produto ou URL auditado, as fontes governantes usadas, e os conflitos ou áreas sem suporte deixados de fora do documento.
Os resultados finais de lint e exportação, que devem ambos ser aprovados antes que o documento seja entregue.

Veja o exemplo de prompt ↗

Como funciona

01
Escolha o Modo
Modo repositório quando um repositório de produto local está disponível, gravando DESIGN.md na raiz desse produto; modo URL quando apenas uma URL pública é fornecida, produzindo um rascunho reconstruído no workspace atual.
02
Coletar Evidências e Registrar a Proveniência
Cada candidato é registrado com sua fonte, escopo e recorrência antes de qualquer normalização, de modo que ambos os modos alimentam o mesmo pipeline de registro.
03
Normalizar para o Esquema DESIGN.md
Candidatos incertos, locais sem um contrato, ou não relevantes para a implementação são descartados; o restante é mapeado para o esquema de token plano canônico.
04
Bloquear o Rascunho até a Validação
O Markdown só é gravado após o frontmatter analisado passar pelas verificações de forma, de modo que o texto nunca é rascunhado primeiro e depois adaptado ao YAML.
05
Lint e Exportação
A verificação estrutural de lint é executada primeiro, seguida de uma exportação de compatibilidade no destino selecionado, e cada categoria populada deve aparecer na saída.
06
Relatar Modo, Fontes e Lacunas
O relatório nomeia o modo e o produto ou URL auditado, as fontes governantes usadas, o que foi omitido por falta de suporte, e os resultados de lint e exportação.

02 Encontre o ideal para você

Quando Usar a Skill create-design-md

Use a skill create-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 arquivo da própria skill.

Boa Combinação

Documentando a linguagem de design de uma interface e reconstruindo seu sistema visual a partir de evidências atuais no código-fonte.
Dando a agentes de código um contexto de UI persistente em vez de repetir decisões de design em cada tarefa.
Um site público sem fonte disponível, onde um rascunho reconstruído a partir do DOM, dos estilos computados e do CSS carregado é aceitável.

Conheça os Limites

Editar o código-fonte, as dependências ou a configuração do produto para corresponder ao design documentado — apenas o arquivo DESIGN.md está no escopo.
Ler nomes de tokens internos, propriedade de componentes ou intenções não documentadas a partir de um site em produção: a evidência de URL não pode estabelecer isso.
Trabalhar sem inspeção renderizada no navegador; capturas de tela ou arquivos-fonte devem ser solicitados em vez de inferidos a partir de texto ou HTML.
Despejar todo token ou componente descoberto — inventários exaustivos estão explicitamente fora do escopo.

O Que Fornecer

Qual produto, se o repositório contém váriosO usuário deve nomear o produto implantável que está sendo documentado; se a titularidade for ambígua, o skill pergunta antes de escrever.
Uma URL pública mais acesso via navegador renderizadoO modo URL inspeciona o DOM, os estilos computados e as folhas de estilo carregadas publicamente em larguras desktop e mobile; capturas de tela isoladas não conseguem estabelecer valores exatos.
Um destino de exportação não padrão, se houverA saída de URL usa css-tailwind como padrão, salvo se o usuário especificar outro destino, já que os nomes de token precisam permanecer válidos para ele.

03 Dentro da skill

Regras que o Skill create-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.

Tocar Somente o Documento
O modo repositório não deve alterar o código-fonte do produto, dependências, configuração ou arquivos gerados, e não deve promover padrões de implementação acidentais a decisões de design.
Priorizar Evidências do Repositório
O modo repositório é escolhido sempre que há código-fonte disponível; uma URL fornecida pode verificar a apresentação renderizada, mas nunca substitui as evidências do repositório.
Um Esquema, Apenas Formatos de Mapeamento
Os grupos de tokens são mapeamentos, nunca sequências, e ambos os modos devem usar os mesmos nomes de token planos, sem introduzir um segundo esquema.
Escolha o Destino de Exportação Antes de Escrever
css-tailwind para Tailwind v4, json-tailwind para Tailwind v3, e dtcg nos demais casos; os nomes de token precisam ser válidos para o destino escolhido.
Três Provas para Afirmações no Modo URL
Uma afirmação no modo URL precisa de observação, fundamento e consequência; se faltar alguma prova, a afirmação é omitida em vez de suposta.
Emitir Somente Nomes de Token Válidos por regex
Todo nome de token emitido deve corresponder a ^[a-zA-Z0-9][a-zA-Z0-9-]*$; qualquer chave que falhar é rejeitada e reescrita.
Normalizar um Único Token de group-level
Um token de origem isolado como --radius torna-se rounded.base; sm, md, lg e xl nunca são derivados de classes utilitárias ou valores repetidos.
Nenhuma Liberação com Validação Falha
O documento nunca é retornado enquanto o lint ou a exportação falhar, e uma categoria populada ausente da exportação é tratada como uma falha de esquema.

04 Coloque em prática

Instalar create-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.

Adicionar create-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/ibelick/ui-skills --skill create-design-md

Forma genérica de CLI skills para skills/create-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

Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

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:

Execute exatamente uma exportação de compatibilidade no destino selecionado anteriormente e inspecione a saída.
Para css-tailwind, confirme que colors mapeiam para --color-, family para --font-, size para --text-, rounded para --radius- e spacing para --spacing-; um bloco de tipografia populado que não emite --font- nem --text-* significa que o documento deve ser reescrito.
Antes de salvar, leia novamente o frontmatter analisado e autorreprove filhos de tipografia escalares ou chaves de rounded ausentes da fonte que governa.
Ao atualizar um documento existente, mantenha temporariamente o conteúdo original e compare-o com o novo arquivo, restaurando qualquer decisão aceita que tenha sido removida.
Verifique a especificação instalada antes de codificar os modos de tema e recorra a uma tabela de Temas somente se os modos não forem suportados.

No OpenDesign importe o create-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: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branch main
Arquivo da skill: skills/create-design-md/SKILL.md Checksum de conteúdo registrado na verificação; commit 79081ab
License: MIT De LICENSE.
Estrelas do repositório: 8.402 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório ibelick/ui-skills, que contém 5 skills neste catálogo. Não é uma avaliação ou contagem de uso para create-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

LimitesApenas alterações no DESIGN.md; nenhum schema concorrente, nenhum despejo de todos os tokens descobertos.
1. Escolha o modoModo repositório versus modo URL, o que cada um pode comprovar e quando perguntar antes.
Pipeline de evidências compartilhadoPipeline de registro em seis etapas e critérios de omissão que ambos os modos devem seguir.
2. Rastreie as evidênciasOrdem de inspeção para repositórios; lista de amostragem, comprovações e registro de evidências para URLs.
3. Decida o que pertenceModelagem do schema, escolha do alvo de exportação, tratamento de temas e o que a prosa pode afirmar.
4. Escreva o documentoFrontmatter mínimo, ordem de seções permitida e o que excluir antes de salvar.
5. ValideLint, uma exportação, verificações de categoria e comparação de um documento atualizado.
6. ReporteO que retornar: modo, alvo auditado, fontes, omissões, resultados da validação.

A Descrição da Própria Skill

"Crie ou atualize um DESIGN.md a partir de um repositório de produto existente ou site público. Use quando solicitado a documentar a linguagem de design de uma interface, reconstruir seu sistema visual, extrair tokens de design e orientações de evidências atuais, ou fornecer contexto de UI persistente para agentes de código. Não modifique o código-fonte do produto ou promova padrões de implementação acidentais em decisões de design."

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

Create Design MD

Execute create-design-md em uma marca real e tarefa de trabalho de design-system.

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

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

O que a Skill create-design-md Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill create-design-md

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o Skill create-design-md Dá ao Claude Code e ao Codex

Tocar Somente o Documento

Priorizar Evidências do Repositório

Um Esquema, Apenas Formatos de Mapeamento

Escolha o Destino de Exportação Antes de Escrever

Três Provas para Afirmações no Modo URL

Emitir Somente Nomes de Token Válidos por regex

Normalizar um Único Token de group-level

Nenhuma Liberação com Validação Falha