Extract Design: tokens e estrutura sem copiar o site inteiro

ANÁLISE EDITORIAL

Extract Design transforma uma página web autorizada em um inventário de cores, tipografia, espaçamento, sombras, componentes e tokens. A proposta é útil quando uma equipe precisa entender uma linguagem visual existente antes de documentá-la ou reconstruí-la. Ela não concede direito de copiar um site, não prova conformidade com acessibilidade e não substitui a revisão de design, código ou licença.

Esta curadoria fixa o arquivo skills/extract-design/SKILL.md do repositório Manavarya09/design-extract. O repositório tinha 3.695 estrelas na consulta de 26/08/2026, estava ativo e usava licença MIT. O uso real depende do pacote externo designlang, do Node.js e de um navegador automatizado. Por isso, o primeiro teste recomendado aqui é menor do que o exemplo mais ambicioso do arquivo original.

Ilustração editorial exclusiva do Bastidores da IA. Não é captura de tela, interface real, site copiado, relatório executado nem prova de autorização.

O que esta Skill faz de verdade

A Skill ensina um agente a executar o designlang sobre uma URL, ler o arquivo Markdown gerado e apresentar uma síntese da linguagem visual. O fluxo lista paleta, famílias tipográficas, escala de espaçamento, padrões de componentes e uma pontuação calculada pela ferramenta. Também descreve saídas como tokens no formato da Design Tokens Community Group, variáveis CSS, configuração Tailwind, tema JavaScript, variáveis para Figma e uma prévia HTML.

Isso é diferente de desenhar um diagrama ou criticar uma tela. A Draw.io Skill produz diagramas editáveis, enquanto a Open Design Critique estrutura uma revisão visual. Extract Design observa uma página existente e organiza sinais técnicos para posterior análise. A saída continua sendo uma inferência do software, não a documentação oficial do sistema de design da organização analisada.

O repositório vai além do pequeno arquivo de Skill. Seu código fixado no commit auditado inclui uma CLI, Playwright, formatadores, testes, extensões e outros modos. O ZIP do Bastidores não replica esse programa. Ele preserva apenas instruções e licença para que a instalação funcional continue vindo do mantenedor.

Para quem serve

Ela serve a designers de produto, desenvolvedores de interface e equipes de documentação que trabalham com um site próprio ou têm autorização expressa para analisá-lo. Um caso legítimo é inventariar a página de um produto da própria empresa antes de consolidar tokens dispersos. Outro é comparar uma implementação nova com um ambiente de homologação controlado, registrando diferenças que ainda precisam de revisão humana.

Não é uma licença para clonar o visual de terceiros. Cores isoladas podem não ser protegidas da mesma forma que imagens, textos, marcas, ilustrações ou uma composição distintiva, mas o risco não desaparece. A equipe deve confirmar propriedade, contrato, termos de uso, política de automação, privacidade e finalidade. Se a autorização não estiver clara, use uma página local criada para teste.

Compatibilidade e pré-requisitos

O package.json fixado exige Node.js 20 ou superior e declara dependências como Playwright. O script de pós-instalação tenta instalar Chromium. Isso significa download de dependências, uso de disco, execução de um navegador e acesso de rede. Confirme espaço, política de software e permissão para instalar pacotes antes de executar.

O arquivo SKILL.md auditado declara ferramentas de leitura, escrita, busca de arquivos e shell. Clientes compatíveis com Agent Skills podem carregar essas instruções, mas cada cliente aplica permissões de forma diferente. Consulte a especificação de Agent Skills e revise o diretório onde a Skill será instalada.

Você precisa ainda de uma URL alcançável, um diretório vazio para as saídas e autorização documental sobre a página. Para o primeiro uso, evite login, cookies, cabeçalhos privados, rede corporativa e páginas com dados pessoais. Não rode a ferramenta dentro de um repositório importante sem antes definir uma pasta de saída dedicada.

Instalação recomendada

Na consulta de 26/08/2026, havia uma diferença entre as distribuições. O repositório fixado declarava versão 13.1.0, mas o pacote publicado no npm estava em 12.21.0. O pacote npm foi baixado e inspecionado estaticamente. Seu SKILL.md coincidia com o arquivo do commit, e os comandos básicos usados nesta página estavam presentes. Essa conferência não equivale a executar o programa em produção.

Antes da instalação, execute node --version e confirme uma versão 20 ou superior. Consulte a versão atual com npm view designlang version. Se você pretende reproduzir exatamente esta curadoria, use npx designlang@12.21.0 --help primeiro. Leia a lista de opções e interrompa se o pacote resolvido, o mantenedor ou o comportamento de instalação diferirem do esperado.

O repositório oficial é a referência para código, issues e histórico. A licença MIT fixada permite redistribuir o SKILL.md e a licença, motivo pelo qual o pacote documental local é oferecido. A licença do projeto não transfere direitos sobre qualquer site analisado.

Configuração antes do primeiro uso

Crie uma pasta descartável, por exemplo teste-extract-design, e entre nela. Escolha uma página pública que pertença à sua organização ou um arquivo servido localmente. Defina a saída como ./design-extract-output. Não forneça cookies. Não use --cookie-file, cabeçalhos de autenticação, --screenshots, --depth, --full ou --deep-interact no primeiro teste.

Essa redução é importante porque o programa suporta recursos que ampliam o alcance. A inspeção do código encontrou opções para capturas, navegação interna, cookies, cabeçalhos e interação profunda. Quando ativada, a interação profunda pode abrir menus, abas, acordeões e um diálogo. Embora o código tente limitar o comportamento, qualquer clique automatizado merece avaliação separada em uma página controlada.

Registre URL, data, autorização, versão do pacote, comando, diretório de saída e hash dos arquivos que serão usados como evidência. Se a página muda com frequência, não trate uma execução como verdade permanente. Se houver banners, personalização regional ou fontes carregadas depois, documente o contexto em vez de esconder a incerteza.

Primeiro uso seguro

Com a pasta vazia e uma URL própria, rode npx designlang@12.21.0 https://sua-pagina-autorizada.example --out ./design-extract-output. O domínio do exemplo deve ser substituído pelo alvo autorizado. Observe downloads e avisos. Ao terminar

Leia primeiro o Markdown de linguagem visual e o JSON de tokens. Compare uma amostra de cores e fontes com a página. Depois abra a prévia HTML local, sem publicá-la. Não importe automaticamente Tailwind, variáveis CSS, tema JavaScript ou dados para Figma. Esses artefatos podem conter valores redundantes, nomes frágeis, referências externas ou escolhas que não representam o sistema oficial.

A pontuação de acessibilidade deve ser tratada como triagem. Ela não substitui a WCAG Audit Patterns, teste com tecnologia assistiva, inspeção de foco, leitura do conteúdo e avaliação contextual. O projeto afirma produzir análise de acessibilidade, mas nenhuma ferramenta automatizada consegue confirmar sozinha conformidade integral.

Resultado esperado

Um teste bem controlado termina com uma pasta separada que contém um relatório legível e artefatos de tokens. O resultado esperado é responder perguntas como: quais cores aparecem repetidamente, quais famílias tipográficas foram detectadas, como o espaçamento se distribui e quais padrões de botão ou cartão foram observados. Cada resposta deve conservar a URL e a versão usadas.

O valor editorial está na organização, não na cópia. Uma equipe pode comparar os tokens extraídos com seu repositório oficial, identificar divergências e decidir o que documentar. Se os valores não batem, a conclusão correta é investigar carregamento, tema, breakpoint e estado da página. Não force uma narrativa de fidelidade.

Permissões e riscos

A execução funcional usa rede, inicia Chromium e grava arquivos. O processo vê o conteúdo entregue à sessão de navegador. Cookies ou cabeçalhos podem ampliar esse acesso para áreas autenticadas, por isso ficam fora do primeiro uso. Capturas podem registrar nomes, e-mails, avatares, pedidos, métricas ou outros dados pessoais. Não capture, envie ou publique esse material sem base e autorização.

A opção de profundidade percorre links internos e aumenta tráfego e escopo. A opção de interação profunda pode clicar elementos visíveis. A opção de captura produz imagens sujeitas a direitos e privacidade. APIs opcionais podem ainda introduzir chaves e envio de conteúdo a terceiros. Restrinja permissões, use ambiente de teste, acompanhe o tráfego e pare diante de qualquer efeito não previsto.

Também existe risco de cadeia de suprimentos. npx resolve um pacote remoto, e o pós-instalação baixa um navegador. Fixar a versão reduz variação, mas não elimina o dever de conferir origem, integridade, dependências e avisos. Para uso recorrente, adote cache controlado, lockfile, verificação de pacote e revisão de segurança.

Erros comuns

Chromium não instala. Verifique Node.js, espaço, proxy e política do sistema. Consulte a documentação oficial de navegadores do Playwright. Não desative controles corporativos para contornar o erro.

A página fica incompleta. Aplicações de página única podem carregar fontes e componentes depois. Use a opção de espera apenas após entender o comportamento e continue em alvo autorizado. Não comece aumentando profundidade ou fornecendo cookies.

As cores não representam o produto. Tema escuro, personalização, breakpoint, banner e estado de login mudam o resultado. Repita em estados definidos e compare com tokens oficiais.

O agente promete oito arquivos, mas a versão gera mais ou menos. Leia o --help da versão instalada. O repositório e o npm estavam em versões diferentes nesta curadoria, portanto nomes e quantidade de saídas podem mudar.

A pontuação de acessibilidade parece definitiva. Trate-a como sinal automatizado. Confirme manualmente contraste, foco, semântica, teclado, conteúdo e tecnologias assistivas.

Versão auditada e download local

A curadoria usa o commit f7c2bec6631bca0da6e8f1a0162d1917bbd46c0c, versão 13.1.0 declarada no repositório, pacote npm 12.21.0 e licença MIT. O ZIP local tem SHA-256 6b1116016696501218d96437656e15e6667fe262c5f2cae93e66c5e50b5bd8e5.

O pacote contém somente SKILL.md, LICENSE e ORIGEM.md. Ele não contém designlang, Playwright, Chromium, extensões, scripts, dependências, capturas, cookies, chaves, credenciais, dados extraídos ou arquivos de sites. O botão de download local e o botão para o repositório oficial são ações separadas no card da página.

Resultado esperado e limite final

A Skill é útil quando o resultado serve como inventário revisável para um trabalho autorizado. Ela deixa de ser segura quando vira atalho para copiar marca, conteúdo ou componentes de terceiros, quando usa sessão autenticada sem necessidade ou quando publica capturas e tokens sem revisão.

Comece pequeno, registre a versão, mantenha a origem e compare com a documentação real do produto. Se a autorização, a propriedade dos ativos ou o comportamento do navegador forem incertos, não execute. Uma saída bem formatada continua sendo apenas uma observação técnica até que uma pessoa confirme contexto, direitos e qualidade.

Fontes primárias

• Repositório oficial Manavarya09/design-extract, consultado em 26/08/2026.
• Commit auditado f7c2bec6631b.
• Diretório oficial da Skill no commit.
• designlang 12.21.0 no npm.
• Rascunho técnico do formato DTCG.
• Documentação de navegadores do Playwright.