Gerador DESIGN.md

Gerador DESIGN.md — Ferramenta Online Grátis para Sistemas de Design com IA

Para de repetir as mesmas regras de design em cada prompt de IA. O Gerador DESIGN.md cria um arquivo estruturado que o Google Stitch, Claude Code, Cursor e Copilot leem automaticamente — assim toda interface gerada por IA segue suas cores, fontes e regras de componentes sem você precisar especificar de novo.

Preenche o wizard de 9 seções, baixa o arquivo, joga na raiz do projeto. Pronto.

O que é o DESIGN.md e por que importa?

DESIGN.md é um arquivo markdown que armazena as regras visuais do seu sistema de design em um formato que agentes de IA conseguem interpretar de forma determinística. Foi criado pelo Google Labs para a ferramenta Stitch e publicado como open source sob a licença Apache 2.0 em 21 de abril de 2026.

Pensa assim: é o README.md do design. Enquanto o README.md explica o código para humanos e ferramentas, o DESIGN.md explica o design visual para agentes de IA. Qualquer ferramenta compatível lê o arquivo automaticamente da raiz do projeto — sem precisar de prompt engineering.

Sem o DESIGN.md, toda UI gerada por IA é um chute: cores arbitrárias, fontes genéricas, border-radius aleatório. Com o DESIGN.md, o agente usa seu spec como restrição e aplica de forma consistente em cada geração.

Como Usar o Gerador DESIGN.md

A ferramenta guia você pelas 9 seções do spec oficial em um wizard passo a passo:

1. Básicos do projeto — nome, tagline e descrição em linguagem natural do tema visual (ex: "minimal e limpo, com muito espaço em branco, paleta neutra").
2. Paleta de cores — defina roles semânticos (primary, surface, error, success) para light e dark mode usando os color pickers.
3. Tipografia — fonte para títulos, corpo e monospace, mais a proporção da escala tipográfica modular.
4. Espaçamento e layout — unidade base, colunas de grid, largura máxima do container e breakpoints responsivos.
5. Estilização de componentes — border-radius dos botões, sombra dos cards, altura dos campos de formulário e padrões de variantes.
6. Iconografia — biblioteca de ícones, escala de tamanhos e tratamento de imagens.
7. Movimento e animação — escala de duração, curva de easing e nível de animação (completo, reduzido ou nenhum).
8. Acessibilidade — nível WCAG alvo, contrastes mínimos, estilo do focus ring e tamanho mínimo de touch target.
9. Diretrizes por plataforma — prefixo das CSS custom properties, estratégia de dark mode e regras específicas para web e mobile.
10. Preview e download — veja o DESIGN.md completo, copie para o clipboard ou baixe para commitar no projeto.

As 9 Seções do Spec DESIGN.md

A especificação Apache 2.0 define exatamente nove seções. Toda ferramenta compatível sabe onde encontrar cada tipo de informação — sem ambiguidade.

1. Tema Visual e Atmosfera — A intenção estética em linguagem natural. Exemplos: "minimal e clínico", "caloroso e acessível", "ousado e energético". Define a interpretação do agente para todo o restante do spec.

2. Paleta de Cores e Roles — Cores com roles semânticos, não só valores hex. Primary, secondary, surface, background, on-surface, accent, error, warning, success — mais os equivalentes em dark mode com notas de contraste WCAG.

3. Regras de Tipografia — Famílias de fontes para títulos, corpo e monospace. Escala tipográfica construída sobre uma proporção modular (minor third, perfect fourth, golden ratio) para que todos os tamanhos sejam matematicamente consistentes.

4. Espaçamento e Layout — Unidade base de espaçamento, multiplicadores da escala, colunas de grid, gutters, larguras máximas de container e breakpoints responsivos.

5. Estilização de Componentes — Padrões visuais para botões (variantes primary, secondary, ghost, danger), cards (border-radius, sombra, padding), campos de formulário (altura, borda, estado de foco) e outros padrões de UI.

6. Iconografia e Imagens — Qual biblioteca de ícones usar, convenções de tamanho (sm/md/lg), aspect ratios de imagem, tratamento de border-radius e regras de lazy loading.

7. Movimento e Animação — Curvas de easing, escala de duração (instant → fast → base → slow → slower) e se a marca usa animação (importante para acessibilidade).

8. Requisitos de Acessibilidade — Contrastes mínimos, estilos de focus ring, tamanhos mínimos de touch target e nível WCAG alvo (AA ou AAA).

9. Diretrizes por Plataforma — Convenção de naming para CSS custom properties, estratégia de dark mode (classe vs. media query), regras específicas para web e para mobile.

Casos de Uso Comuns

• Começar um projeto novo com IA: coloca o DESIGN.md na raiz do repo antes do primeiro componente. Todo UI gerado por IA a partir daí usa as suas regras de marca.
• Parar de repetir specs em prompts: para de escrever #1A73E8 azul primário, fonte Inter, border-radius 6px em cada prompt. Escreve uma vez no DESIGN.md.
• Workflows com Google Stitch: o Stitch lê o DESIGN.md nativamente. Exporta seus design tokens do Figma, coloca no DESIGN.md, e toda geração do Stitch bate com o seu sistema Figma.
• Onboarding de novas ferramentas de IA: quando você troca de Cursor para Copilot para Claude Code, o DESIGN.md viaja com o projeto — sem reconfigurar nada.
• Documentação de sistema de design: o formato estruturado do spec funciona também como documentação legível por humanos, útil no onboarding de designers e devs.

Perguntas Frequentes

O que é um arquivo DESIGN.md?

DESIGN.md é um arquivo markdown que armazena as regras visuais de design do seu projeto — cores, tipografia, espaçamento e padrões de componentes — em um formato estruturado que agentes de IA conseguem ler e seguir de forma consistente. Foi criado pelo Google Labs para o Stitch e publicado como open source sob Apache 2.0 em abril de 2026. É o equivalente ao README.md para o seu sistema de design: um arquivo na raiz do projeto que qualquer ferramenta compatível lê automaticamente.

Quais ferramentas de IA suportam DESIGN.md?

O Google Stitch tem suporte nativo ao DESIGN.md. Claude Code, Cursor, GitHub Copilot e Windsurf conseguem usá-lo como arquivo de contexto de projeto — eles leem arquivos na raiz do projeto como contexto ao gerar código. O spec é aberto sob Apache 2.0, então a adoção está crescendo rapidamente em ferramentas de IA para código e design.

Posso escrever DESIGN.md sem usar o Google Stitch?

Sim. O spec é completamente open source (Apache 2.0) e neutro em relação a ferramentas. Você pode escrever o DESIGN.md manualmente em qualquer editor de texto, commitar no GitHub e usar com qualquer agente de IA compatível. Este gerador acelera o processo guiando você pelas 9 seções com valores padrão sensatos.

O DESIGN.md substitui o Figma?

Não. O Figma continua sendo o padrão para colaboração em tempo real, refinamento de alta precisão e handoff de design. O DESIGN.md cobre a fase de especificação e o handoff para agentes de IA. O fluxo emergente é híbrido: DESIGN.md para contexto de geração por IA, Figma para colaboração e polimento. São complementares, não concorrentes.

Como o DESIGN.md melhora a consistência das UIs geradas por IA?

Quando você envia um prompt para uma ferramenta de IA sem DESIGN.md, ela escolhe cores, fontes e espaçamentos de forma arbitrária. Com o DESIGN.md no contexto, o agente trata suas regras de design como restrições — usa o hex da sua cor primária em vez de adivinhar, a sua família de fontes em vez de usar uma genérica, e o seu border-radius em vez do que parece razoável para ele. O efeito é cumulativo: cada geração no projeto mantém a identidade visual sem especificação por prompt.

DESIGN.md é o mesmo que design tokens?

Não exatamente. Design tokens são um conceito — valores nomeados para cores, espaçamento e tipografia — que podem ser armazenados em vários formatos (JSON, CSS custom properties, plugin de tokens do Figma). DESIGN.md é um formato de arquivo e spec específico que vai além dos tokens: inclui intenção visual em linguagem natural, padrões de componentes, princípios de movimento e requisitos de acessibilidade em um formato holístico que agentes de IA conseguem interpretar contextualmente.

O design.md generator funciona com o Claude Code?

Sim. Coloca o DESIGN.md gerado na raiz do seu projeto. O Claude Code vai pegá-lo como contexto ao gerar componentes de UI, aplicando as suas regras de marca de forma consistente em cada geração. O mesmo vale para Cursor e Copilot, que também leem arquivos de contexto da raiz do projeto.

Recursos

• Google Stitch — Visão Geral do DESIGN.md — Documentação oficial do spec DESIGN.md, mantida pelo Google Labs.
• Licença Apache 2.0 — A licença open source sob a qual a especificação DESIGN.md é publicada.