Gerador DESIGN.md
Crie arquivos DESIGN.md prontos para IA para Google Stitch, Claude Code, Cursor e Copilot — defina cores, tipografia, espaçamento e componentes em formato...
Atualizado em maio de 2026
Project Basics
Name your project and describe its overall visual intent.
Describe the intended visual feel. AI agents use this to set the tone.
Como usar
Wizard de 9 seções, download em segundos
1. Preencha os básicos e a paleta
Nome, tagline, tema visual em linguagem natural, e cores por role semântico (primary, error, success).
2. Configure tipografia, layout e componentes
Fontes, escala modular, espaçamento, border-radius, sombras e padrões de variantes.
3. Baixe e commite
Copie ou baixe o DESIGN.md completo e coloque na raiz do projeto.
O que esta ferramenta faz
As 9 seções do spec oficial, guiadas
Wizard passo a passo
Preenche as 9 seções do spec Apache 2.0 sem precisar decorar a estrutura do arquivo.
Cores por role semântico
Primary, surface, error, success — para light e dark mode, não só valores hex soltos.
Escala tipográfica modular
Minor third, perfect fourth, golden ratio — tamanhos matematicamente consistentes.
Acessibilidade incluída
Nível WCAG alvo, contrastes mínimos, focus ring e tamanho de touch target.
Preview visual ao vivo
Veja um dashboard, botões, formulário e alertas renderizados com suas cores e fontes reais antes de exportar.
Múltiplos temas e presets de cor
Adicione, renomeie e troque entre paletas nomeadas, ou carregue presets prontos como Ocean e Forest em qualquer uma delas.
As 9 seções do spec
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Começar um projeto novo com IA
Coloque o DESIGN.md na raiz antes do primeiro componente — toda UI gerada usa suas regras.
Parar de repetir specs em prompts
Escreva a cor primária, fonte e border-radius uma vez, não em cada prompt novo.
Workflows com Google Stitch
Exporte tokens do Figma para o DESIGN.md e toda geração do Stitch bate com seu sistema.
Trocar de ferramenta de IA
O DESIGN.md viaja com o projeto ao migrar entre Cursor, Copilot e Claude Code.
Validar contraste antes do handoff
O lint embutido calcula a razão WCAG de cada par de cor e aponta falhas com atalho direto pro passo certo.
Manter várias marcas ou temas
Gerencie temas nomeados separados (ex: Light e uma variante de marca) no mesmo arquivo, sem duplicar o wizard.
Erros comuns
Achar que substitui o Figma
São complementares — DESIGN.md cobre a especificação e o handoff para IA, não colaboração visual.
Pular a seção de acessibilidade
Sem contraste mínimo e nível WCAG definidos, agentes de IA não têm restrição para gerar UI acessível.
Confundir com design tokens
DESIGN.md vai além de tokens — inclui intenção visual em linguagem natural e padrões de componentes.
Ignorar os erros da aba Lint
A aba Lint calcula contraste real (WCAG AA) e aponta pares de cor que falham — ignorar um ERR significa entregar tokens que a IA vai aplicar do jeito errado.
Confundir temas com dark mode
Os temas nomeados são paletas independentes (ex: Light, uma variante de marca); o modo escuro é um bloco de overrides à parte — os dois não se substituem.
Por que usar esta ferramenta
O wizard guia pelas 9 seções do spec oficial com valores padrão sensatos, em vez de você escrever o markdown manualmente do zero.
É compatível nativamente com Google Stitch e funciona como arquivo de contexto para Claude Code, Cursor e Copilot — todos leem arquivos na raiz do projeto automaticamente.
Sem um arquivo assim, cada prompt de IA escolhe cor, fonte e espaçamento do zero, de forma arbitrária. Com o DESIGN.md pronto, o agente trata seu spec como restrição e aplica as mesmas regras em toda geração seguinte — não só na primeira.
DESIGN.md vs. README.md vs. Design Tokens
Formatos complementares, propósitos diferentes
Perguntas frequentes
Um arquivo markdown que armazena as regras visuais do projeto — cores, tipografia, espaçamento e componentes — em formato estruturado que agentes de IA conseguem ler e seguir. Criado pelo Google Labs para o Stitch, open source sob Apache 2.0.
Referências
Ferramentas Relacionadas
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador de Paleta de Cores por Imagem Design Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
- Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
