Revisor de UI/UX com IA: crítica de design pela causa raiz a partir de capturas de tela
2026-08-28
UI/UX Reviewer ajuda você a lançar interfaces mais claras e fáceis de usar ao interpretar uma captura de tela como um líder sênior de design faria — incluindo hierarquia, espaçamento, estados ausentes, acessibilidade e convenções da plataforma. Enquanto a maioria dos feedbacks fica restrita a implicâncias com pixels ou despeja uma lista de verificação automatizada, esta IA diagnostica as causas raiz e informa o que deve ser corrigido primeiro.
✅ Analisa a hierarquia visual, os sistemas de espaçamento e a consistência dos componentes a partir de uma imagem estática ✅ Sinaliza estados vazios, de erro, carregamento e desativados que as capturas de tela ocultam ✅ Verifica contraste, tamanho das áreas de toque e independência de cores com base nos padrões de acessibilidade ✅ Adapta o feedback para designers, desenvolvedores, gerentes de produto e iniciantes
Uma inconsistência de espaçamento raramente é um caso isolado. Geralmente, significa que não existe um sistema de espaçamento. Um rótulo secundário desbotado raramente é apenas “um cinza que você deveria escurecer” — muitas vezes, é um problema de escala tipográfica e contraste que se repetirá em todas as telas. Essa é a diferença entre uma revisão baseada em lista de pendências e uma revisão conduzida por uma liderança de design.
Para entender por que essa distinção importa, vale observar como os produtos realmente prejudicam as pessoas usuárias hoje — e por que a maioria dos processos de revisão nunca detecta as falhas que custam mais caro.
Resposta rápida: o que é o UI/UX Reviewer?
O UI/UX Reviewer é um crítico de design com IA que analisa capturas de tela para diagnosticar hierarquia, espaçamento, estados ausentes e problemas de acessibilidade — e então prescreve correções para as causas raiz. Ele avalia a tela em relação à sua finalidade, não a uma preferência estética genérica.
Principais recursos:
- Diagnóstico de hierarquia visual, tipografia, cores e espaçamento baseado em grade de 8 px
- Clareza da interação: affordances, CTAs e histórias completas de estados dos componentes
- Revisão de acessibilidade alinhada aos princípios da WCAG, não a uma lista de verificação adicionada posteriormente
- Crítica consciente da plataforma para convenções de iOS, Android, web e desktop
- Descobertas classificadas por gravidade, com próximos passos concretos no nível do sistema
Por que a maioria das revisões de UI não identifica os problemas que as pessoas realmente enfrentam
As interfaces continuam ficando mais densas. A avaliação da WebAIM de 2026 sobre um milhão de páginas iniciais encontrou uma média de 1.437 elementos por página — um salto de 22,5% em apenas um ano. Mais elementos significam mais oportunidades para a hierarquia entrar em colapso, os rótulos desaparecerem e o contraste falhar.
A acessibilidade é a versão mais mensurável desse colapso:
56,1 erros por página — média de erros de acessibilidade detectados, um aumento de 10,1% em relação a 2025
83,9% — dessas páginas iniciais falharam apenas no critério de texto com baixo contraste
Os seis tipos recorrentes de falha — baixo contraste, ausência de alternativas textuais para imagens, campos de entrada sem rótulo, links vazios, botões vazios e ausência do idioma do documento — ainda respondem pela maior parte dos erros detectados automaticamente. A WebAIM informa que 96% dos erros detectados se concentram nessas categorias. As ferramentas automatizadas de verificação são úteis nesse ponto. Mas também são incompletas.
A estrutura de métodos de pesquisa da Nielsen Norman Group estabelece uma distinção clara entre o que as pessoas fazem e o que uma ferramenta consegue contabilizar. Os scanners quantitativos respondem a perguntas como “quantas falhas de contraste existem”. Eles não conseguem responder se a ação principal está visualmente mais fraca do que um chip secundário, se um estado vazio nunca foi projetado ou se os filtros de um dashboard estão competindo com os dados que deveriam organizar. Isso é uma crítica qualitativa e consciente da intenção — o tipo de trabalho para o qual revisores seniores são contratados e que a maioria das equipes só recebe uma vez, tarde demais e sob pressão de prazo.
O custo humano não é teórico. Estima-se que 1,3 bilhão de pessoas vivam com alguma deficiência, e os processos judiciais relacionados à acessibilidade nos Estados Unidos continuam sendo um risco real de conformidade. Enquanto isso, a WCAG 2.2 acrescentou critérios de sucesso voltados para áreas de toque em dispositivos móveis, visibilidade do foco, alternativas ao arraste e autenticação que não bloqueia gerenciadores de senhas — padrões que muitos produtos lançados ainda não incorporaram.
Mas obter uma revisão que realmente melhore o produto continua sendo frustrantemente difícil:
- O feedback chega tarde demais. A crítica geralmente aparece depois que a engenharia já está no meio da implementação, quando desfazer um sistema de espaçamento ou um padrão de navegação se torna caro.
- As listas de verificação confundem sintomas com sistemas. “Deixe isto 8 px mais apertado” não corrige as próximas 40 telas se não houver uma linha de base de 4/8 px.
- As capturas de tela ocultam a UX. Estados vazios, de erro, carregamento, desativados e de transbordamento são onde os produtos falham — e raramente aparecem no mockup do caminho feliz.
- Ferramentas e gosto estético não se entendem. Desenvolvedores recebem observações estéticas que não conseguem implementar; designers recebem proporções de contraste sem um diagnóstico de hierarquia; gerentes de produto recebem um mar de implicâncias com a mesma prioridade.
É exatamente para isso que uma revisão de design sênior, nativa de capturas de tela, foi criada.
Por que o UI/UX Reviewer
O UI/UX Reviewer trata cada upload como uma crítica de design, não como uma verificação de lint. Primeiro, ele interpreta a intenção — o que é a tela, para quem ela foi criada e o que a pessoa usuária precisa realizar — e depois avalia a execução em relação a essa intenção. Um login minimalista e um dashboard operacional repleto de dados não são avaliados com a mesma régua.
| Abordagem tradicional | UI/UX Reviewer |
|---|---|
| Esperar dias pela disponibilidade de um designer sênior | Enviar uma captura de tela e receber uma revisão priorizada na mesma sessão |
| Scanners automatizados detectam contraste e rótulos ausentes | Diagnostica hierarquia, affordances, textos e estados que os scanners não conseguem ver |
| Observações sobre pixels sem um sistema subjacente | Identifica a causa raiz — escala tipográfica, grade de espaçamento ou biblioteca de componentes ausente |
| Uma lista genérica de gravidade | Crítico / alto / médio / baixo, ordenados pelo impacto na tarefa |
| O mesmo tom para todos os públicos | Adapta a análise para designer, desenvolvedor, gerente de produto ou iniciante |
A revisão é específica. O contraste é discutido em proporções e termos da WCAG, não como “este cinza parece claro”. As áreas de toque são verificadas em relação a orientações de plataforma, como o mínimo de 44×44 pt da Apple e os fundamentos de acessibilidade do Material 3. Estados ausentes são apontados como descobertas, não inventados por suposição.
Hierarquia antes da decoração
Tamanho, peso, cor, posição, proximidade e elevação devem organizar a atenção. Se um selo de desconto chama mais atenção do que o botão de finalização da compra, a tela não está apenas “carregada” — a hierarquia está invertida. O revisor começa por esse tipo de problema porque ele impede a compreensão.
Estados como uma entrega de primeira classe
Padrão, hover, ativo, foco, desativado, carregamento, vazio, erro e sucesso formam a história completa de um componente. Estados ausentes são a descoberta especializada mais comum. Um formulário que só existe em sua condição perfeita e preenchida não está concluído, mesmo que os pixels estejam bem polidos.
Acessibilidade como usabilidade
A WCAG 2.2 é organizada em torno de quatro princípios: perceptível, operável, compreensível e robusto. Os novos critérios da versão 2.2 abrangem foco não obstruído, tamanho mínimo de áreas de toque, movimentos de arraste, ajuda consistente, entrada redundante e autenticação acessível. O revisor aplica esses princípios de forma diagnóstica — sem deixar que a cor seja a única portadora de significado, garantindo que a ordem do foco faça sentido e sem exigir movimento — em vez de simplesmente recitar a especificação.
Convenções da plataforma, não uma “UI limpa” genérica
As Diretrizes de Interface Humana do iOS, o Material 3 e as convenções de formulários e navegadores da web são contratos diferentes. Uma aba inferior que inverte o tratamento dos ícones selecionados e não selecionados parecerá errada para as pessoas usuárias de iOS, mesmo que esteja visualmente organizada. O revisor identifica a plataforma a partir de pistas visuais quando você não a informa.
Exemplos de prompts:
«Revise esta tela de checkout do iOS. É um MVP. Diga o que impediria uma pessoa que usa o produto pela primeira vez de efetuar o pagamento.»
«Este dashboard SaaS é para gerentes de operações. Faça uma crítica da hierarquia, da densidade e de tudo o que deixei de projetar para estados vazios e de erro.»
«Sou desenvolvedor e estou implementando este frame do Figma em React. Forneça observações conscientes da implementação — tokens de espaçamento, contraste e áreas de toque.»
Como funciona
Você não precisa de um documento completo do sistema de design para começar. Uma captura de tela nítida e uma frase de contexto são suficientes. O revisor de IA analisa o que está visível, sinaliza o que não pode ser avaliado a partir de uma imagem estática e classifica o que deve ser alterado primeiro.
Etapa 1: envie a tela que você realmente precisa avaliar
Capture a UI real ou o mockup de alta fidelidade — a janela inteira, não apenas um botão recortado com precisão. Capturas borradas, pequenas ou muito comprimidas passam por um controle de qualidade: será solicitado um registro melhor, em vez de uma revisão confiante de pixels que não estão disponíveis.
«Aqui está o hero da página inicial em produção no desktop. Ignore o refinamento do texto de marketing; diga se a hierarquia e o contraste do CTA se sustentam.»
Etapa 2: informe a intenção, a plataforma e o estágio
Uma frase muda o padrão da crítica. Um MVP recebe observações sobre clareza estrutural; um produto pré-lançamento recebe análises tanto da estrutura quanto do refinamento. Informe a plataforma (iOS, Android, web ou desktop) e a tarefa que a pessoa usuária está tentando concluir.
«Tela de configurações do Android, Material 3, pré-lançamento. As pessoas usuárias não conseguem encontrar os controles de notificação.»
Etapa 3: leia a crítica priorizada
Espere uma análise da primeira impressão, pontos realmente fortes (específicos, não apenas “parece limpo”) e, em seguida, problemas organizados por gravidade. Cada descoberta inclui o que está errado, o princípio por trás do problema e uma correção concreta. Lacunas do sistema — ausência de escala de espaçamento, rampa tipográfica ou biblioteca de componentes — são identificadas como raízes, não como um amontoado de implicâncias desconectadas.
Etapa 4: preencha o que a captura de tela não consegue mostrar
Peça os estados vazio, de erro, carregamento e transbordamento. Envie uma segunda tela do mesmo fluxo para verificar a consistência. Para iterações de uma mesma tela, solicite uma comparação explícita entre antes e depois: o que melhorou, o que regrediu e o que ainda está em aberto.
«Este é o mesmo dashboard depois que adicionamos uma grade de 8 px. O que melhorou e o que ainda está prejudicando a capacidade de escaneamento?»
Etapa 5: transforme as descobertas em um sistema, não em um patch para uma única tela
Se a revisão disser que seus espaçamentos de 12 px estão brigando com um modelo mental de 8 px, a correção é um conjunto de tokens de espaçamento — não uma única margem. Se a cor estiver carregando todo o significado dos estados, a correção é combinar forma e rótulo, aplicando isso em todos os lugares onde o estado aparecer. Quando o produto também precisar de um sistema visual documentado para evitar a próxima rodada de desvios, o Brand Kit Generator pode transformar essas decisões em paletas, tipografia e diretrizes que toda a equipe poderá reutilizar.
Experimente o UI/UX Reviewer gratuitamente — não é necessário cartão de crédito.
Resultados e casos de uso
📊 Pessoa fundadora revisando um MVP antes que ele se torne rígido
Cenário: Uma startup de duas pessoas está prestes a colocar um fluxo de onboarding web diante das primeiras 50 pessoas usuárias. As telas parecem “limpas” no Figma. Ninguém verificou os estados vazios, os textos de erro ou se o botão principal continua funcionando na janela de um laptop de tamanho médio.
Abordagem tradicional: Contratar um designer fracionário, esperar uma semana e receber uma apresentação com 40 observações sem diferenciação — ou lançar o produto e aprender com a perda de usuários.
UI/UX Reviewer: Envie as três telas principais com o contexto “MVP web para consumidores; a tarefa é criar uma conta e perceber o valor em menos de dois minutos”. Você receberá uma lista classificada por gravidade: competição entre CTAs no seletor de planos, ausência de uma affordance para pular, falha de contraste no texto auxiliar e ausência de um estado de erro de senha. As 2 ou 3 mudanças de maior impacto ficam explícitas.
- Detecta antipadrões de onboarding (muitas etapas visíveis, valor atrasado por formulários)
- Separa problemas que bloqueiam o lançamento de questões de refinamento
- Oferece à pessoa fundadora uma linguagem para orientar a engenharia sem fingir que ela é uma gerente de design
💼 Designer de produto realizando o controle de qualidade antes da entrega
Cenário: Uma pessoa designer de produto é responsável por um dashboard de analytics SaaS. A engenharia quer as especificações amanhã. A pessoa designer sente que a densidade está errada, mas quer uma segunda avaliação em nível de liderança antes que o arquivo seja tratado como fonte de verdade.
Abordagem tradicional: Enviar uma mensagem no Slack para uma pessoa principal de design ocupada e torcer para receber comentários assíncronos sobre alguns frames.
UI/UX Reviewer: Envie o dashboard, os filtros e o estado vazio. A revisão aponta um layout dominado por gráficos sem a apresentação de insights acionáveis, elementos de filtro competindo com o conteúdo e ações nas linhas que não atendem às expectativas de tamanho de área de toque do critério de tamanho de área de toque da WCAG 2.2. Os pontos fortes — divulgação progressiva no nível dos cards e alinhamento tabular numérico consistente — são identificados para que não sejam redesenhados sem necessidade.
- Crítica sistêmica em nível de pares, em vez de observações baseadas em gosto
- Consistência entre telas quando você envia mais de um frame
- Uma lista de pendências que pode ser convertida em tickets por gravidade
Se o próximo passo for explorar um layout alternativo, e não apenas anotar o atual, o UI/UX Prototype Generator pode produzir uma tela realista para iOS, Android ou web que já reflita a hierarquia recomendada e os padrões da plataforma.
📱 Pessoa engenheira mobile verificando a implementação em relação ao mockup — no celular
Cenário: Uma pessoa engenheira de iOS implementou uma tela de registro de treinos a partir de um mockup. Em um iPhone físico, as ações secundárias ficam nos cantos superiores, fora do alcance; o tratamento do ícone da aba selecionada parece invertido; e as linhas da lista podem ser tocadas, mas parecem estáticas visualmente. A pessoa quer feedback consciente da implementação durante o deslocamento, usando o dispositivo que está no bolso.
Abordagem tradicional: Enviar a captura para um canal de design e esperar. Ou lançar o produto e observar as falhas de descoberta de gestos surgirem nas gravações de sessão.
UI/UX Reviewer: Envie a captura do dispositivo iOS ou Android. Peça observações com base nas HIG ou no Material, um mapeamento da zona do polegar e problemas relacionados a áreas de toque de 44 pt/48 dp. A revisão distingue “o mockup estava errado” de “a implementação se desviou” e sinaliza conflitos com a barra de status e problemas de área segura que os frames do Figma para desktop frequentemente não revelam.
- Funciona com paridade completa de recursos na web, no iOS e no Android, permitindo que a revisão aconteça no mesmo celular que revelou o problema
- Observações adaptadas para desenvolvedores: áreas de toque, foco e estados dos componentes, não preferências estéticas sem explicação
- Verificações das convenções da plataforma com base na Apple HIG e no Material 3
Quando o marketing precisar de um visual para landing page que corresponda à UI do produto que você acabou de aprimorar, o Graphic Designer poderá produzir peças para web e campanhas consistentes com a marca, para que a vitrine e o aplicativo não pareçam mais dois produtos diferentes.
Perguntas frequentes
O UI/UX Reviewer é gratuito?
Sim. Você pode usar o UI/UX Reviewer no plano gratuito com todos os recursos principais e uso mensal limitado. Os planos pagos aumentam o uso — o Plus começa em US$ 20/mês — caso você revise fluxos completos a cada sprint. Não é necessário cartão de crédito para experimentar.
Qual é a diferença entre o UI/UX Reviewer e um scanner de acessibilidade?
Os scanners são excelentes para falhas quantificáveis: contraste, ausência de alt e campos de entrada sem rótulo. A própria metodologia da WebAIM observa que as ferramentas automatizadas não conseguem detectar todas as falhas da WCAG. Este revisor também sinaliza esses problemas e acrescenta o que os scanners não conseguem ver — hierarquia invertida, ausência de estados vazios, de erro e de carregamento, affordances fracas, violações das convenções da plataforma e a avaliação de se a tela cumpre a tarefa declarada.
Ele pode revisar capturas de tela de aplicativos mobile, não apenas sites?
Sim. Quando você não especifica uma plataforma, ele infere se é iOS, Android, web ou desktop a partir de pistas visuais e aplica as convenções correspondentes: barras de navegação e áreas seguras no iOS, padrões do Material 3 no Android e comportamento de formulários e da janela de visualização na web. Capturas de tela de dispositivos são entradas válidas; informe isso se quiser dar ênfase à zona do polegar e ao tamanho das áreas de toque.
O UI/UX Reviewer funciona em um celular?
Sim. As revisões funcionam com paridade completa de recursos na web, no iOS e no Android, incluindo conversão de voz em texto caso você prefira falar sobre uma tela a digitar. Isso é importante quando o defeito só aparece em um dispositivo real.
Qual é a precisão da crítica de design?
As descobertas são fundamentadas em princípios estabelecidos — agrupamento da Gestalt, Lei de Fitts, WCAG 2.2 e orientações HIG/Material da plataforma — e não em gostos sem explicação. A preferência estilística é identificada como preferência. As afirmações sobre contraste permanecem condicionais quando não é possível ler os valores hexadecimais exatos em uma captura de tela comprimida. O revisor solicitará uma imagem melhor ou um estado ausente, em vez de inventar aquilo que não consegue ver.
Ele pode revisar um fluxo inteiro ou apenas uma tela?
Ambos. Uma captura de tela gera uma revisão focada. Várias telas acrescentam consistência entre telas, lógica do fluxo e lacunas do sistema de design (espaçamento, tipografia e componentes). As iterações da mesma tela podem ser comparadas explicitamente para que você saiba o que realmente melhorou.
Conclusão
A maioria dos produtos não falha porque o raio de um canto está errado. Eles falham porque a hierarquia não orienta o olhar, porque os estados vazios e de erro nunca foram projetados, porque o contraste e o tamanho das áreas de toque excluem uma grande parcela das pessoas usuárias e porque ninguém com discernimento em nível de liderança examinou a tela antes do lançamento.
O UI/UX Reviewer oferece esse discernimento sob demanda: você envia a captura de tela e recebe uma crítica classificada por gravidade, com correções para as causas raiz em vez de um amontoado de sintomas. Use-o no MVP que está prestes a se consolidar, no dashboard antes da entrega ou na captura do dispositivo que já parece um pouco errada.
Experimente o UI/UX Reviewer agora. Explore mais em Jenova.
Para desenvolvedores: o UI/UX Reviewer está disponível programaticamente pela API da Jenova — integre a crítica de design baseada em capturas de tela ao seu aplicativo com uma única chamada de API. Documentação completa →