Guia
Vai refazer seu site? Extraia o design system dele primeiro
Uma reconstrução, um rebranding ou a troca de framework é o momento em que um sistema de design se perde sem ninguém notar. As cores vivem em CSS antigo, a escala tipográfica na cabeça de alguém, os estados dos botões em um componente que ninguém quer abrir.
Extraia seu site atual como DESIGN.md antes de mudar qualquer coisa. Você ganha uma base escrita para o novo projeto, que seu time e seu agente de código conseguem ler.
Escrito para times planejando uma reconstrução, um rebranding ou uma migração. Atualizado em .
O que você vai ter
- Um DESIGN.md do seu site atual, com commit feito antes da primeira linha da reconstrução.
- Uma visão clara do que o arquivo registrou e do que ficou de fora.
- Uma checklist do que conferir à mão: assets, estados, animações, breakpoints e páginas que exigem login.
- Um jeito de comparar o site novo com o antigo quando você terminar.
Quando fazer isso
- Uma troca de framework. Mesmo visual, nova stack. Com o DESIGN.md, seu agente de código reconstrói os componentes com os valores exatos em vez de ler folhas de estilo antigas.
- Um rebranding. Registre o sistema antigo primeiro, para saber exatamente quais cores, fontes e raios mudam e quais ficam.
- Uma passagem de bastão. Uma nova agência ou um novo time recebe um arquivo que descreve como o site é hoje, em vez de um tour pelo código.
Passos
Extraia o site no ar antes de mudar qualquer coisa
Cole a URL de produção na página inicial do Design Extractor e faça uma extração Pro. Precisa ser uma página pública: a extração carrega a página como um visitante, então localhost e páginas que exigem login não funcionam.
Faça commit dele como base
Salve como DESIGN.md no novo repositório e faça commit antes de a reconstrução começar. Agora ele registra como o site era naquele dia.
Leia a seção Known Gaps
O fim do arquivo lista o que a extração não conseguiu registrar. Cada item ali é algo para conferir à mão.
Confira o que um DESIGN.md não consegue guardar
Assets, telas com login, animações e os outros itens abaixo. Adicione notas ao arquivo conforme avança.
Construa com base nele
Aponte seu agente de código para o arquivo, como mostra o guia de Claude Code e Cursor, e revise cada tela nova com base nele.
O que o arquivo registrou de Stripe
Para ver o que você recebe, veja o DESIGN.md de Stripe na galeria. A extração Pro registrou 5 páginas de stripe.com: /nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales. Uma extração do seu próprio site gera a mesma estrutura.
| Cores | 21 tokens, cada um com sua função |
|---|---|
| Tipografia | 17 estilos em Sohne |
| Raios | 10 tokens |
| Espaçamento | 62 tokens |
| Componentes | 71 receitas em HTML e CSS. Passaram na verificação contra a página ao vivo: 44. Sinalizadas ou impossíveis de verificar, cada uma com o motivo: 27 |
| Seções | Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps |
O que ele diz que ficou de fora
O arquivo é honesto sobre os próprios limites. Os primeiros 5 de 11 itens da seção Known Gaps:
## Known Gaps
- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.Extraído do site público de Stripe. Não é uma diretriz oficial da marca. Ler o DESIGN.md completo de Stripe
O seu arquivo vai ter a própria lista. Use essa lista como sua lista de tarefas para as verificações abaixo.
O que conferir à mão
| Item | Por que o arquivo pode deixar passar | O que fazer |
|---|---|---|
| Logo, ícones, imagens | Um DESIGN.md descreve estilos, não arquivos. | Exporte do código atual e guarde junto com o novo. |
| Telas com login | A extração só vê páginas públicas. | Liste como o app difere do site institucional, por exemplo tabelas mais densas ou uma barra lateral. |
| Estados | Hover e foco ficam registrados onde a extração os viu; os estados pressionado, desabilitado e de erro muitas vezes não. | Clique nos formulários e botões e anote os estados que faltam. |
| Animações | Transições e animações são, no máximo, descritas em palavras. | Anote durações e easing a partir do CSS atual. |
| Breakpoints | A extração registra uma largura de desktop e uma de celular. | Confira o layout em tablet e anote onde as colunas mudam. |
| Templates fora da amostra | O modo Pro analisa cerca de cinco páginas principais. | Extraia separadamente qualquer página que pareça diferente, como documentação ou checkout. |
Depois da reconstrução
Quando o site novo estiver no ar, extraia de novo e compare os dois arquivos. Tokens iguais significam que o visual sobreviveu; os que mudaram são o rebranding que você planejou ou um desvio para corrigir.
Qualquer diff de texto mostra os valores hex e os tamanhos que mudaram. O pacote @google/design.md do Google adiciona um comando diff que compara duas versões token por token; a explicação sobre DESIGN.md cobre o formato e as ferramentas. Se você editar o arquivo à mão no caminho, confira no Validador de DESIGN.md.
Arquivos usados neste guia
Abra um para ver um DESIGN.md completo, dos tokens no topo até a seção Known Gaps no fim.
Finanças e fintechStripe
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.
Serviços empresariais e profissionaisShopify
O homepage de marketing da Shopify usa um hero dramático em vídeo de tela cheia, com fundo quase preto (#02090a), que contrasta fortemente com a barra de navegação branca logo acima. A cor de destaque principal é um verde-menta vibrante (#36f4a4), usado com moderação em realces e estados interativos. A tipografia se divide entre NeueHaasGrotesk, para títulos de display e editoriais, e Inter-Variable, para o texto de corpo da interface. Os CTAs usam formatos de pílula totalmente arredondados (border-radius: 9999px). O sistema como um todo é confiante, de alto contraste e aspiracional, pensado para converter visitantes em lojistas.
Desenvolvimento e infraestrutura · Developer Tools & IDEsSupabase
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.
FAQ
Extraia seu sistema de design antes de refazer o site: perguntas
Respostas curtas para o que as pessoas perguntam antes de experimentar.
Não. Um DESIGN.md é um arquivo de texto que descreve estilos: cores, tipografia, espaçamento, raios e receitas de componentes em HTML e CSS. Exporte o logo, os ícones, as ilustrações e as fotos do seu código atual ou dos arquivos de design e guarde tudo junto com ele.
Não. A extração carrega a página pela URL como um visitante faria, então páginas que exigem login, em localhost ou em uma rede privada não são suportadas. Extraia o site público e anote como as telas com login são diferentes.
O modo Pro analisa as principais páginas do site, cerca de cinco, e junta o que encontra em um DESIGN.md. Se um template importante não estiver entre elas, como uma página de documentação ou um checkout, extraia também a URL dessa página e compare os dois arquivos.
Extraia o site novo quando ele estiver no ar e compare os dois arquivos. O pacote @google/design.md do Google tem um comando diff que compara duas versões de um DESIGN.md token por token, e qualquer diff de texto mostra os valores hex e os tamanhos que mudaram.
Registre seu site antes de mudar
Cole a URL de produção. Uma extração Pro analisa as principais páginas e devolve um DESIGN.md.
Guias relacionados
Faça o Claude Code e o Cursor criarem UI com o visual de um site
Extraia um site que você curte, coloque o DESIGN.md dele no seu repositório e aponte seu agente para o arquivo, com os prompts exatos para Claude Code e Cursor.
Sem designer? Adote um design system já testado no seu app
Como escolher um site de referência, o que manter do DESIGN.md dele e o que mudar para que o resultado seja seu, e não uma cópia.
Misture dois sites de referência em um só design para um protótipo
Compare dois arquivos DESIGN.md extraídos, token por token, e junte os dois em uma especificação para um protótipo, à mão ou com seu agente.
Dê ao seu agente de código especificações de design sob demanda com MCP
Conecte o servidor MCP para seu agente extrair sozinho o DESIGN.md de um site, esperar a extração terminar e construir a partir dele.