Guia
Misture dois sites de referência em um só design para um protótipo
“Quero algo entre o Notion e o Stripe.” Clientes pedem protótipos assim o tempo todo. Com um DESIGN.md de cada site, você transforma essa frase em uma especificação concreta: compare os tokens lado a lado, decida qual arquivo manda e junte os dois.
O Design Extractor entrega os dois arquivos. A junção fica por sua conta, à mão ou com seu agente de código, e este guia mostra os dois jeitos.
Escrito para designers e agências criando protótipos. Atualizado em .
O que você vai ter
- Dois arquivos DESIGN.md comparados token por token, para as diferenças ficarem concretas.
- Um plano de junção: um arquivo como base e grupos de tokens nomeados do outro.
- O DESIGN.md combinado, feito à mão ou pelo seu agente com o prompt abaixo.
- Uma verificação de contraste, para a mistura continuar fácil de ler.
Como funciona a mistura
Misturar não é tirar a média. Juntar metade de uma paleta com metade de outra dá um site que não parece nenhum dos dois. O que funciona é um arquivo base mais algumas partes nomeadas do outro:
- A base dá a estrutura: escala tipográfica, espaçamento, raios e receitas de componentes.
- O destaque empresta grupos inteiros, como a família da cor primária ou a fonte de destaque, nunca valores soltos.
Os dois arquivos seguem a especificação de DESIGN.md do Google, então os grupos se alinham: colors, typography, rounded, spacing e components. Veja o que um DESIGN.md contém para a estrutura completa.
Passos
Pegue os dois arquivos
Copie da galeria se estiverem lá, ou cole cada URL na página inicial do Design Extractor e faça uma extração Pro de cada um.
Coloque os dois lado a lado
Compare cores primárias, fundos, fontes, tamanhos de texto e raios, como na tabela abaixo.
Escolha a base
Escolha o site cujo layout e densidade combinam com o protótipo.
Nomeie o que o destaque empresta
Anote como grupos de tokens, por exemplo “a família da cor primária dele”.
Junte à mão ou com seu agente
Os dois jeitos estão abaixo. Salve o resultado como DESIGN.md no repositório do protótipo.
Confira contraste e estrutura
Cole o arquivo combinado no Validador de DESIGN.md gratuito.
Exemplo prático: Notion com Stripe
Dois arquivos reais da galeria: o DESIGN.md de Notion e o DESIGN.md de Stripe. Os dois foram extraídos dos sites públicos das marcas e não são diretrizes oficiais da marca.
| Notion | Stripe | |
|---|---|---|
| Primária | #0075DE | #533AFD |
| Fundo | #FFFFFF | #FFFFFF |
| Texto | #000000 | #061B31 |
| Fontes | Notion Inter, Lyon Text | Sohne |
| Maior texto | hero-display, 96px, peso 600 | hero-display, 56px, peso 500 |
| Texto do corpo | body, 16px, peso 400 | body-lg, 18px, peso 300 |
| Raio do botão | 8px | 4px |
| Tokens de cor | 20 | 21 |
| Receitas de componentes | 14 | 71 |
Um jeito de misturar os dois
Use Notion como base para tipografia, espaçamento, raios e componentes, e deixe Stripe emprestar a família da cor primária (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). É o clássico briefing “nosso layout, a energia deles”.
Confira os números antes de seguir com isso. A primária de Stripe sobre o fundo de Notion tem contraste de 6.1:1. O texto on-primary de Notion sobre a nova primária chega a 6.1:1. Texto de corpo precisa de pelo menos 4.5:1 pelo WCAG AA; texto grande e ícones precisam de 3:1.
Uma armadilha: a primária original de Notion, #0075DE, aparece 65 vezes no arquivo, quase sempre dentro de receitas de componentes. Trocar o token no topo não basta; cada cópia precisa mudar.
---
name: Notion and Stripe prototype
colors:
primary: "#533AFD"
primary-focus: "#5452FB"
primary-bright: "#635BFF"
primary-pressed: "#4032C8"
primary-deep: "#2E2B8C"
primary-soft: "#D6D9FC"
on-primary: "#FFFFFF"
ink: "#000000"
typography:
hero-display:
fontFamily: Notion Inter
fontSize: 96px
fontWeight: 600
lineHeight: 1.05
letterSpacing: -4.6px
body:
fontFamily: Notion Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: normal
rounded:
xs: 4px
sm: 8px
md: 12px
full: 9999px
---Junte à mão
- Copie o arquivo base para DESIGN.md e mude o
namedele. - Em
colors, troque a família da primária da base pelos valores do destaque. - Procure cada valor hex antigo no arquivo inteiro e substitua. As receitas de componentes repetem as cores no CSS, então a lista de tokens sozinha não basta.
- Reescreva os textos das seções Overview e Colors para descrever a mistura, não uma das marcas.
- Confira o arquivo no validador e corrija os avisos de contraste.
Junte com seu agente
Salve os dois arquivos no repositório do protótipo, por exemplo em design/, e dê ao seu agente um prompt que diga qual é a base, quais grupos pegar e quais verificações fazer. Este foi escrito para este guia com os nomes reais dos arquivos e dos tokens.
Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.Revise o que voltar como qualquer outra mudança: leia o diff e depois cole o arquivo no validador. O agente digita; as decisões no prompt continuam sendo suas.
Arquivos usados neste guia
Cada página da galeria tem o DESIGN.md completo para baixar, com a paleta e o espécime tipográfico.
Software e SaaS · Productivity & NotesNotion
A página inicial de marketing da Notion combina uma seção de destaque em azul-marinho profundo (#02093a) com um corpo de página claro (#f6f5f4), usando uma tipografia personalizada (NotionInter) em todos os papéis de texto. O design emprega uma grade de 12 colunas com calhas de 28px, uma linguagem de dupla curvatura (8px para cards, 9999px para pills) e um sistema de sombras progressivas em múltiplas camadas para elementos flutuantes. O azul da marca (#2537b1) conduz os CTAs e os destaques de acento, enquanto uma escala de cinzas semânticos (de gray-200 a gray-900) estrutura toda a hierarquia de texto e superfícies.
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.
Viagens, transporte e logísticaAirbnb
O sistema de design da Airbnb se baseia em uma única fonte variável proprietária (Airbnb Cereal VF), com uma paleta neutra quase monocromática ancorada no cinza-carvão profundo (#222222) e em cinzas claros. O coral-rosa característico da marca, "Rausch" (#ff385c), é reservado exclusivamente para os CTAs principais e para o logotipo. O layout é uma grade responsiva de cards com fotos, com proporção generosa de imagem para texto, cantos arredondados de 20px nos cards e um sistema de sombras ambientes em múltiplas camadas que cria profundidade sutil, sem contraste forte. A barra de busca é um contêiner de destaque em formato de pílula, que reúne a principal ação do usuário.
FAQ
Misture o design de dois sites em um só: perguntas
Respostas curtas para o que as pessoas perguntam antes de experimentar.
Não, não existe um recurso de junção. Cada extração devolve o DESIGN.md de um site. Você junta dois arquivos à mão, ou pede ao seu agente de código para fazer isso com um prompt como o deste guia, e depois revisa o resultado.
Dois, às vezes três. Um arquivo é a base e dá a estrutura: escala tipográfica, espaçamento, raios e componentes. Os outros emprestam uma parte nomeada, como uma família de cores ou uma fonte de destaque. Misturar valores de mais arquivos deixa o resultado com cara de remendo.
Aquele cujo layout e densidade combinam com o protótipo. Se o cliente quer um produto calmo, com cara de documento, e as cores de outro site, o site calmo é a base e o outro empresta as cores, não o contrário.
Cole o arquivo combinado no Validador de DESIGN.md gratuito. Ele verifica a estrutura e aponta cores de texto com contraste insuficiente. Depois, construa uma tela real com ele antes de mostrar ao cliente.
Gere os dois arquivos do seu briefing
Cole a URL de cada site de referência e receba o DESIGN.md dele, pronto para comparar e juntar.
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.
Vai refazer seu site? Extraia o design system dele primeiro
Registre seu site atual como DESIGN.md antes de refazer, fazer rebranding ou trocar de framework, e saiba o que conferir à mão.
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.