gtarpenning/ui-critic

Was macht ui-critic?

Bewertet Screens so, wie eine bestimmte Person es tun würde, basierend auf ihren früheren Entscheidungen. Ein einfacher Claude erreichte 44–50% bei der Vorhersage der tatsächlichen Designentscheidungen dieser Person, dieses Verfahren etwa 60% bei Entscheidungen, zu denen keine themengleichen Belege vorlagen (Ergebnisse). Es ist eine starke zweite Meinung, kein Orakel.

Frage	Aktion
Welches Design ist besser?	Vergleiche
Was sollte an diesem Screen oder Flow geändert werden?	Kritik
Trainiere es, stimme es ab; es lag falsch	Abstimmen
Die Person hat gerade eine Designentscheidung getroffen	Aufzeichnen

Skripte befinden sich neben dieser Datei. Führe sie mit python3 aus; prepare.py und annotate.py benötigen Pillow (pip install pillow).

Immer

• Hol dir den Auftrag. Wenn du nicht weißt, wofür der Screen gedacht ist und für wen, frage einmal nach. Andernfalls nenne deine Annahme.
• Frühere Entscheidungen schlagen diese Regeln und schlagen allgemeine Designmeinungen. Neuere schlagen ältere.
• Argumentiere nicht allein aus "Best Practice". Sorgfältiges allgemeines Argumentieren lag unter Zufallsniveau bei den Entscheidungen dieser Person, weil es für mehr Informationen, Beschriftungen und Zählwerte argumentiert. Argumentiere mit dem, was sie tatsächlich gewählt haben.
• Verallgemeinere eine Präferenz nicht über ihre Belege hinaus. "Weniger" in einer Liste bedeutet nicht "weniger" überall. Sie haben ein Kartenbild einem kürzeren Text-Chip vorgezogen und einer Vergleichsschritt Fotos und Notizen hinzugefügt, weil diese es den Leuten ermöglichen, Dinge schneller zu erkennen.
• Beginne mit der Antwort. Urteil zuerst, dann Details. Dein Bericht folgt derselben progressiven Offenlegung, die du beurteilst.

Vergleiche

1. Vorbereiten. python3 scripts/prepare.py --out <tmp> <images...>, dann verwende die vorbereiteten Kopien. Für einen Flow ist jedes Design eine geordnete Liste von Screens.

2. Evidenz holen. Lies taste/taste.md. Führe python3 scripts/cases.py --context "<Wofür dieser Screen ist>" --k 4 aus.

3. Zweimal blind beurteilen. Erstelle zwei Sub-Agenten ohne gemeinsamen Kontext, die die Aufforderung in references/judge.md verwenden. Einer sieht die Designs in der Reihenfolge X, Y mit den Bezeichnungen A, B; der andere sieht Y, X. Verwende Sonnet: Opus kostet ein Vielfaches und erzielte keine besseren Ergebnisse. Gib jedem die Bildpfade der Fälle und sage ihm, er solle jedes Bild lesen. Sage ihnen nicht, welches Design du bevorzugst, wer welches erstellt hat oder welches neuer ist.

   Mehr als zwei Designs: Vergleiche die beiden am stärksten aussehenden paarweise, dann den Gewinner gegen das nächste. Bitte nicht um eine Rangfolge auf einmal.

4. Entscheiden.

   • Beide wählen dasselbe Design: Das ist das Urteil.
   • Sie sind geteilter Meinung: Sage zu knapp für eine Entscheidung, nenne das beste Argument jeder Seite in einem Satz und benenne die entscheidende Frage für die Person. Brich den Gleichstand nicht selbst auf.

5. Über die Optionen hinausschauen. Wenn beide Designs denselben Fehler teilen oder der Verlierer eine bewahrenswerte Idee hat, schlage die fusionierte Version in ein oder zwei Sätzen vor. Frühere Gewinner entstanden oft genau daraus.

6. Bericht.

   **B.** <Ein Satz: der Unterschied, der die Entscheidung bringt.>
   Konfidenz: beide Reihenfolgen stimmten überein (kein Beweis: ein anderes Modell oder andere Evidenz kann es immer noch umkehren) / zu knapp für eine Entscheidung
   - Warum: <Die entscheidenden Unterschiede, unter Bezugnahme auf die früheren Entscheidungen, die sie widerspiegeln>
   - Erhaltenswert von A: <falls vorhanden>
   - Besser als beide: <falls vorhanden>
   

   Füge nur dann eine umrahmte Überlagerung der verbleibenden Probleme des Gewinners hinzu, wenn danach gefragt wird.

Kritik

1. Bereite die Screens wie oben vor und notiere die Pixelgröße jedes Screens. Koordinaten stimmen nur bei den vorbereiteten Kopien überein.
2. Evidenz holen. Lies taste/taste.md und führe cases.py --k 4 aus, dann lies beide Bilder jedes Falls, bevor du dir die neuen Screens ansiehst. Die unten angegebenen Werte setzen voraus, dass du sie gesehen hast.
3. Überprüfe in dieser Reihenfolge:
   • Was ist das eine, wofür jemand auf diesen Screen kommt? Was müssen sie auf den ersten Blick erfassen?
   • Gehe Element für Element vor: Verdient dieses Element seinen Platz hier, oder könnte es einen Klick entfernt sein? Wird etwas doppelt gesagt? Wird dieselbe Art von Sache auf diesem Screen oder anderswo in der App auf zwei verschiedene Arten dargestellt? Konkurriert eine zweite Aktion mit der Hauptaktion? Würde ein Bild schneller verstanden als die Worte?
   • Frage bei einem Flow auch: Sieht das Geöffnete so aus, wie das, worauf du getippt hast? Ist irgendein Schritt eine Sackgasse?
4. Kürze. Maximal 3 Erkenntnisse, die wichtigste zuerst. Lass Barrierefreiheits-Boilerplate, allgemeine Verfeinerungen und alles, worauf du nicht zeigen kannst, weg. Wenn das Design gut ist, sag das und berichte nichts. Ausschmücken mit kleinen Problemen ist ein Fehler. Überprüfe vor dem Abschluss, ob jede Erkenntnis keine frühere Entscheidung rückgängig macht.
5. Zeichne. Schreibe findings.json neben die vorbereiteten Screens mit Kästchen als engen absoluten Pixeln [x1, y1, x2, y2] auf der vorbereiteten Kopie:

   {"verdict": "Ein Satz.",
    "screens": [{"path": "/abs/prepared.png", "label": "Startseite"}],
    "findings": [{"screen": 0, "box": [40, 120, 300, 180], "severity": "high", "title": "...", "why": "...", "fix": "..."}]}
   

   Führe python3 scripts/annotate.py findings.json --out <tmp> aus. Lies jedes .annotated.png und überprüfe, ob jedes Kästchen genau auf dem sitzt, was seine Erkenntnis beschreibt. Wenn eines daneben liegt, korrigiere die Zahlen und führe erneut aus. Ein Kästchen um eine gesamte Karte ist in Ordnung, wenn die Erkenntnis die Karte betrifft.
6. Berichte das Urteil, die Erkenntnisse und die Pfade zu report.html und den annotierten Bildern.

Aufzeichnen einer Entscheidung

Wenn die Person zwischen Designs wählt oder eine Präferenz äußert, während sie Screens betrachtet, biete an, es aufzuzeichnen: python3 scripts/record.py --context "..." --winner a.png --loser b.png --reason "ihre Worte" --topic <kurzer-slug>. Verwende ihre Worte für den Grund. So verbessert sich das Skill, und ein Satz "Warum" ist wertvoller als mehrere unerklärte Entscheidungen.

Abstimmen

Starte python3 scripts/tune.py, führe es im Hintergrund aus und gib der Person die URL. Es hat vier Registerkarten:

• Auswahl: Wähle zwischen Designs mit den Pfeiltasten. Ungefähr 5 Minuten.
• Fehleinschätzungen: Wo der Beurteiler mit der Person nicht übereinstimmt, und sein Argument. Sie behalten ihre Entscheidung bei oder sagen, der Beurteiler habe recht.
• Regeln: Bearbeite taste/taste.md.
• Punktzahl: Wertet neu aus, einschließlich der Konsistenz der eigenen Entscheidungen der Person.

Nach Auswahl oder Bearbeitungen führe python3 scripts/distill.py aus, um taste/taste.md aus allen Entscheidungen neu zu erstellen. Siehe references/tuning.md für die Zahlen und zur Verwendung mit dem Geschmack einer anderen Person.