Design Audit

Audite o design de qualquer site: cores, tipografia, ícones, grid, espaçamentos e acessibilidade WCAG. Exporta relatório HTML e SVG.

Design Audit é uma ferramenta profissional para auditar o design de qualquer site diretamente no navegador. ━━━━━━━━━━━━━━━━━━━━━━━━━━ O QUE ELA FAZ ━━━━━━━━━━━━━━━━━━━━━━━━━━ Clique em "Rodar Auditoria" para analisar a página atual. Ao final, exporte um relatório HTML completo com 7 abas ou SVGs individuais por categoria. ━━━━━━━━━━━━━━━━━━━━━━━━━━ 6 TIPOS DE AUDITORIA ━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 CORES Extrai todas as cores usadas no site (texto, fundo, borda), identifica a paleta real, detecta inconsistências e mostra frequência de uso. 🔤 TIPOGRAFIA Mapeia todas as famílias de fontes, tamanhos, pesos e estilos. Identifica a escala tipográfica e inconsistências de uso. 🖼️ ÍCONES Captura todos os ícones SVG e imagens usados, com screenshot de cada elemento. Detecta inconsistências de estilo e tamanho. 📐 GRID & LAYOUT Analisa o sistema de grid, containers, breakpoints e padrões de layout usados. Identifica se há um sistema de grid consistente ou improvisado. ↕️ ESPAÇAMENTOS Extrai a escala de espaçamentos utilizada (margins, paddings, gaps), detecta valores inconsistentes e mapeia o sistema de espaçamento. ♿ ACESSIBILIDADE (WCAG) Executa auditoria de acessibilidade via axe-core. Categoriza violações por severidade (crítico, sério, moderado, leve), identifica elementos problemáticos com highlight visual na página e fornece recomendações de correção. ━━━━━━━━━━━━━━━━━━━━━━━━━━ COMO FUNCIONA ━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Abra o painel lateral clicando no ícone da extensão 2. Navegue até o site que deseja auditar 3. Clique em "Rodar Auditoria" 4. Visualize os resultados no painel 5. Exporte o relatório HTML consolidado com 7 abas ou SVGs individuais Os dados ficam armazenados localmente no seu navegador. Nada é enviado para servidores externos — toda a análise é feita localmente. ━━━━━━━━━━━━━━━━━━━━━━━━━━ EXPORTAÇÃO ━━━━━━━━━━━━━━━━━━━━━━━━━━ • Relatório HTML consolidado com 7 abas (Visão Geral + 6 auditorias) • SVG individual por categoria de auditoria • Relatório abre diretamente no navegador sem servidor ━━━━━━━━━━━━━━━━━━━━━━━━━━ VERSÃO PRO ━━━━━━━━━━━━━━━━━━━━━━━━━━ A versão gratuita inclui 5 das 6 auditorias. A auditoria de Acessibilidade completa (com análise axe-core, categorização WCAG e highlight visual) está disponível na versão PRO via assinatura mensal. ━━━━━━━━━━━━━━━━━━━━━━━━━━ REQUISITOS ━━━━━━━━━━━━━━━━━━━━━━━━━━ • Chrome 114 ou superior (necessário para Side Panel API) • Funciona em qualquer site https:// • Não funciona em páginas internas do Chrome (chrome://)