Extrator de Design System

Um clique em qualquer site e você recebe um .zip com tudo: o design system medido, o HTML da página, as folhas de estilo, as imagens, os arquivos de fonte e os componentes isolados para abrir e estudar.

Instalar

Arraste este botão para a sua barra de favoritos:

Extrair design system

Barra de favoritos escondida? Ctrl + Shift + B no Windows, Cmd + Shift + B no Mac. Funciona no Chrome, Edge, Firefox, Brave e Safari.

Plano B, e você vai precisar dele. Copie o código, abra o site que quer analisar, aperte F12, vá na aba Console, cole e dê Enter. O efeito é idêntico, e funciona nos sites onde o favorito não funciona.

Usar

Abra o site que você quer estudar.
Role até o fim da página. Isto não é opcional. Muitos sites só carregam as seções de baixo quando você chega nelas, e o que não carregou não é lido.
Clique no favorito. Um painel aparece no canto com o resumo.
Clique em "Baixar tudo em .zip". Ele busca as imagens e as fontes, o que leva alguns segundos, e mostra o andamento.

Se você quiser só os tokens para colar em um projeto, os botões menores entregam o JSON e o CSS sozinhos, sem esperar o download dos arquivos.

O que vem dentro do zip

Arquivo	Serve para
LEIA-ME.md	O resumo do site em uma tela, a tabela de contraste reprovado e a lista do que não pôde ser capturado, com o motivo de cada caso.
design-system.json	Tudo o que foi medido, em dado estruturado, para comparar sites lado a lado.
tokens.css	Cores, tamanhos e espaços como variáveis CSS, mais a regra do botão principal. Pronto para colar.
pagina.html	O HTML da página como estava na tela no momento do clique.
componentes.html	Botão, cartão, campo e títulos isolados, com o CSS real aplicado. Abra este primeiro: é o mais rápido de entender.
css/	Cada folha de estilo que o navegador deixou ler, em um arquivo.
assets/	As imagens e os arquivos de fonte que o servidor deixou baixar.
inventario.md	Toda imagem da página com o tamanho servido contra o tamanho exibido, e todo @font-face com o font-display de cada um.

Clicou no favorito e não aconteceu nada? O site bloqueia bookmarklets. Alguns sites grandes trazem uma regra de segurança chamada CSP que proíbe o navegador de rodar código vindo de um favorito. Não aparece erro, não aparece aviso, simplesmente nada acontece, e é assim mesmo. Use o plano B do Console: ele passa por essa regra e funciona igual. Vale conferir isso uma vez, com calma, antes de precisar.

Rode duas vezes: largo e estreito

O extrator lê a página do jeito que ela está na sua tela naquele momento. Estreite a janela do navegador até uns 390px de largura e rode de novo. Os dois resultados lado a lado mostram o que o site muda no celular, que é onde quase todo o tráfego está.

O que sai no arquivo

Campo	O que é
cores.papeis	As três cores que importam: fundo, texto e destaque. O destaque é lido do botão principal, não da estatística. Uma cor que aparece uma vez só na página pode ser a mais importante dela.
cores.paleta	Até 24 cores ordenadas por área ocupada na tela, cada uma com o papel que exerce e em quais elementos apareceu.
cores.contraste	Cada bloco de texto medido contra o fundo opaco real dele, no critério WCAG AA. A lista de reprovações vem ordenada da pior para a melhor.
tipografia.escala	Os tamanhos realmente usados, ordenados por volume de texto, com o seletor onde cada um aparece.
espacamento	A unidade base da grade, quando existe uma, e quanto dos valores ela explica.
componentes	Botão, link, campo, cartão e títulos: o estilo completo do maior exemplar visível de cada um, com o contraste dele já calculado.
breakpoints	Os pontos de quebra encontrados no CSS que o navegador deixou ler.

Como ler o resultado

Grade sem grade

Quando o campo consistente vem false, o site não tem sistema de espaçamento: tem valores soltos que por acaso dividem por 4. Não copie isso. Escolha uma grade de 8px e siga ela. É o erro mais comum de quem copia design system: importar a bagunça junto com o acerto.

Contraste reprovado é dado, não opinião

O extrator já entrega o conserto pronto: o seletor, a cor, o fundo e a razão medida. Se o site que você admira reprova em 30 textos, você acabou de descobrir que ele não é tão bom quanto parecia, e que você não deve copiar aquele cinza.

Duas cores para o mesmo papel

Se a mesma cor de destaque aparece em dois tons parecidos, quase sempre é porque um tom não passa de contraste nos dois fundos. Um laranja que funciona sobre azul escuro morre sobre cinza claro. Não é falta de padrão, é a solução para um problema real.

O que o extrator não vê: estados de hover e foco, animações, e conteúdo que só aparece depois de um clique. Além disso, o navegador proíbe ler folha de estilo hospedada em outro domínio, e muitos servidores recusam entregar imagem ou fonte para um script. Nada disso some em silêncio: cada arquivo que ficou de fora aparece no LEIA-ME com a URL e o motivo, para você baixar na mão se precisar. Cor, fonte e espaçamento nunca são afetados, porque vêm do estilo calculado pelo navegador, que funciona sempre.

Sobre o que você faz com o pacote. Medida, proporção e cor não têm dono, e estudar a estrutura de um site bom é como se aprende. Já o texto, as imagens, a marca e o código são de quem os fez. O pacote serve para estudar e para reconstruir com a sua identidade, não para publicar como se fosse seu.

Do JSON para o seu projeto

Extrair é o começo, não o fim. O caminho é este:

Extraia de três a cinco sites do mesmo segmento, não de um só.
Compare os JSON. O que se repete nos cinco é convenção do mercado. O que aparece em um só é assinatura daquela marca.
Copie a estrutura: a proporção da escala de tipos, a grade, o peso do botão, a hierarquia. Troque a identidade: as cores, a família tipográfica, o raio.
Rode o extrator na sua própria página depois de pronta e confira o contraste.

Copiar a paleta inteira de um concorrente deixa você parecido com ele. Copiar as proporções dele deixa você tão sólido quanto ele, com a sua cara.

Extrator de Design System v1.1 · roda inteiro no seu navegador, não envia nada para lugar nenhum, não precisa de instalação nem de conta.