Biblioteca aberta · 423 arquivos documentados
DESIGN.md APP
Um arquivo Markdown na raiz do projeto que ensina ao agente de IA as cores, tipografia e padrões visuais do seu design system — antes de gerar qualquer componente.
Compatível com Claude Code · Cursor · Kiro · Windsurf · Cline
Biblioteca
423 DESIGN.md prontos para usar
Minimalism & Swiss Style
Design minimalista com grid, tipografia clara e espaço em branco. Ideal para Saa…
Aurora UI
Gradientes fluxo animado, efeito Northern Lights, cores complementares. Interfac…
Grunge Rock dos Anos 90
Grunge Rock dos Anos 90 — Design general com grunge, 90s rock, raw. Template e p…
Art Nouveau Florido
Art Nouveau Florido — Design general com art nouveau, ornate, elegant. Template…
Flat Design Corporativo
Flat Design Corporativo — Design general com flat design, corporate, clean. Temp…
Steampunk Vitoriano
Steampunk Vitoriano — Design general com steampunk, victorian, ornate. Template…
De Stijl Abstrato
De Stijl Abstrato — Design general com de stijl, abstract, geometric. Template e…
Cyber-Tribal
Cyber-Tribal — Design general com cyber-tribal, futuristic, primal. Template e p…
01
Agentes não lembram do seu design
LLMs processam cada prompt isoladamente. Sem referência no repositório, cada componente gerado usa decisões visuais diferentes.
02
DESIGN.md entra no context window
Um arquivo Markdown com cores, tipografia, espaçamento e padrões de componentes. O agente lê antes de gerar qualquer UI.
03
Copie da biblioteca, cole no projeto
423 design systems documentados. Escolha um estilo, baixe o DESIGN.md e configure seu agente.
Leitura
Artigos e guias
Como usar DESIGN.md com Kiro
Adicione DESIGN.md ao diretório .kiro/steering do seu projeto.
Ler guia →
Como usar DESIGN.md com Windsurf
Configure global_rules.md para apontar para seu DESIGN.md.
Ler guia →
Como usar DESIGN.md com Google Stitch
Exporte DESIGN.md diretamente do Google Stitch.
Ler guia →
Estrutura
Anatomia de um DESIGN.md
Seis seções padronizadas. O agente lê o arquivo completo antes de gerar qualquer componente.
Ver formato completo →# Design System
## Overview
Interface minimal para app de produtividade.
Linhas limpas, alta densidade de informação.
## Colors
- **Primary** (#2665fd): CTAs, estados ativos
- **Surface** (#0b1326): Backgrounds
- **On-surface** (#dae2fd): Texto sobre dark
## Typography
- Headlines: Geist, semi-bold
- Body: Geist, regular, 14–16px
## Components
- Buttons: rounded-lg, primary filled
- Inputs: 1px border, surface-variant bg
## Do's and Don'ts
- Usar primary apenas para ações principais
- Não misturar cantos arredondados e retos