# Extrator de estilos de design de sites Captura uma página pública e exporta cores, tipografia, espaçamentos e componentes observados com uma imagem. > Página canônica: https://elysiatools.com/pt/tools/website-design-style-extractor - **Categoria:** Design - **Palavras-chave:** estilo de site, tokens de design, CSS, tipografia, paleta de cores, captura de tela ## Visão geral Renderiza uma página pública no Chromium sem IA. Escolha computador (1440 × 1000) ou celular (390 × 844), preferência clara ou escura e uma espera adicional de 0–3000 ms. O ZIP inclui design.md, screenshot.png, tokens.json e tokens.css; o Markdown incorpora o PNG e é autossuficiente. A captura cobre a janela fixa. A análise examina até 2000 elementos DOM e coleta até 1000 elementos renderizados visíveis, inclusive abaixo da primeira tela, sem rolagem automática. Cores, pilhas de fontes CSS, espaçamentos, bordas, raios, sombras, componentes e propriedades personalizadas legíveis são observações, não o sistema de design original. As pilhas CSS não comprovam a fonte realmente usada. As frequências contam declarações CSS amostradas, não área pintada, funções de marca nem conformidade de acessibilidade. São permitidos apenas endereços públicos HTTP na porta 80 e HTTPS na porta 443, sem credenciais. Limites por captura: 40 segundos, 30 MiB de tráfego de rede e 200 solicitações, com até 8 MiB por documento HTML; recursos bloqueados e limites de amostragem podem reduzir a cobertura. O ambiente isolado desativa pop-ups, envio de formulários, downloads, conexões WebSocket e workers em segundo plano; o conteúdo que depende desses recursos pode diferir do exibido em um navegador normal. Sem login, aceitação de cookies, solução de CAPTCHA, cliques ou inspeção de quadros de outra origem. A demonstração integrada usa a extração real do Chromium offline com toda a rede bloqueada. ## Entradas - **Origem** (select) - **URL do site** (text) - **Janela de visualização** (select) - **Esquema de cores** (select) - **Formato de saída** (select) - **Espera adicional (ms)** (number) ## Quando usar - Ao realizar benchmarking visual ou auditoria de estilo de páginas públicas de referência. - Ao documentar e catalogar paletas, tipografia e raios de borda sem inspecionar elementos manualmente. - Ao verificar a adaptação visual de layouts nos modos claro e escuro em resoluções desktop ou celular. ## Como funciona - Informe uma URL pública (HTTP porta 80 ou HTTPS porta 443) ou opte pela demonstração integrada offline. - Selecione a resolução da janela (computador ou celular), a preferência de esquema de cores (claro ou escuro) e o tempo de espera de renderização. - O Chromium isolado carrega a página, tira uma captura de tela fixa e examina até 2000 nós do DOM para extrair estilos de até 1000 elementos visíveis. - Baixe os arquivos resultantes como um pacote ZIP completo (contendo design.md, screenshot.png, tokens.json e tokens.css) ou como um documento Markdown autossuficiente. ## Casos de uso - Mapeamento ágil de variáveis CSS e tokens visuais para reconstrução ou padronização de interfaces. - Auditoria visual de folhas de estilo em temas claro e escuro para projetos responsivos. - Coleta de referências tipográficas e paletas cromáticas reais de sites públicos para documentação de design. ## Perguntas frequentes ### A ferramenta faz login ou aceita banners de cookies automaticamente? Não. O ambiente é estritamente isolado e não realiza cliques, autenticação nem solução de CAPTCHAs. ### Quais arquivos vêm dentro do pacote ZIP? O ZIP inclui o relatório descritivo `design.md`, a imagem `screenshot.png`, os dados brutos `tokens.json` e as variáveis `tokens.css`. ### A captura de tela registra a página inteira com rolagem longa? A captura em PNG cobre apenas a janela fixa escolhida, embora o extrator examine elementos renderizados situados abaixo da primeira tela. ### Como as famílias de fontes são identificadas? O extrator lê a pilha de fontes declarada no CSS computado, sem identificar qual arquivo de fonte específico foi renderizado pelo sistema. ### Quais são os limites técnicos por captura? Cada execução aceita até 40 segundos, 200 solicitações de rede, 30 MiB de tráfego total e documentos HTML de até 8 MiB. ## Ferramentas relacionadas - [Conversor de cores CMYK](https://elysiatools.com/pt/tools/cmyk-converter): Converte cores entre HEX, RGB, HSL e CMYK. - [Conversor de espacos de cor](https://elysiatools.com/pt/tools/color-space-converter): Converte uma cor entre HEX, RGB, HSL, CIELAB e Display-P3 com saida CSS e verificacao de gamut. - [Visualizador de Easing e Animação CSS](https://elysiatools.com/pt/tools/css-easing-visualizer): Visualiza uma curva de easing cubic-bezier do CSS, pré-visualiza em posição/opacidade/escala, escolhe predefinições e exporta CSS - [Conversor de Cores OKLCH](https://elysiatools.com/pt/tools/oklch-color-converter): Converte entre HEX, RGB, HSL, OKLCH e Display-P3 com a matemática do CSS Color 4, com leitura de luminosidade/croma/matiz, verificação de gamut sRGB e Display-P3, e sugestão de recorte fora do gamut - [Verificador de contraste de paleta acessivel](https://elysiatools.com/pt/tools/accessible-color-palette-contrast-checker): Audita combinacoes de cores segundo WCAG 2.1 AA e AAA e sugere ajustes - [Conversor Adobe RGB para HEX](https://elysiatools.com/pt/tools/adobe-rgb-to-hex-converter): Converter valores de cor Adobe RGB para formato HEX para design web - [Cores Analógicas](https://elysiatools.com/pt/tools/color-analogous): Gerar esquemas de cores análogas harmoniosas com cores adjacentes na roda de cores, criando combinações unificadas e pacíficas - [Complemento de Cor](https://elysiatools.com/pt/tools/color-complement): Encontrar cores complementares e criar esquemas harmoniosos com relacionamentos triádicos, tetraédricos e análogos ## Exemplos - [Exemplos do Ant Design](https://elysiatools.com/pt/samples/ant-design): Exemplos de componentes Ant Design - Linguagem de design UI de classe empresarial e biblioteca React UI com um rico conjunto de componentes de alta qualidade - [Amostras de Extrator de Log de Alterações](https://elysiatools.com/pt/samples/changelog-extractor): Vários formatos de log de alterações para testar ferramentas de análise e extração - [Exemplos de Extrator de Links Markdown](https://elysiatools.com/pt/samples/markdown-with-links): Documentos Markdown de amostra com vários tipos de links para testar a ferramenta de extração de links Markdown - [Exemplos de Extrator de Números de Telefone](https://elysiatools.com/pt/samples/phone-number-extractor): Coleção de texto misto contendo números de telefone de vários países para testes de extração