Create Design MD skill

O Claude lê o código ou o site e registra num DESIGN.md as cores, fontes e regras visuais, pra toda tela nova sair no mesmo padrão.

por ibelick

instalações: 4.400
estrelas no GitHub: 10,2 mil
No skills.sh desde: julho de 2026
Licença: MIT

Atualizada no GitHub em 25 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

ibelick
create-design-md
O Claude lê o código ou o site e registra num DESIGN.md as cores, fontes e regras visuais, pra toda tela nova sair no mesmo padrão.Auditada4.400 instalações, grátis

O que ela faz

Cria ou atualiza o DESIGN.md, arquivo que guarda a linguagem visual do produto (cores, tipografia, cantos, espaçamento e componentes) pros agentes de código seguirem. Funciona de dois jeitos: lendo o repositório do projeto ou inspecionando um site público no navegador, no tamanho de celular e de computador.

Só entra no arquivo o que tem prova: no código, token com nome; no site, valor medido que bate com o CSS carregado ou que se repete nas páginas visitadas. Estilo de uma tela só e personalidade de marca inventada ficam de fora. No modo site, o documento sai marcado como rascunho reconstruído.

No fim valida com o pacote @google/design.md: roda o lint e um teste de exportação pro formato do projeto (Tailwind v4, Tailwind v3 ou DTCG), conferindo se cada categoria sai. Não mexe em nenhum outro arquivo do projeto nem guarda o que exportou: só o DESIGN.md muda.

Nas palavras de quem fez

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…

ibelick, no SKILL.md

Quando usar

Dar ao Claude o padrão visual do seu produto antes de criar telas novas
Registrar o visual de um site que você gostou pra usar de referência
Atualizar o DESIGN.md depois de uma mudança de tema
Passar o design de um projeto pra outro agente ou outra pessoa

Depois de instalar, é só pedir assim

Usa a create-design-md e cria o DESIGN.md deste projeto
Monta um DESIGN.md a partir do site exemplo.com.br, olhando no celular e no computador
Atualiza o DESIGN.md com as cores novas que entraram no tema

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Create Design MD no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Create Design MD, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa estar instalado?

O Node, pra rodar o npx @google/design.md que valida o arquivo. Pra ler um site pela URL, o agente precisa de acesso a um navegador de verdade; sem isso ela pede prints ou o código, e não monta o arquivo só pelo HTML.

Ela muda o design do meu site?

Não. Ela só registra o que já existe e mexe apenas no DESIGN.md. Não cria cor, fonte nem regra que o código ou a página não mostrem.

Roda no Codex e no Antigravity?

Sim. São instruções em texto e comandos com npx, então qualquer agente que lê skills e roda terminal usa.

Levar essa skill

1x create-design-mdR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/ibelick/ui-skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.