Design Audit

About

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://)