O que é Design.md e como usá-lo (com exemplos)

O que é Design.md

Design MD é um ficheiro markdown que reúne todas as regras visuais que agentes de codificação com IA ou builders de IA usam para criar interfaces de utilizador consistentes, incluindo cores, tipografia, espaçamento e padrões de componentes.

Em vez de instruir um agente como Claude ou Cursor com indicações vagas como "faz com que pareça moderno e limpo", adicionas um ficheiro design.md à raiz do projeto. Os agentes têm acesso a ele e aplicam automaticamente os teus estilos exatos a tudo o que criam.

O que há dentro de um Design.md

Não há regras rígidas sobre como estruturar o design.md, mas normalmente o ficheiro é organizado em secções claras que definem os elementos visuais de um projeto.

Cores: Paletas principais, escalas neutras e cores semânticas (sucesso, aviso, erro) com códigos hex exatos e orientação de uso.

Tipografia: Famílias de fontes, escalas de tamanho, pesos e alturas de linha para títulos e texto corrido.

Espaçamento: A unidade base (normalmente 4px ou 8px) e os valores da escala usados para padding, margens e gaps.

Componentes: Regras de estilo específicas para elementos comuns como botões, inputs e cartões, incluindo border-radius e estilos de borda.

Elevação: Valores de sombra e pistas de profundidade para interfaces em camadas.

Aqui tens um exemplo mínimo de como o ficheiro fica na prática:

## Cores
- **Primary** (#1A73E8): Cor principal da marca para botões e links
- **Background** (#FFFFFF): Fundo da página
- **Surface** (#F8F9FA): Cartões e superfícies elevadas
- **Text Primary** (#202124): Cor principal do texto
  
## Tipografia  
- **Heading 1**: Inter, 32px, peso 700- **Body**: Inter, 16px, peso 400
  
## Componentes
- **Buttons**: Preenchido primário (bg #1A73E8, texto branco, raio 8px)
- **Cards**: Fundo branco, borda sólida 1px #E8EAED, raio 12px

Exemplos/modelos de Design.md

Não precisas de escrever um ficheiro DESIGN.md do zero. A comunidade já criou bibliotecas vastas de sistemas de design prontos a usar.

Repositório awesome-design-md

O recurso mais popular é o repositório GitHub awesome-design-md, mantido pela VoltAgent. Inclui uma coleção curada de ficheiros Design.md inspirados em sites populares focados em developers e em marcas tech.

Podes encontrar ficheiros que replicam os sistemas de design exatos de empresas como:

• Claude: Acentos quentes em terracota com um layout editorial limpo

• Vercel: Precisão em preto e branco com a fonte Geist

• Stripe: Gradientes roxos emblemáticos e tipografia elegante

• Linear: Ultra-minimal, preciso, com acentos roxos

• Airbnb: Acentos corais quentes e elementos de UI arredondados

DESIGNmd.ai

Outro excelente recurso é o designmd.ai, uma plataforma da comunidade com mais de 100 sistemas de design gratuitos. Podes explorar por etiquetas como "dark", "saas", "minimal" ou "fintech" e descarregar diretamente o ficheiro markdown correspondente.

Como usar Design.md

Implementar um ficheiro DESIGN.md no teu workflow com agentes de IA é super simples.

O método manual

1. Descarrega um ficheiro Design.md de um dos recursos acima, ou escreve o teu próprio.

2. Coloca o ficheiro na raiz do teu projeto, mesmo ao lado dos teus ficheiros agents.md ou claude.md.

3. Ao dar instruções ao teu agente de codificação com IA (como Claude Code, Cursor ou Lovable), diz-lhe explicitamente para referenciar o ficheiro. Por exemplo: “Cria uma página de preços e usa o ficheiro @DESIGN.md para todas as decisões de estilo”.

Banani AI

Editores modernos de design de UI com IA, como Banani AI e Google Stitch, geram e atualizam automaticamente ficheiros design.md enquanto estás a criar designs.

O Banani, em particular, esclarece quais são os estilos de design enquanto estás a criar um projeto, eliminando a necessidade de fazer isso manualmente. Se as preferências visuais do projeto que estás a gerar com IA mudarem, ele atualiza tudo em tempo real, para que tenhas sempre um ficheiro .md atualizado. Podes usar o seu servidor MCP para que os teus agentes de codificação tenham acesso à versão mais recente.

Criadores de Design.md

Tal como o agents.md, a comunidade de vibe coding começou a experimentar mover as preferências estilísticas para um ficheiro md de instruções separado.

Em março de 2026, a Google adicionou-o como parte da sua nova ferramenta de design com IA, Google Stitch. O Stitch usa o ficheiro para garantir que cada ecrã ou componente que gera segue uma linguagem visual consistente.

Embora não sejam os criadores, a Google fez a primeira proposta de "standardisation" sobre o que deve ser incluído e em que ordem.

Devo usar design.md

Se usas agentes de IA para gerar interfaces de utilizador, adicionar um ficheiro design.md ao teu workflow é uma das melhorias com maior impacto que podes fazer.

Resolve um grande problema do vibe coding: estilos de design genéricos e desleixados para os quais todos os agentes de codificação tendem por defeito.

Demora trinta segundos a descarregar um ficheiro do repositório awesome-design-md e a colocá-lo no teu projeto. A melhoria resultante na consistência da UI é imediata e óbvia.