O que awesome-design-md faz?
Uma coleção de arquivos DESIGN.md inspirados nos sistemas de design de marcas populares. Coloque um no seu projeto e deixe os agentes de código gerarem uma interface de usuário correspondente.
Introdução
Este repositório contém uma série de arquivos DESIGN.md que descrevem a identidade visual de marcas conhecidas. Ao incluir um desses arquivos no seu projeto, agentes de IA (como Claude Code, Cursor, Codex) podem ler as especificações de design e gerar código HTML/CSS que reproduza fielmente o estilo da marca.
Como usar
- Escolha um arquivo
DESIGN.mdda coleção que corresponda à marca desejada. - Copie o arquivo para a raiz do seu projeto.
- Inicie o seu agente de código e forneça um prompt como: "Use o DESIGN.md para gerar uma interface de usuário de acordo com o sistema de design da [Marca]."
- O agente lerá as diretrizes e gerará um layout consistente.
Marcas disponíveis
- Vercel – design minimalista e espaçamentos amplos.
- Stripe – cores vibrantes e tipografia moderna.
- Linear – foco em clareza e tons frios.
- Tailwind CSS – utility-first com paleta de cores flexível.
- GitHub – design funcional e acessível.
Formato do arquivo
Cada DESIGN.md segue um formato padronizado:
# Nome da Marca
**Cores primárias:** `#hex`, `#hex`
**Tipografia:** 'Fonte', 'Fallback'
**Espaçamento:** 4px grid
**Componentes:** Botões, Cartões, Navegação, Formulários
Contribuição
Contribuições são bem-vindas! Para adicionar uma nova marca, crie um arquivo DESIGN.md seguindo o padrão e abra um pull request.
Licença
Este projeto está licenciado sob a licença MIT.