Guia
Sem designer? Adote um design system já testado no seu app
Você reconhece um bom design quando vê, mas não consegue criar um do zero. E nem precisa. Escolha um produto que você admira, pegue o sistema de design dele como DESIGN.md, mude as partes que o tornam deles, e seu agente de código tem um sistema testado para construir o seu app.
Testado quer dizer validado com usuários reais: tipografia fácil de ler, espaçamento que respira, botões que parecem botões. Você mantém isso e coloca a sua própria identidade.
Escrito para fundadores solo e times pequenos. Atualizado em .
O que você vai ter
- Uma lista curta do que faz um bom site de referência, para você escolher um que combine com o seu produto.
- Um DESIGN.md para colocar no seu repositório como seu sistema de design inicial.
- Uma divisão clara entre o que manter (escala tipográfica, espaçamento, raios, formato dos componentes) e o que mudar (cor da marca, logo, fontes, tom de voz).
- Um prompt que faz a troca para você, e uma verificação de que o resultado continua fácil de ler.
Como escolher um site de referência
O site de onde você pega o sistema define quase toda a sensação do seu app, então invista dez minutos aqui. Uma boa referência tem estas características:
- O mesmo tipo de produto. Um dashboard se inspira bem em outro dashboard, não em uma loja de moda.
- Uma densidade parecida. Se o seu app é feito de formulários e tabelas, escolha um site com formulários e tabelas, não um só hero grande.
- Uma cor de ação bem definida. Quando uma única cor marca o que é clicável, mudar a marca significa trocar só essa família de cores.
- Tipografia que dá para ler. Abra o site no celular e leia um parágrafo. Se a leitura for confortável, vale a pena levar a escala tipográfica.
- Claro ou escuro, do jeito que você quer. Transformar um sistema pensado para o modo escuro em um claro é um redesign, não um ajuste.
- Um visual que não seja a própria marca. Se você reconheceria o site só pela cor, teria que mudar coisa demais.
A galeria de DESIGN.md pode ser filtrada por categoria, o que facilita comparar alguns candidatos.
Passos
Selecione dois ou três sites
Use as características acima. Capturas de tela das telas que você gosta ajudam a decidir depois.
Pegue o DESIGN.md do seu favorito
Copie da página dele na 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 devolve um arquivo com cores, tipografia, espaçamento, raios e receitas de componentes. Ainda não conhece o formato? Leia o que é um DESIGN.md.
Deixe com a sua cara
Mude a família de cores da marca, as fontes se forem comerciais, o nome e o tom de voz. O prompt abaixo faz tudo de uma vez.
Coloque no seu repositório e aponte seu agente para ele
Salve como DESIGN.md na raiz do repositório. O guia de Claude Code e Cursor mostra a referência que você deve adicionar.
Confira
Cole o arquivo editado no Validador de DESIGN.md gratuito. Ele verifica a estrutura e aponta cores de texto com contraste insuficiente.
Exemplo prático: Notion
Digamos que você goste da sensação de Notion. Aqui está o sistema de design dele como o DESIGN.md da galeria registra, e o que você manteria e mudaria.
Cores
Tipografia
Formas
Os primeiros itens do DESIGN.md de Notion, renderizados a partir do arquivo: 12 cores, 6 estilos tipográficos e 4 raios. Clique em uma amostra para copiar o valor hex.
O que manter e o que mudar
| Parte do arquivo | No DESIGN.md de Notion | O que fazer |
|---|---|---|
| Escala tipográfica | de hero-display, 96px, peso 600 até body, 16px, peso 400 | Manter |
| Raios | xs 4px, sm 8px, md 12px, full 9999px | Manter |
| Neutros | surface #FFFFFF, ink #000000 | Manter |
| Formato dos componentes | 14 receitas de componentes com tamanhos, padding, bordas e estados | Manter |
| Cor da marca | primary #0075DE, primary-focus #0075DE, primary-link #097FE8, primary-pressed #005BAB, primary-tint #E6F3FE | Trocar pela sua cor e as variações dela |
| Fontes | Notion Inter, Lyon Text | Manter só se forem de uso livre, senão usar uma substituta |
| Nome | name: Notion | Trocar pelo nome do seu produto |
| Tom de voz | A seção Overview descreve a personalidade da marca | Reescrever em uma ou duas frases sobre a sua |
| Logo e imagens | Não está no arquivo | Usar seu próprio logo, ícones e ilustrações |
### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.Extraído do site público de Notion. Não é uma diretriz oficial da marca. Ler o DESIGN.md completo de Notion
Deixe com a sua cara usando um prompt
Seu agente de código pode fazer a edição. Abra o repositório com o DESIGN.md e cole um prompt como este, com o seu nome, a sua cor e a sua frase no lugar dos da Acme. Ele foi escrito para este guia com os nomes reais dos tokens de Notion.
Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.Depois, leia o diff. Os valores hex mudam em dois lugares: nos tokens de colors no topo e no CSS de cada receita de componente mais abaixo. Os dois precisam mudar juntos, ou os botões ficam com a cor antiga.
Por que não copiar uma marca inteira
Um sistema emprestado é um ponto de partida, não um disfarce. Lançar o visual de outra empresa sem mudanças atrapalha mais do que ajuda:
- As pessoas percebem. Um app que parece um produto famoso com outro nome soa como cópia, e isso custa confiança.
- A identidade não é sua para pegar. Logos, nomes de produto, cores características, ilustrações e textos pertencem à marca. Espaçamento, tamanhos de texto e raios são o ofício compartilhado com o qual você pode aprender.
- Fontes têm licença. Uma fonte comercial no site deles não vem com licença para o seu.
- Você vai querer evoluir o sistema. Quando as cores e o tom de voz forem seus, criar novas telas parece construir o seu produto, não o de outra pessoa.
A regra prática: mantenha a estrutura, mude a identidade. No mínimo, troque a cor da marca, o logo, qualquer fonte comercial e o tom de voz. Os arquivos da galeria são extraídos do site público de cada marca, não são diretrizes oficiais da marca, e o mesmo vale para tudo o que você extrair.
Arquivos usados neste guia
Bons pontos de partida da galeria. Cada página tem o DESIGN.md completo, 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.
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.
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.
FAQ
Adote um sistema de design sem ter designer: perguntas
Respostas curtas para o que as pessoas perguntam antes de experimentar.
Usar o espaçamento, os tamanhos de texto e os raios de borda de um site como ponto de partida é como a maioria das interfaces é feita. Copiar a identidade não é aceitável: o logo, o nome, a cor característica da marca, as ilustrações ou os textos. Mude tudo isso, e só use uma fonte comercial se tiver a licença. Os arquivos da galeria são extraídos de sites públicos, não são diretrizes oficiais da marca.
Muitas marcas usam fontes comerciais ou próprias. O DESIGN.md cita cada família nos tokens de tipografia, e a seção Typography geralmente sugere uma substituta open source, com notas sobre espaçamento entre letras e pesos. Use a substituta ou escolha uma fonte gratuita com proporções parecidas.
Ler e copiar um arquivo da galeria não custa nada. Extrair um site à sua escolha usa créditos pré-pagos: uma extração Pro custa 10 créditos e os pacotes começam em $5 for 50 credits. Os créditos não expiram e não há assinatura.
Não. É um arquivo de texto: cores são valores hex, fontes são nomes, tamanhos são pixels. Mude os valores, ou peça ao seu agente de código para fazer a mudança, e depois confira o resultado no Validador de DESIGN.md gratuito, que também aponta cores de texto com contraste insuficiente.
Achou um site que você admira?
Cole a URL dele e receba o sistema de design como DESIGN.md, pronto para você adaptar.
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.
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.
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.