Faça o Claude Code e o Cursor criarem UI com o visual de um site

Por que um DESIGN.md é melhor que uma captura de tela#

Passos#

1. 1

   Escolha um site com uma interface parecida com o que você está criando

   Telas de produto com densidade parecida funcionam melhor que uma landing page com um hero enorme. Se você está criando um dashboard, escolha um produto que tenha um. Veja primeiro a galeria de DESIGN.md: o arquivo pode já estar lá.

2. 2

   Pegue o DESIGN.md dele

   Copie da página da galeria, ou cole a URL na página inicial do Design Extractor e faça uma extração Pro. O modo Pro analisa as principais páginas do site, e uma extração leva pelo menos um minuto.

3. 3

   Salve como DESIGN.md na raiz do seu repositório

   Coloque ao lado do README.md e do AGENTS.md e faça commit, para que toda branch e o agente de cada pessoa do time leiam o mesmo arquivo.

4. 4

   Aponte seu agente para ele

   Adicione uma referência curta no CLAUDE.md para o Claude Code, ou uma regra de projeto para o Cursor. Os blocos estão abaixo.

5. 5

   Peça a UI nos termos do arquivo

   Cite tokens e componentes no seu prompt (primary, body-md, uma receita de botão) e peça ao agente para listar qualquer valor que não encontrou, em vez de inventar um.

6. 6

   Revise o resultado com base no arquivo

   Confira cores, fontes, raios e estados com o DESIGN.md antes de aceitar a mudança.

Exemplo prático: Linear#

---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

Aponte seu agente para o arquivo#

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Prompts que usam os tokens#

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

Revise o que o agente criou#

• Cores. Procure valores hex no diff. Cada um deve estar no DESIGN.md. Um valor novo geralmente significa que o agente chutou.
• Fontes. Muitas marcas usam fontes comerciais que você não pode distribuir. A seção Typography do arquivo geralmente indica uma substituta open source; confirme que o agente carregou essa, e não um fallback qualquer.
• Raios e espaçamento. Botões e cards devem usar os tokens de arredondamento do arquivo, não um padrão como 8px em tudo.
• Estados. Os estilos de hover e foco fazem parte de cada receita de componente. Navegue pela página com Tab e confira o anel de foco.
• Receitas sinalizadas. Se o arquivo marca uma receita como sinalizada, a geometria dela é uma aproximação. Compare esse componente com o site real.

Se você editar o DESIGN.md à mão, confira o arquivo no Validador de DESIGN.md gratuito antes que seu agente o leia de novo.

Arquivos usados neste guia#

Cada uma destas páginas da galeria tem o DESIGN.md completo para copiar para o seu repositório, com a paleta e o espécime tipográfico.

• 
  Software e SaaS · Productivity & Notes

  Linear

  O design system da Linear é um produto de interface densa, com tema escuro como padrão, pensado para equipes de engenharia. A paleta de superfícies se ancora em preto-quase-puro (#08090a, #0f1011), com tons de cinza escuro em camadas para diferenciar barra lateral, cards e painéis. A tipografia usa exclusivamente Inter Variable, com letter-spacing negativo e preciso em tamanhos de display, e Berkeley Mono para código inline. A linguagem de raio é deliberadamente pequena (2–6px predominante), com formas de pílula reservadas para badges e chips de status. A elevação se expressa por bordas internas sutis de 1px e sombras suaves de baixa opacidade, em vez de sobreposições dramáticas. A cor de CTA principal é o índigo característico da Linear (#5e6ad2), usado no botão Sign Up e em links-chave.

• 
  Finanças e fintech

  Stripe

  A página inicial de marketing da Stripe usa um sistema de design rigorosamente controlado (HDS — Stripe Design System), construído em torno da fonte variável "sohne-var" em pesos leves (300–400), uma paleta de marca que vai do azul-marinho profundo ao índigo, ancorada por #533afd (Stripe Indigo), e um hero com gradiente espectral de largura total, característico da marca. Os componentes têm raio baixo (4–6px), sombras planas ou mínimas e se organizam em uma grade de espaçamento base de 8px. O tom geral é autoritário, mas acessível: infraestrutura financeira comunicada por meio de uma tipografia segura e um uso contido da cor.

• 
  Desenvolvimento e infraestrutura · Developer Tools & IDEs

  Supabase

  Supabase usa um sistema de design com foco no modo escuro, ancorado em um fundo quase preto e profundo (oklch ~0.19) e um verde vibrante como cor de destaque da marca (#3ecf8e / #3fcf8e). A estrutura do layout se organiza em uma grade responsiva de cards de recursos, com Manrope para títulos de destaque e Inter para textos de corpo e elementos de interface. Source Code Pro é usada em todos os contextos de código e monoespaçados. O sistema de cores é construído sobre propriedades personalizadas em oklch, com nomes semânticos. Os cards têm raio de 12px e um tratamento de borda sutil, os botões usam raio de 6 a 8px, e a densidade geral é moderada, com uma grade de espaçamento base de 8px.

Ver todos os exemplos de DESIGN.md