Repolode
Enviar
VoltAgent

VoltAgent/awesome-design-md

Coleção selecionada de arquivos DESIGN.md extraídos de sites de marcas, para que agentes de programação com IA gerem interfaces alinhadas a esses sistemas de design.

Ver no GitHubSite
Estrelas
125,892
Forks
13,941
Issues abertas
311
Último commit
há 10 dias

O que é?

Awesome DESIGN.md é uma coleção de arquivos DESIGN.md em texto puro, cada um descrevendo o sistema de design visual de um site ou marca específica, incluindo cores, tipografia, componentes, layout, profundidade e comportamento responsivo. Cada entrada é um arquivo Markdown que pode ser colocado na raiz de um projeto para que um agente de programação com IA o leia e crie uma interface na mesma linguagem visual.

A coleção abrange cerca de 84 sites em categorias como plataformas de IA, ferramentas para desenvolvedores, produtos de backend e DevOps, fintech, e-commerce, mídia e setor automotivo, além de um pequeno conjunto de designs retrô da web dos anos 1990 e do início dos anos 2000. Cada site inclui um DESIGN.md e páginas HTML de prévia com amostras de cores, escala tipográfica, botões e cards, em versões claras e escuras.

O formato DESIGN.md tem origem no Google Stitch. Os arquivos são licenciados sob MIT como parte do repositório, e os mantenedores afirmam que os tokens extraídos são valores CSS publicamente visíveis e que não reivindicam a propriedade da identidade visual de nenhum site.

Recursos principais

  • 01Oferece arquivos DESIGN.md prontos para uso, referentes a dezenas de sites de marcas.
  • 02Cada arquivo aborda cores, tipografia, componentes, layout, elevação e regras de responsividade.
  • 03Inclui páginas HTML de prévia com amostras de cores, escala tipográfica, botões e cards.
  • 04Oferece versões claras e escuras das prévias de cada site.
  • 05Segue o formato DESIGN.md do Stitch, que usa Markdown puro e não requer ferramentas especiais.

Casos de uso

  • Copiar o DESIGN.md de uma marca para um projeto e pedir a um agente de IA que crie uma página nesse estilo.
  • Estudar como sites conhecidos estruturam seus tokens de design e regras para componentes.
  • Gerar interfaces em estilo retrô com a coleção de designs dos anos 1990 e do início dos anos 2000.
  • Manter a consistência visual das interfaces geradas por IA em todo o projeto.

Início rápido

  1. 1

    Escolha um DESIGN.md da coleção em getdesign.md

  2. 2

    Copie o arquivo DESIGN.md para a raiz do seu projeto e peça ao seu agente de IA para criar uma página que corresponda a esse design

Em coleções

Assistentes e agentes de programação com IA

Tópicos

#design-system#design-tokens#ai-coding#ui-generation#awesome-list#css#vibe-coding#design-md#figma#landing-page

Perguntas frequentes

O que é awesome-design-md?
Coleção selecionada de arquivos DESIGN.md extraídos de sites de marcas, para que agentes de programação com IA gerem interfaces alinhadas a esses sistemas de design. Awesome DESIGN.md é uma coleção de arquivos DESIGN.md em texto puro, cada um descrevendo o sistema de design visual de um site ou marca específica, incluindo cores, tipografia, componentes, layout, profundidade e comportamento responsivo. Cada entrada é um arquivo Markdown que pode ser colocado na raiz de um projeto para que um agente de programação com IA o leia e crie uma interface na mesma linguagem visual.
awesome-design-md é gratuito? Qual é a licença?
awesome-design-md é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
awesome-design-md ainda é mantido?
Manutenção ativa. O último commit de awesome-design-md foi em 28 de out. de 2026.
Para que posso usar awesome-design-md?
Copiar o DESIGN.md de uma marca para um projeto e pedir a um agente de IA que crie uma página nesse estilo. Estudar como sites conhecidos estruturam seus tokens de design e regras para componentes. Gerar interfaces em estilo retrô com a coleção de designs dos anos 1990 e do início dos anos 2000. Manter a consistência visual das interfaces geradas por IA em todo o projeto.
Como instalar awesome-design-md?
Escolha um DESIGN.md da coleção em getdesign.md Copie o arquivo DESIGN.md para a raiz do seu projeto e peça ao seu agente de IA para criar uma página que corresponda a esse design
Onde consigo awesome-design-md?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/VoltAgent/awesome-design-md

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados