Coleção de arquivos DESIGN.md prontos para usar
DESIGN.md APP
Arquivos de design system em Markdown, documentados e prontos para uso com agentes de IA. Baseado no padrão do Google Stitch.
Criado pelo Google e compatível com todos os agentes de IA: Claude Code, Antigravity, Cursor, Kiro, Windsurf, Cline
O problema
Agentes de IA não persistem contexto visual entre prompts
LLMs processam cada prompt de forma isolada. Sem um arquivo de referência no repositório, o agente não tem como saber que #2665fd é sua cor primária ou que botões usam rounded-lg. O resultado: cada componente gerado segue decisões visuais diferentes.
DESIGN.md resolve isso colocando o design system inteiro no context window do agente. É um arquivo Markdown na raiz do projeto que define cores, tipografia, espaçamento e padrões de componentes. O agente lê antes de gerar qualquer UI.
Estrutura
Anatomia de um DESIGN.md
# 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 com brand blue
- Inputs: 1px border, surface-variant background
## Do's and Don'ts
- Usar primary color apenas para ações principais
- Não misturar cantos arredondados e retos na mesma viewBiblioteca
DESIGN.md em destaque
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…
Blog