ui-critic は何をしますか？
特定の一人の人物のようにスクリーンショットを判断します。過去の判断を証拠として使用します。通常のClaudeでは、この人物の実際のデザイン選択を44～50%の精度で予測していましたが、この手順では約60%の精度を達成しています（同じトピックに関する証拠がない決定について）。(結果)。これは強力なセカンドオピニオンであり、オラクルではありません。
| 質問 | 行動 |
|---|---|
| どちらのデザインが良いか？ | 比較 |
| この画面やフローで何を変更すべきか？ | 批評 |
| 教えて、調整して、間違えた場合 | 調整 |
| 人物がデザインを決定した | 記録 |
スクリプトはこのファイルの隣にあります。python3 で実行します。prepare.py と annotate.py は Pillow が必要です (pip install pillow)。
常に
- 最初にジョブを把握する。 画面の用途と対象ユーザーが不明な場合は、一度尋ねてください。それ以外の場合は自分の前提を述べてください。
- 過去の決定は、これらのルールや一般的なデザイン意見よりも優先されます。 新しいものほど優先度が高いです。
- 「ベストプラクティス」だけから推論しないでください。 慎重な一般的推論は、この人物の決定に対して 偶然以下 の精度でした。なぜなら、それはより多くの情報、ラベル、カウントを主張するからです。実際に彼らが選んだものから議論してください。
- 好みを証拠以上に一般化しないでください。 リストでの「少ない」が、すべての場所で「少ない」を意味するわけではありません。彼らは、より短いテキストチップよりも地図の画像を選び、比較ステップに写真やメモを追加しました。それは、人々が物事をより早く認識できるようにするためです。
- 答えを先に述べてください。 評決を先に、その後で詳細を述べてください。あなたのレポートは、あなたが判断しているのと同じ段階的開示に従います。
比較
-
準備する。
python3 scripts/prepare.py --out <tmp> <images...>を実行し、準備されたコピーを使用します。フローの場合、各デザインはスクリーンの順序付きリストです。 -
証拠を取得する。
taste/taste.mdを読んでください。python3 scripts/cases.py --context "<この画面の目的>" --k 4を実行します。 -
二重盲検で判断する。 コンテキストを共有しない2つのサブエージェントを生成し、references/judge.md のプロンプトを使用します。一方はデザインをX、Yの順にA、Bとラベル付けして見て、もう一方はY、Xの順に見ます。Sonnetを使用してください。Opusは数倍のコストがかかり、精度も向上しませんでした。各エージェントにケース画像のパスを渡し、すべての画像を読むように指示してください。あなたがどのデザインを好むか、誰がどれを作ったか、どちらが新しいかは伝えないでください。
デザインが3つ以上の場合：最も強力に見える2つをペアワイズで比較し、勝者を次のデザインと比較します。一度にランキングを求めないでください。
-
決定する。
- 両方が同じデザインを選んだ場合：それが評決です。
- 意見が分かれた場合：判定不能 と述べ、各サイドの最良の議論を一行で示し、人物が判断するための決定的な質問を挙げてください。自分で同点を決めないでください。
-
選択肢の先を見る。 両方のデザインに共通の欠陥がある場合、または敗者に保持する価値のあるアイデアが1つある場合、マージされたバージョンを一文か二文で提案してください。過去の勝者はまさにこの方法から生まれました。
-
報告する。
**B.** <一言：それを決定づけた違い。> 信頼度：両方の順序で一致（証明ではない：異なるモデルや証拠で覆る可能性あり） / 判定不能 - 理由：<決定的な違い、それらが反映する過去の決定を引用して> - Aから保持する価値のあるもの：<ある場合> - 両方より優れているもの：<ある場合>尋ねられた場合にのみ、勝者の残りの問題点に枠を重ねて追加してください。
批評
- 上記と同様に画面を準備し、各画面のピクセルサイズをメモします。座標は準備されたコピーでのみ一致します。
- 証拠を取得する。
taste/taste.mdを読み、cases.py --k 4を実行し、新しい画面を見る前にすべてのケースの両方の画像を読んでください。以下のスコアはあなたがそれらを見たことを前提としています。 - レビュー（この順序で）：
- 誰かがこの画面に来た目的は何か？一目で理解しなければならないことは何か？
- 要素ごとに確認する：これはここにあって価値があるか、それともワンタップでアクセスできるようにすべきか？何かが二度言われていないか？同じ種類のものが、この画面またはアプリ内の他の場所で、二つの異なる方法で描かれていないか？第二のアクションがメインのアクションと競合していないか？画像の方が文字よりも早く理解されるか？
- フローの場合、さらに尋ねる：開いたものがタップしたものと同じに見えるか？行き止まりのステップはないか？
- 削減する。 最大3つの所見、重要度順。アクセシビリティの定型文、一般的な洗練、指摘できないものは除外します。デザインが良い場合は、そう述べて何も報告しないでください。些細な問題で埋めるのは失敗です。終了する前に、各所見が過去の決定を覆していないか確認してください。
- 描画する。 準備された画面の隣に
findings.jsonを作成し、準備されたコピー上の絶対ピクセル座標[x1, y1, x2, y2]で枠を指定します：{"verdict": "一文。", "screens": [{"path": "/abs/prepared.png", "label": "Home"}], "findings": [{"screen": 0, "box": [40, 120, 300, 180], "severity": "high", "title": "...", "why": "...", "fix": "..."}]}python3 scripts/annotate.py findings.json --out <tmp>を実行します。各.annotated.pngを読み、すべての枠がその所見が説明するものの上にあることを確認します。ずれている場合は、数値を修正して再実行します。所見がカード全体に関するものである場合、カード全体を囲む枠でも問題ありません。 - 報告する。 評決、所見、
report.htmlと注釈付き画像へのパスを報告します。
決定を記録
人物が画面を見ながらデザインを選んだり、好みを表明したりした場合、記録を申し出てください：python3 scripts/record.py --context "..." --winner a.png --loser b.png --reason "彼らの言葉" --topic <short-slug>。理由には彼らの言葉を使用してください。これによりスキルが向上し、「なぜ」の一文は、説明のない複数の選択よりも価値があります。
調整
python3 scripts/tune.py を起動し、バックグラウンドで実行して、人物にURLを渡してください。4つのタブがあります：
- Pick: 矢印キーを使ってデザイン間を選択します。約5分。
- Misses: 判定者が人物と意見が異なる箇所とその議論を表示します。人物は自分の判断を維持するか、判定者が正しいと言います。
- Rules:
taste/taste.mdを編集します。 - Score: 再スコアリングします。人物自身の選択の一貫性も含みます。
ピッキングまたは編集の後、python3 scripts/distill.py を実行して、すべての決定から taste/taste.md を再構築します。詳細な数値や、このツールを他の人の好みで使用する方法については、references/tuning.md を参照してください。