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 — nunca 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. Nada de 'nota de UX' vaga — 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 dizer 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 — o revisor sabe 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; 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.