Como Extrair um Design System de Qualquer Site com um Único Comando no Terminal

Isso já aconteceu com você—você olha para a landing page ou serviço web de outra pessoa e pensa: "Que fontes eles escolheram, que espaçamento usaram, qual paleta de cores estão usando?" Normalmente, nesse ponto, você abre o DevTools, começa o monótono clique pelos elementos, copia os códigos hexadecimais e navega pelos estilos computados. Se o projeto for grande, essa rotina pode levar algumas horas.

Recentemente, encontrei o dembrandt, um utilitário que automatiza esse processo de forma absurda. Você fornece uma URL e ele gera design tokens estruturados: paleta, tipografia, grid de espaçamento, sombras, raios de borda e animações.

O Que É e Para Quem Serve

dembrandt é um utilitário de linha de comando e biblioteca TypeScript criado para Node.js. Ele inicializa um motor de navegador via Playwright, navega até a página especificada, extrai os estilos computados do DOM e os organiza de forma organizada.

A ferramenta atende vários casos de uso:

• Auditorias rápidas e engenharia reversa da UI de outras pessoas.
• Criar design tokens para um projeto legado que nunca teve um design system explícito.
• Monitorar "desvio" de estilos em pipelines de CI/CD.
• Exportar contexto para assistentes de IA como Cursor ou Claude Code.

Como Começar

Você precisará do Node.js 18 ou superior. Como depende do Playwright sem binários empacotados, o primeiro passo é baixar o Chromium:

npm install -g dembrandt
dembrandt install-browser
dembrandt dembrandt.com

Se preferir não instalar globalmente, o npx funciona perfeitamente:

npx dembrandt install-browser
npx dembrandt example.com

O navegador é baixado uma vez no cache compartilhado do sistema do Playwright, e então o utilitário está pronto para uso.

O Que Tem Por Dentro: Formatos e Integrações

A ferramenta não apenas despeja um monte de propriedades CSS no console. Ela agrupa tipografia por tamanho e peso, analisa a frequência de uso de cores e calcula níveis de confiança para as regras que descobre.

Exportando Tokens para Padrões W3C e Tailwind

Se você está usando Style Dictionary ou Tokens Studio no Figma, os tokens podem ser exportados para as especificações W3C DTCG:

dembrandt example.com --dtcg

Para desenvolvedores frontend que trabalham com Tailwind CSS moderno, existe uma flag --tailwind que gera uma diretiva @theme para a versão quatro do framework, contendo apenas os valores realmente em uso.

Verificação de Contraste WCAG

A flag --wcag aciona uma auditoria de acessibilidade. O utilitário identifica pares reais de texto-fundo no DOM e os classifica contra os níveis de conformidade WCAG 2.1 AA e AAA. Isso é útil para verificar rapidamente a acessibilidade da interface sem extensões pesadas.

Rastreando Mudanças de Estilo no CI

Um dos casos de uso mais convincentes é prevenir mudanças acidentais de estilo em pull requests. Você pode capturar um snapshot de tokens no seu repositório e validar implantações de preview no GitHub Actions:

uses: dembrandt/[email protected]
  with:
    url: https://preview.example.com
    baseline: .dembrandt/baseline.json

Se alguém modificar acidentalmente a cor primária da marca ou atrapalhar a escala de espaçamento, a action falhará e deixará um comentário no PR listando os tokens alterados. Para outros sistemas de CI, o utilitário retorna um código de saída diferente de zero ao comparar via a flag --compare baseline.json.

Conectando a Agentes de IA via Protocolo MCP

Os desenvolvedores adicionaram suporte ao Model Context Protocol (MCP). Isso significa que o utilitário pode se conectar diretamente ao Claude Code, Cursor ou Windsurf:

claude mcp add --transport stdio dembrandt -- npx -y --package dembrandt dembrandt-mcp

Depois disso, a rede neural recebe um conjunto de ferramentas (get_color_palette, get_typography, get_spacing, generate_design_md) e pode estudar independentemente a interface e escrever código baseado nos tokens atuais do site.

Possíveis Desafios

O README descreve honestamente limitações técnicas que vale a pena ter em mente:

• Dark mode não é detectado automaticamente—você precisa forçar com a flag --dark-mode.
• Sites baseados em Canvas ou WebGL não podem ser analisados porque não há árvore DOM convencional.
• SPAs pesadas construídas em React ou Vue precisam de tempo para hidratar, então é melhor passar a flag --slow antecipadamente para aumentar os timeouts.
• O viewport mobile é ativado separadamente via o parâmetro --mobile.

Conclusão

dembrandt preenche a lacuna entre o código web real e a documentação formal de design system. Se você precisa limpar estilos dispersos em um projeto existente, conectar verificação automática de estilos no CI ou fornecer a um assistente de IA o contexto atual sobre seu frontend, a ferramenta definitivamente vale a pena guardar. Graças ao seu código open-source (MIT), é fácil incorporá-lo aos seus scripts de build internos.