Validador UX/UI
Analisa as páginas como um especialista em UX/UI: dá notas, mostra os problemas marcados no print e
sugere melhorias. O resultado é um relatório .md que abre no visualizador, onde você pode editar, gerar
PDF e abrir a pasta.
Como usar
- Clique em Validar UX no topo (ou Exportar → Validação UX/UI).
- Escolha as páginas. A página aberta já vem marcada.
- Opcional: escreva o contexto — quem usa a tela e qual o objetivo principal (ex.: "atendentes cadastram clientes o dia todo"). A análise fica mais certeira.
- Deixe marcada a opção Análise do especialista com o Claude (recomendado) e clique em Validar.
O relatório abre na hora com as medições automáticas. Enquanto isso, o Claude completa a análise do especialista (leva de 1 a 3 minutos) e o documento atualiza sozinho quando ele termina.
O que o app mede sozinho
| Critério | O que verifica |
|---|---|
| Contraste (WCAG 2.2 AA) | Texto com contraste abaixo de 4,5:1 (ou 3:1 para texto grande) |
| Legibilidade | Textos menores que 12px |
| Áreas de clique | Botões e links menores que 24×24px |
| Formulários | Campos sem rótulo (só com placeholder também conta) |
| Imagens | Imagens sem texto alternativo |
| Consistência tipográfica | Quantas fontes e tamanhos de texto diferentes |
| Estrutura de títulos | Um título principal e níveis em ordem |
Cada problema recebe um número (ex.: P2-3 = página 2, problema 3) e aparece marcado no print com uma caixa colorida:
- 🟥 contraste
- 🟪 campo sem rótulo
- 🟧 área de clique pequena
- 🟦 texto pequeno
- 🟩 imagem sem texto alternativo
Cada problema também mostra a Regra de UX que ele quebra (ex.: color-contrast, form-labels,
web-target-size). As regras vêm de uma referência reconhecida de UX/UI (UI/UX Pro Max), embutida no app.
O que o Claude acrescenta
- Nota final de 0 a 100.
- Notas de 0 a 10 para: hierarquia visual, clareza das ações, feedback, navegação, prevenção de erros, consistência, estética e acessibilidade.
- Pontos fortes.
- Problemas por gravidade, com o motivo (a regra de UX que se aplica, heurística de Nielsen ou WCAG) e a recomendação.
- Checklist de entrega: cada item marcado como atende ✅, não atende ❌ ou não se aplica.
- Ganhos rápidos e próximos passos.
Se o Claude não estiver logado, você recebe só as medições automáticas.
No visualizador
- Aplicar sugestões — escreve no chat um pedido para o Claude aplicar no mockup as recomendações que você escolher (ex.: "E1 e E3").
- Observação — acrescenta um comentário seu ao relatório.
- Editar — edita o texto do relatório. Clique em Salvar para voltar à visualização.
- Gerar PDF — cria o PDF com as imagens, na mesma pasta.
- Abrir pasta — mostra o relatório no Explorer, com as pastas
imagens/edados/. - Use a lista no topo para abrir validações anteriores. Também dá para abrir por Exportar → Validações já feitas.
Os relatórios ficam em exports/validacao-AAAAMMDD-HHMM/ dentro do projeto.