Como usar design.md para criar sites incríveis no Claude

O que é um design.md

Um briefing de design que a IA consegue seguir de verdade.

design.md é um arquivo de texto simples que documenta o sistema visual de um produto: paleta de cores, par de fontes, escala de espaçamento, estilo de botão, de card, de formulário. Nada muito diferente do que já vimos no guia de landing page com IA — a diferença é que aqui, em vez de você descrever a identidade da sua marca do zero, você parte do design.md de um produto real que já tem a estética que você quer.

É basicamente um vocabulário visual compartilhado entre você e o Claude. Em vez de "moderno", "clean" ou "premium" — adjetivos que cada pessoa (e cada IA) interpreta de um jeito — o design.md fala em números e nomes concretos: --accent: #ff5a1f, font-family: 'Anton', padding: 24px. O Claude não precisa adivinhar o que "clean" significa pra você.

O que é o styles.refero.design

Uma biblioteca de design systems reais, já em formato pra IA.

O Refero Styles reúne mais de duas mil referências visuais extraídas de sites de produtos conhecidos, cada uma com sua paleta de cores, tipografia, espaçamento e componentes já documentados — e, o mais importante pra esse guia, com um arquivo DESIGN.md pronto pra exportar. Dá pra filtrar por Trending, Popular ou Newest, e a ideia central do site é simples: em vez de pedir pra IA desenhar um estilo do zero, você mostra pra ela um estilo que já existe e funciona.

Passo a passo: do styles.refero.design até a sua página

Quatro etapas, a maior parte delas é escolher e copiar.

1. Entre em styles.refero.design e procure um estilo que combine com o que você quer pro seu produto — filtre por categoria ou navegue pelos destaques.
2. Abra a referência escolhida e copie o conteúdo do arquivo DESIGN.md dela.
3. Salve esse conteúdo como design.md na raiz do seu projeto — do lado do CLAUDE.md, se você já usa um.
4. Peça pro Claude Code construir a página lendo esse arquivo como guia de estilo.

Leia o arquivo design.md na raiz do projeto e use como guia de estilo: cores,
tipografia, espaçamento e componentes descritos ali.

Crie a página <nome-da-pagina>.html com esta estrutura:
1. <descreva as seções que você quer: hero, formulário, cards, depoimentos etc.>

Siga à risca as diretrizes visuais do design.md. Onde ele não especificar algo
(um componente que não existe no arquivo, por exemplo), mantenha consistência
com o tom geral em vez de inventar um estilo novo.

Conteúdo da página (não copie de nenhuma referência visual, escreva a partir
daqui): <cole aqui os textos e informações reais do seu produto>

Adaptando o design.md pra sua marca

Um design.md pronto é ponto de partida, não é pra sair igual ao original.

Como o arquivo veio de outro produto, ele carrega escolhas que talvez não sejam as suas — a cor de destaque, a fonte de título, o nível de formalidade sugerido pelos nomes das classes. Depois de colar o design.md no projeto, vale uma segunda rodada só pra ajustar isso:

O design.md é a base visual da página, mas ajuste estes pontos antes de
seguir pra identidade final da minha marca:

- Cor de destaque: troque pela minha cor principal, <sua cor em hex>
- Fonte de título: <sua fonte, ou "mantenha a atual" se já gostar>
- Tom geral: <descreva em 2-3 frases o tom da sua marca — sério, divertido,
  técnico, premium etc.>

Mantenha o resto do design.md como está: espaçamento, formato dos
componentes, estrutura de grid. A ideia é herdar o esqueleto visual, não
recomeçar do zero.

Depois desse ajuste, salve o resultado como o seu próprio design.md — agora ele já é a referência da sua marca, e serve pra toda página nova que você pedir daqui pra frente, do mesmo jeito que o design system do guia anterior.

Notas operacionais

• Um design.md é um ponto de partida. Revise o resultado como design, não como código: as cores combinam com a sua marca? A hierarquia visual faz sentido pro seu conteúdo?
• Não copie textos, imagens ou identidade de marca do site de origem do design.md — só a estrutura visual (cor, tipografia, espaçamento, forma dos componentes) é reaproveitável.
• Guarde o design.md ajustado à sua marca do mesmo jeito que guardaria um design-system.html: cole ele (ou referencie o arquivo) no início de toda conversa nova sobre uma página do mesmo site, pra manter a identidade consistente.
• Se o Refero MCP estiver disponível pra você, ele conecta o agente de IA direto à base de estilos do site — sem precisar copiar e colar o DESIGN.md manualmente a cada vez.