Design Extractor: extensão do Chrome
A extensão do Chrome do Design Extractor transforma o site da sua aba atual em um DESIGN.md: um arquivo de sistema de design com as cores, a tipografia, o espaçamento, as formas e as regras de componentes do site, escrito para agentes de código como Claude Code, Cursor e Copilot. Um clique na barra de ferramentas, sem URL para colar.
Instalação gratuita. Cada extração consome créditos do seu saldo pré-pago, pelo mesmo preço do site.
O que ela faz
Um DESIGN.md a partir da aba aberta
Extrai a página da sua aba
Um clique envia o endereço da aba aberta para a mesma extração do formulário da página inicial. O modo Pro também analisa as páginas principais do site, então o resultado reflete o site inteiro, não uma única tela.
Escreve um sistema de design completo
Tokens em YAML para cores, tipografia, espaçamento e formas, mais as oito seções do formato DESIGN.md: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components e Do's and Don'ts.
Uma receita para cada componente
Os componentes que ela escolhe na página, como o cabeçalho, botões, campos e cards, vêm cada um como HTML e CSS enxutos, conferidos com o site ao vivo ou sinalizados com o motivo.
Mesma conta, mesmos créditos
A extensão usa a sessão que você já tem em design-extractor.com. Sem segundo login, e o popup mostra o seu saldo de créditos.
Como funciona
Três passos da aba ao DESIGN.md
Adicione ao Chrome e fixe a extensão
Instale pela Chrome Web Store e fixe pelo ícone de quebra-cabeça. Ela pede acesso a design-extractor.com e à aba ativa, nada mais. Entre na sua conta no site uma vez; o popup usa essa sessão.
Abra uma página pública e clique em Extract this page
Escolha um modo no popup e inicie a extração. O progresso aparece no popup enquanto ela roda, e você pode continuar navegando.
Abra o DESIGN.md
Open result leva você ao DESIGN.md no site. Ele também fica salvo em Minhas extrações, onde você copia, baixa ou edita o arquivo antes de colocá-lo no seu repositório.
Detalhes de instalação, login, créditos e limites atuais estão no guia de configuração da extensão. Prefere colar uma URL? A mesma extração funciona pela página inicial.
Comparação
O que ela acrescenta em relação ao DESIGN.md Style Extractor do TypeUI
O DESIGN.md Style Extractor do TypeUI é uma extensão gratuita e open source que preenche o template próprio do TypeUI com os estilos da página da sua aba. A extensão do Design Extractor acrescenta:
Um DESIGN.md que segue a especificação do Google
Tokens no front matter em YAML e as seções canônicas na ordem da especificação. Confira qualquer arquivo com o Validador de DESIGN.md gratuito.
Uma receita para cada componente que ela escolhe
HTML e CSS enxutos para o cabeçalho, botões, campos, cards e mais, cada um conferido com o site ao vivo por uma correspondência estrutural e uma comparação de pixels, ou sinalizado com o motivo.
Sites com restrição regional
Quando um site bloqueia visitantes de alguns países, a extração pode passar por um navegador em outro país. Uma extração a partir de outro país custa o preço do modo Pro mais uma taxa adicional de 6 em créditos (16 créditos no total).
A mesma conta e os mesmos créditos do site
Toda extração fica salva em Minhas extrações, onde você edita, copia ou baixa o arquivo, e o seu agente pode lê-lo via MCP.
Verificado em com a versão 0.4.0, o README e o código-fonte e a página na Chrome Web Store da extensão.
| Aspecto | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| Como lê o site | Nossos servidores abrem o endereço da página em um navegador e analisam a página renderizada. O modo Pro também analisa as páginas principais do site. | Lê os estilos computados de até 280 elementos visíveis da página aberta na sua aba, dentro do seu navegador. |
| O que o resultado segue | A especificação DESIGN.md do Google: tokens no front matter em YAML e as seções canônicas na ordem da especificação. | O template de DESIGN.md próprio do TypeUI (Mission, Brand, Style Foundations, Rules e mais), sem front matter em YAML, ou um SKILL.md. |
| Componentes | Uma receita de HTML e CSS enxutos para cada componente que ela escolhe na página, conferida com o site ao vivo por uma correspondência estrutural e uma comparação de pixels, ou sinalizada com o motivo. | Uma contagem por tipo de componente, dentro de orientações gerais sobre componentes. O resultado não é comparado com a página renderizada. |
| Para onde vai o resultado | Fica salvo em Minhas extrações no site, onde você pode editar, copiar ou baixar. | Aparece no popup, onde você copia o texto ou baixa como arquivo. |
| Páginas que consegue ler | Somente páginas públicas. Páginas que exigem login, em localhost ou em uma rede privada ainda não são suportadas. | A página aberta na sua aba, incluindo páginas em que você está logado, já que ela lê essa página diretamente. |
| Preço | Instalação gratuita. As extrações consomem créditos pré-pagos. | Gratuita e open source (MIT). |
Escolha a extensão do Design Extractor se você precisa de um DESIGN.md que segue a especificação do Google, com uma receita para cada componente conferida com o site ao vivo, salvo na sua conta. A comparação completa está em TypeUI vs Design Extractor.
FAQ
Perguntas sobre a extensão do Chrome
Respostas curtas sobre como instalar a extensão, o que ela envia e quanto custa.
A instalação é gratuita. Cada extração consome créditos do seu saldo pré-pago, pelo mesmo preço do site. Os pacotes começam em US$ 5 por 50 créditos, não há assinatura e os créditos nunca expiram. Se uma extração falhar por um problema do nosso lado, os créditos são reembolsados.
Só o endereço da aba atual e o modo que você escolheu, quando você clica em Extract this page. Ela nunca lê o conteúdo da página, não roda em segundo plano nas páginas que você visita e não contém nenhuma ferramenta de análise.
Ainda não. Nossos servidores capturam a página a partir do endereço dela, então a página precisa ser pública. Páginas que exigem login, em localhost ou em uma rede privada não são suportadas. A extensão está disponível só para o Chrome.
Não. O popup usa a sessão com que você entrou em design-extractor.com. Se você não estiver logado, ele mostra um botão Sign in que abre o site. Sair pelo popup também encerra a sua sessão no site.
Qualquer agente que leia arquivos do seu repositório. Salve o DESIGN.md junto com o seu código e indique o arquivo ao Claude Code, Cursor, GitHub Copilot, Codex, Windsurf ou Google Stitch como referência de estilo para novas interfaces.
Extensões como o DESIGN.md Style Extractor do TypeUI leem os estilos computados no seu navegador e preenchem um template próprio com os valores. O Design Extractor escreve um DESIGN.md que segue a especificação do Google, com uma receita de HTML e CSS para cada componente que escolhe na página, conferida com o site ao vivo ou sinalizada com o motivo, e salva o arquivo na sua conta.
Gere um DESIGN.md a partir da aba aberta
Instalação gratuita. Cada extração consome créditos do seu saldo pré-pago, pelo mesmo preço do site.