# Biblioteca de DESIGN.md

> 759 design systems documentados em Markdown, prontos para copiar e usar com qualquer agente de IA.

## O Que é a Biblioteca?

A Biblioteca de DESIGN.md é uma coleção de mais de 759 arquivos DESIGN.md prontos cobrindo todos os principais estilos de design — do minimalismo suíço ao cyberpunk, do flat design ao brutalismo. Cada arquivo é um design system completo pronto para baixar e usar com qualquer agente de IA para código.

## Como Usar

1. **Navegue** pela biblioteca filtrando por categoria, estilo ou era
2. **Escolha** um estilo que combine com seu projeto
3. **Copie** o conteúdo do DESIGN.md
4. **Coloque** na raiz do seu projeto
5. **Referencie** no config do seu agente de IA

## Estilos de Design Disponíveis

- **Minimalista**: Limpo, simples, focado no conteúdo
- **Flat**: Sem sombras, cores vibrantes, tipografia clara
- **Material**: Princípios do Material Design do Google
- **Brutalista**: Cru, sem polimento, alto contraste
- **Glassmorphism**: Translúcido, efeitos de vidro fosco
- **Neumorphism**: Suave, plástico extrudado
- **Cyberpunk**: Neon, escuro, futurista
- **Suíço**: Baseado em grid, focado em tipografia
- **E muito mais...**

## Categorias

- SaaS & Produto
- E-commerce
- Fintech
- Saúde
- Educação
- Criativo & Portfólio
- Landing Pages
- Dashboards
- Apps Mobile

## Informações-Chave para Agentes de IA

- **Formato**: Markdown + YAML front matter
- **Tipos de token**: Color (#hex sRGB), Dimension (px/em/rem), Typography (object), Token Reference ({path.to.token})
- **Seções**: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts
- **Validação**: npx @google/design.md lint
- **Export**: Converte para Tailwind theme config e DTCG tokens.json (W3C)
- **Licença**: CC BY 4.0 (Creative Commons Attribution 4.0)

## Perguntas Frequentes

### O que é um arquivo DESIGN.md?

Um DESIGN.md é um arquivo Markdown com YAML front matter que define design tokens, tipografia, cores e padrões de componentes para agentes de IA manterem consistência visual.

### Como usar um DESIGN.md desta biblioteca?

Navegue pela biblioteca, escolha um estilo que combine com seu projeto, copie o conteúdo do DESIGN.md e coloque na raiz do projeto. Seu agente de IA lê antes de gerar qualquer componente.

### Quais agentes de IA suportam DESIGN.md?

DESIGN.md funciona com Claude Code, Cursor, Kiro, Windsurf, Google Stitch e qualquer agente de IA que leia arquivos do projeto no context window.

## Recursos Relacionados

- https://designmd.app.br/brands — DESIGN.md de marcas reais
- https://designmd.app.br/guides — Guias de configuração para agentes de IA
- https://designmd.app.br/integrations — Detalhes de integração
- https://designmd.app.br/faq — Perguntas comuns

---
Fonte: https://designmd.app.br/library