Há uma frustração específica que todo dev que usou agentes de código conhece bem: você pede ao agente que construa uma feature, funciona perfeitamente em termos funcionais, e depois você olha para a UI e parece ter sido desenhada por um comitê em 2009. Cores incorretas, espaçamento inconsistente, fontes que não combinam com nada mais no projeto.
O agente entendeu a lógica. Não tinha ideia de como fica seu sistema de design.
Esse é o problema que resolve awesome-design-md, e a abordagem é tão simples que parece óbvia em retrospectiva: solte um arquivo DESIGN.md na raiz do seu projeto e diga ao seu agente que o use.
O que é DESIGN.md?
DESIGN.md é um formato de texto plano introduzido pelo Google Stitch para comunicar sistemas de design a agentes de código com IA. Pense nele como o equivalente de design do AGENTS.md:
| Arquivo | Quem lê | O que define |
|---|---|---|
AGENTS.md |
Agentes de código | Como construir o projeto |
DESIGN.md |
Agentes de design | Como o projeto deve parecer e funcionar |
A lógica é direta: markdown é o formato que os LLMs leem melhor. Sem parsing, sem ferramentas, sem exports do Figma, sem configurar esquemas JSON. Você descreve seu sistema de design em linguagem natural com seções estruturadas, e o agente realmente entende.
O que awesome-design-md oferece
O time da VoltAgent pegou esse formato e fez o trabalho tedioso por você: fez engenharia reversa dos sistemas de design de mais de 55 produtos populares a partir de seu CSS público e documentou tudo em formato DESIGN.md.
O repositório foi lançado em 31 de março de 2026 e acumulou mais de 4.400 estrelas no GitHub nos seus primeiros dias.
A coleção cobre uma ampla variedade de produtos:
- Ferramentas dev: Stripe, Vercel, Linear, Raycast, Sentry, PostHog, Resend, Mintlify
- Plataformas AI: Claude (Anthropic), Cursor, Lovable, VoltAgent, Replicate, RunwayML
- Produtividade: Notion, Airtable, Zapier, Superhuman
- Infraestrutura: MongoDB, HashiCorp, Sanity, ClickHouse
Cada pasta contém três arquivos: um DESIGN.md com a especificação completa do sistema de design em markdown, um preview.html com um catálogo visual de componentes em modo claro, e um preview-dark.html para superfícies em modo escuro.
O que há dentro de um DESIGN.md?
A profundidade desses arquivos é o que faz a abordagem funcionar. O DESIGN.md da Stripe, por exemplo, não apenas lista cores — documenta por que as decisões existem:
Stripe usa weight 300 como o peso característico de seus títulos — uma escolha extraordinariamente leve em um mundo onde todos usam 600–700 para chamar atenção. O sistema de sombras em múltiplas camadas usa uma sombra primária com matiz azul (rgba(50,50,93,0.25)) combinada com uma camada mais escura, criando sombras com profundidade atmosférica diretamente ligada à paleta azul-marinho-roxo da marca.
Um DESIGN.md típico inclui:
- Tema visual e atmosfera — a filosofia de design geral em prosa
- Paleta de cores completa com nomes de funções semânticas, não apenas valores hex
- Hierarquia tipográfica — cada tamanho, peso, letter-spacing e line-height
- Estilos de componentes com estados hover, active e disabled
- Princípios de layout e regras de espaçamento
- Sistema de elevação — como as sombras comunicam profundidade
O resultado é um documento que dá a um agente de IA o mesmo contexto que um designer sênior daria a um dev júnior em um handoff detalhado.
Como usar
Três passos:
1. Baixe o DESIGN.md do sistema que quer usar:
# Sistema de design da Stripe
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md
# Sistema de design da Vercel
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md
# Sistema de design do Linear
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear/DESIGN.md
2. Coloque o arquivo na raiz do projeto (no mesmo nível que seu CLAUDE.md ou AGENTS.md)
3. Referencie-o no seu prompt ao agente:
Construa um componente de pricing card usando DESIGN.md como guia visual.
Faça-o combinar exatamente com o sistema de design.
Era isso. Seu agente agora tem o contexto de design completo que precisa.
Funciona com qualquer agente
O formato é completamente independente de modelo. Está formatado especificamente para que agentes de código com IA o interpretem e implementem — Claude Code, Cursor, GitHub Copilot e Codex CLI entendem o formato de texto plano nativamente.
Se você está construindo um projeto novo e quer que pareça com um produto específico — digamos, quer que sua ferramenta interna tenha a precisão preto-e-branco da Vercel — agora você tem uma especificação de design reutilizável pronta para usar.
O ecossistema que está crescendo
O formato design-md já gerou ferramentas relacionadas: um conversor de Figma para DESIGN.md que extrai design tokens de arquivos Figma, um raspador de sites que destila o sistema de design de qualquer site em um arquivo DESIGN.md, e até uma coleção de DESIGN.md específica para aplicações de terminal (TUI) que cobre ferramentas como Claude Code, Lazygit e btop.
O ecossistema se move rápido. Se o produto que você precisa ainda não está na coleção awesome-design-md, você pode abrir uma issue com a URL do site para solicitá-lo.
A mudança real
Frameworks como CLAUDE.md e AGENTS.md ensinaram aos agentes como construir seu projeto. DESIGN.md fecha a outra metade: ensinar aos agentes como deve parecer.
A abordagem reconhece algo que há muito tempo é verdadeiro: agentes de IA são excelentes engenheiros de software e mediocres designers. Não porque não conseguem gerar código visualmente preciso — conseguem — mas porque nunca tiveram uma forma padronizada de receber intenção de design. DESIGN.md é esse padrão.
O repositório está em github.com/VoltAgent/awesome-design-md. Verifique os arquivos preview.html antes de escolher — ver o catálogo visual de componentes vai ajudá-lo a decidir qual sistema de design se adequa melhor ao seu projeto.