gtarpenning/ui-critic

O que ui-critic faz?

Avalia telas da mesma forma que uma pessoa específica avaliaria, usando suas decisões passadas como evidência. O Claude padrão obteve 44-50% de precisão ao prever as escolhas reais de design dessa pessoa, enquanto este procedimento atinge cerca de 60%, em decisões sobre as quais não tinha evidências do mesmo tópico (resultados). É uma forte segunda opinião, não um oráculo.

Pergunta	Ação
Qual design é melhor?	Comparar
O que deve mudar nesta tela ou fluxo?	Criticar
Ensinar, ajustar, errou aqui	Ajustar
A pessoa acabou de decidir entre designs	Registrar

Os scripts ficam ao lado deste arquivo. Execute-os com python3; prepare.py e annotate.py precisam do Pillow (pip install pillow).

Sempre

• Entenda o contexto primeiro. Se você não souber para que serve a tela e para quem é, pergunte uma vez. Caso contrário, declare sua suposição.
• Decisões passadas superam estas regras e superam opiniões gerais de design. O mais novo supera o mais antigo.
• Não raciocine apenas com base em "melhores práticas". Raciocínio geral cuidadoso teve desempenho abaixo do acaso nas decisões desta pessoa, porque argumenta a favor de mais informações, rótulos e contagens. Argumente com base no que eles realmente escolheram.
• Não generalize uma preferência além de sua evidência. "Menos" em uma lista não significa "menos" em todo lugar. Eles escolheram uma imagem de mapa em vez de um chip de texto mais curto, e adicionaram fotos e notas a uma etapa de comparação, porque isso permite que as pessoas reconheçam coisas mais rápido.
• Comece pela resposta. Veredito primeiro, depois detalhes. Seu relatório segue a mesma divulgação progressiva que você está avaliando.

Comparar

1. Preparar. python3 scripts/prepare.py --out <tmp> <imagens...>, depois use as cópias preparadas. Para um fluxo, cada design é uma lista ordenada de telas.

2. Obter evidências. Leia taste/taste.md. Execute python3 scripts/cases.py --context "<para que serve esta tela>" --k 4.

3. Julgar duas vezes, às cegas. Crie dois subagentes sem contexto compartilhado, usando o prompt em references/judge.md. Um vê os designs na ordem X, Y rotulados como A, B; o outro vê Y, X. Use Sonnet: Opus custou várias vezes mais e não obteve pontuação melhor. Forneça a cada um os caminhos das imagens do caso e diga para Ler cada imagem. Não diga qual design você favorece, quem fez qual ou qual é mais novo.

   Mais de dois designs: compare os dois de aparência mais forte em pares, depois o vencedor contra o próximo. Não peça uma classificação de uma só vez.

4. Decidir.

   • Ambos escolhem o mesmo design: esse é o veredito.
   • Eles divergem: diga muito próximo para decidir, apresente o melhor argumento de cada lado em uma linha e nomeie a questão decisiva para a pessoa. Não desempate você mesmo.

5. Olhe além das opções. Se ambos os designs compartilharem uma falha, ou o perdedor tiver uma ideia que vale a pena manter, proponha a versão mesclada em uma ou duas frases. Vencedores anteriores frequentemente vieram exatamente disso.

6. Relatar.

   **B.** <uma frase: a diferença que decide.>
   Confiança: ambas as ordens concordaram (não é prova: um modelo ou evidência diferente ainda pode mudar) / muito próximo para decidir
   - Por quê: <as diferenças decisivas, citando as decisões passadas que ecoam>
   - Vale a pena manter de A: <se houver>
   - Melhor que ambos: <se houver>
   

   Adicione uma sobreposição com caixas dos problemas restantes do vencedor apenas se for solicitado.

Criticar

1. Preparar as telas como acima e anote o tamanho em pixels de cada uma. As coordenadas só se alinham nas cópias preparadas.
2. Obter evidências. Leia taste/taste.md e execute cases.py --k 4, depois Leia ambas as imagens de cada caso antes de olhar para as novas telas. As pontuações abaixo pressupõem que você as viu.
3. Revisar, nesta ordem:
   • Qual é a única coisa para a qual alguém veio a esta tela? O que eles devem entender de relance?
   • Vá elemento por elemento: ele merece seu lugar aqui, ou poderia estar a um toque de distância? Algo é dito duas vezes? O mesmo tipo de coisa é desenhado de duas maneiras diferentes, nesta tela ou em outro lugar do aplicativo? Uma segunda ação está competindo com a principal? Uma imagem seria compreendida mais rápido do que as palavras?
   • Para um fluxo, pergunte também: uma coisa aberta se parece com o que você tocou? Alguma etapa é um beco sem saída?
4. Cortar. No máximo 3 descobertas, a mais importante primeiro. Remova acessibilidade genérica, polimento genérico e qualquer coisa que você não possa apontar. Se o design for bom, diga isso e não relate nada. Encher com problemas menores é uma falha. Antes de finalizar, verifique se cada descoberta não desfaz uma decisão passada.
5. Desenhar. Escreva findings.json ao lado das telas preparadas, com caixas como pixels absolutos apertados [x1, y1, x2, y2] na cópia preparada:

   {"veredito": "Uma frase.",
    "telas": [{"caminho": "/abs/preparada.png", "rótulo": "Início"}],
    "descobertas": [{"tela": 0, "caixa": [40, 120, 300, 180], "gravidade": "alta", "título": "...", "porquê": "...", "correção": "..."}]}
   

   Execute python3 scripts/annotate.py findings.json --out <tmp>. Leia cada .annotated.png e verifique se cada caixa está sobre o que sua descoberta descreve. Se uma estiver errada, corrija os números e execute novamente. Uma caixa em torno de um cartão inteiro é aceitável quando a descoberta é sobre o cartão.
6. Relatar o veredito, as descobertas e os caminhos para report.html e as imagens anotadas.

Registrar uma decisão

Quando a pessoa escolhe entre designs ou expressa uma preferência ao olhar para telas, ofereça-se para registrar: python3 scripts/record.py --context "..." --vencedor a.png --perdedor b.png --motivo "as palavras deles" --tópico <slug-curto>. Use as palavras deles para o motivo. É assim que a habilidade melhora, e uma frase de "porquê" vale mais do que várias escolhas não explicadas.

Ajustar

Inicie python3 scripts/tune.py, execute-o em segundo plano e forneça à pessoa a URL. Ele tem quatro abas:

• Escolher: escolha entre designs com as teclas de seta. Cerca de 5 minutos.
• Erros: onde o avaliador discorda deles e seu argumento. Eles mantêm sua opinião ou dizem que o avaliador está certo.
• Regras: edite taste/taste.md.
• Pontuação: reavalia, incluindo o quão consistentes são as próprias escolhas deles.

Após escolhas ou edições, execute python3 scripts/distill.py para reconstruir taste/taste.md a partir de todas as decisões. Consulte references/tuning.md para obter os números e para usar isso com o gosto de outra pessoa.