CLI que extrai o design system de um site, repositório git ou base de código local para uma pasta de arquivos que o Claude Code pode ler para criar uma UI compatível.
2,4 mil250TypeScriptSem licençaAtualizado há 6 meses
Manavarya09/design-extract
CLI que abre qualquer site em um navegador headless e extrai seu design system como tokens DTCG, configuração do Tailwind, variáveis do Figma e mais.
Alternativa open source a:Figma
- Estrelas
- 4,261
- Forks
- 371
- Issues abertas
- 25
- Último commit
- há 12 dias
O que é?
designlang abre uma URL no Chromium headless via Playwright e lê os estilos computados e o layout do DOM ativo. Com um único comando, gera um conjunto de arquivos com cores, tipografia, espaçamentos, sombras, raios, variáveis CSS, tokens de animação e componentes detectados, incluindo tokens W3C DTCG, um tema do Tailwind, um tema do shadcn/ui e variáveis do Figma para os modos claro e escuro.
Além de extrair tokens brutos, a ferramenta pode percorrer quatro breakpoints responsivos, capturar mudanças nos estados hover, focus e active, calcular a relação de contraste WCAG para pares de primeiro plano e plano de fundo e comparar a consistência entre várias páginas. Também inclui verificações de drift e lint para CI, diffs visuais e um modo para o site inteiro, que combina as páginas em um único sistema canônico.
Pode ser executada como servidor MCP para agentes como Claude Code, Cursor e Windsurf. Também oferece um plugin para Claude Code, uma extensão para Chrome e uma instalação baseada em Node.js com pacote npm. Os emissores para plataformas abrangem iOS SwiftUI, Android Compose, Flutter e WordPress.
Recursos principais
- 01Extrai cores, tipografia, espaçamentos, sombras, raios e variáveis CSS de uma página ativa.
- 02Gera tokens W3C DTCG, configuração do Tailwind, tema do shadcn/ui e variáveis do Figma.
- 03Captura o comportamento responsivo em quatro breakpoints e nos estados hover, focus e active.
- 04Calcula a relação de contraste WCAG para pares de cores de primeiro plano e plano de fundo.
- 05Funciona como servidor MCP para Claude Code, Cursor e Windsurf.
- 06Gera tokens específicos para iOS, Android, Flutter e WordPress.
Casos de uso
- Recriar o visual do site de um concorrente ou de referência como ponto de partida para um design system.
- Gerar temas do Tailwind ou do shadcn/ui a partir de um site existente.
- Fornecer tokens extraídos a agentes de programação com IA para que a interface gerada corresponda a um estilo visual.
- Verificar um site ativo em relação a um arquivo de tokens no CI para detectar drift de design.
Início rápido
- 1
Instale a CLI globalmente
npm i -g designlang - 2
Instale o navegador Chromium uma única vez
designlang install-browser - 3
Extraia o sistema de design de um site
npx designlang https://stripe.com
Antes de usar
- É necessário baixar um navegador Chromium headless antes do primeiro uso.
- Alguns recursos avançados (site, fidelity, dna) são versionados e podem mudar rapidamente.
Tópicos
Perguntas frequentes
- O que é design-extract?
- CLI que abre qualquer site em um navegador headless e extrai seu design system como tokens DTCG, configuração do Tailwind, variáveis do Figma e mais. designlang abre uma URL no Chromium headless via Playwright e lê os estilos computados e o layout do DOM ativo. Com um único comando, gera um conjunto de arquivos com cores, tipografia, espaçamentos, sombras, raios, variáveis CSS, tokens de animação e componentes detectados, incluindo tokens W3C DTCG, um tema do Tailwind, um tema do shadcn/ui e variáveis do Figma para os modos claro e escuro.
- design-extract é gratuito? Qual é a licença?
- design-extract é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- design-extract ainda é mantido?
- Manutenção ativa. O último commit de design-extract foi em 8 de out. de 2026.
- Para que posso usar design-extract?
- Recriar o visual do site de um concorrente ou de referência como ponto de partida para um design system. Gerar temas do Tailwind ou do shadcn/ui a partir de um site existente. Fornecer tokens extraídos a agentes de programação com IA para que a interface gerada corresponda a um estilo visual. Verificar um site ativo em relação a um arquivo de tokens no CI para detectar drift de design.
- Como instalar design-extract?
- Instale a CLI globalmente: npm i -g designlang Instale o navegador Chromium uma única vez: designlang install-browser Extraia o sistema de design de um site: npx designlang https://stripe.com
- Onde consigo design-extract?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Manavarya09/design-extract
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Analisa qualquer site com Playwright e exporta seu sistema de design como configuração do Tailwind v4, componentes React, tokens de design ou relatório DESIGN.md.
815PythonMITAtualizado há 2 meses
Ferramenta de CLI que extrai o sistema de design de um site (cores, tipografia, espaçamento, sombras e componentes) como design tokens W3C em um único comando.
3,7 mil327TypeScriptMITAtualizado há 9 dias
Crawler web open source em Python que transforma qualquer site em Markdown limpo e pronto para LLMs, com extração estruturada baseada em CSS/LLM e uma API hospedada opcional.
85,8 mil8,9 milPythonApache-2.0Atualizado ontem
Coleção de skills para agentes criarem interfaces melhores, com foco em acessibilidade, layout, tipografia, cores, escrita e refinamento visual.
8 mil307MarkdownMITAtualizado há 7 dias
Um kit de instruções e conhecimento que transforma Claude e outros agentes de programação em especialistas em design UX/UI, com tokens DTCG, especificações de componentes, 138 sistemas de design e 52 verificações objetivas.
2,4 mil253JavaScriptMITAtualizado há 22 horas