Skip to content
Jordan Goulart

Workflow de IA1 de jun. de 2026

Qualyx: um scorecard de UX com IA, vestido pelo Heurix

Um scorecard de UX que roda uma avaliação heurística de qualquer tela: as 10 heurísticas de Nielsen mais Krug, pontuadas pelo Claude como ponto de partida para um revisor humano. É também o produto que o design system Heurix foi feito para vestir.

#ux#usability-heuristics#claude#ai-evaluation#express#design-systems
Qualyx: um scorecard de UX com IA, vestido pelo Heurix

Brief

Construir uma ferramenta de avaliação de UX que funcione de verdade: cola uma URL, recebe um scorecard heurístico estruturado, confiável o bastante para partir dele. Rápido, repetível e organizado por projeto.

Ideia inicial

Uma avaliação heurística é mecânica no começo (rodar as dez heurísticas, anotar o óbvio) e julgamento no fim. Passo a primeira leitura mecânica para o Claude como baseline e mantenho o veredito humano. O papel da ferramenta é tornar essa primeira passada rápida e consistente, não fingir que é a palavra final.

Decisões

  1. 01A régua é fixa e explícita: as 10 heurísticas de usabilidade de Nielsen, pontuadas uma a uma, com o 'Don't Make Me Think' do Krug como lente sobre todas. Nenhuma 'nota de UX' vaga aqui; cada ponto se liga a uma heurística com nome.
  2. 02Três escopos de avaliação (page, flow, component) mudam o raciocínio do modelo. Um botão isolado não é julgado por 'ajuda e documentação'; o escopo diz ao modelo quais heurísticas são estruturalmente N/A e para declarar isso em voz alta.
  3. 03A IA sugere um ponto de partida, não um veredito final. O system prompt diz isso, a UI enquadra assim, e a confiança é reportada por critério para o revisor saber por onde começar.
  4. 04Uma tela vira avaliável em dois passos: extrair a estrutura HTML (cheerio) e capturar um screenshot (Puppeteer), e então entregar a estrutura ao claude-sonnet-4-6.
  5. 05As avaliações vivem dentro de projetos, um por produto, squad ou cliente, então um scorecard nunca fica órfão. Ele fica no contexto de tudo o que já foi rodado sobre a mesma coisa.
  6. 06Um backend, duas casas. Localmente grava arquivos JSON e screenshots em disco; na Vercel ele detecta sozinho e troca para Upstash Redis + Vercel Blob + @sparticuz/chromium, sem mudar código.
  7. 07Cada superfície é construída com o design system Heurix. EvalRow, SuggestionCard, AIBlock, StatsTile: os organisms vêm do sistema, e o Qualyx só compõe, nunca redefine o estilo.

Conclusão

O Qualyx é o produto que o Heurix vinha insinuando. O EvalRow e o AIBlock existem naquele sistema porque este app precisou deles. Construir os dois como um par valeu a pena: as decisões difíceis de UI foram feitas uma vez, no sistema, e o app ficou fino o suficiente para focar no problema real. Transformar uma tela bagunçada em um baseline heurístico com que um humano pode seguir.

O Qualyx é a resposta a uma pergunta que o design system Heurix vivia levantando. Aquele sistema entrega organisms com nomes estranhamente específicos (`EvalRow`, `SuggestionCard`, `AIBlock`), e este é o app para o qual eles foram batizados. O produto e o sistema foram construídos como um par, e é por isso que o app fica tão fino: as decisões difíceis de interface já vivem no sistema, e o Qualyx apenas as compõe.

A restrição interessante é a que a ferramenta impõe a si mesma. Ela roda as dez heurísticas de Nielsen pelo Claude e devolve uma nota por critério, mas o system prompt, os indicadores de confiança e a UI insistem na mesma coisa: isto é um baseline, não um veredito. Uma avaliação heurística é mecânica no começo e julgamento no fim; o Qualyx automatiza o começo para um humano gastar a atenção no fim.

Componentes ao vivo

O scorecard do Qualyx montado com os componentes reais do design system Heurix. Escolha o escopo, rode a avaliação e veja o baseline da IA — uma sugestão, não um veredito.