ai-output-judgement について
ai-output-judgementは、AIが生成した画面を仕上げるためのレビュー手法です。デザインや開発の担当者が実装資料も確認し、セマンティクス、トークン、レイアウト、動き、状態、製品との適合性を評価します。
主な機能
- 01生成物を草稿として扱う
- 02コードとスタイル資料を確認
- 03具体的な問題を指摘
- 04セマンティクスとトークンを確認
- 05動きと例外状態を点検
- 06製品画面との適合性を評価
活用シーン
- 01公開前にAI生成画面をレビュー
- 02ハードコードやトークン不足を発見
- 03コントロールの意味とアクセシビリティ状態を確認
- 04動きや状態処理の問題を修正
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/ai-output-judgementを入力して読み込まれたか確認します。
詳細
AI 出力の判断
モデルは学習データの中央値を出力します。その中央値を無批判に受け入れると、粗雑な成果物が生まれます。草案を具体的に読み込み、最後の仕上げを行うことが大切です。
基本方針
- 生成された出力は足場として扱い、完成した回答とは見なさないでください。
- スクリーンショットだけでなく、資料にも目を通してください。
- 漠然とした印象ではなく、具体的な問題（余白、トークン、意味論、モーション、アイデンティティ）を指摘してください。
- モデルが独自に作り出した一度限りの値より、システムのリファレンスを優先してください。
- 本番環境に出す前の工程には、人間の審美眼を残してください。
よくある「中央値」の失敗
- セマンティックトークンではなく、16 進数や RGB の値をハードコードする
- ネイティブ要素ではなく、
divをコントロールとして使う - インタラクティブなモーションに
transition: allや linear タイミングを使う - 汎用的なシャドウ、角丸、24px のパディング
- 空、エラー、無効、動きを減らす設定の各状態が欠けている
- 再マウントされて状態がリセットされる React のキーやアイデンティティ
- 見た目の仕上げの後からアクセシビリティを付け足す
レビュー基準
- 意味論 — 要素とその契約は適切ですか？
- トークン — 色、間隔、文字、エレベーションにシステムの値を使っていますか？
- レイアウト — テンプレートの残骸ではなく、意図的な階層になっていますか？
- モーション — 必要な箇所で、物理的な動きと中断可能性を考慮していますか？
- 状態 — ホバー／フォーカス／無効／読み込み中／空／エラーの各状態がありますか？
- 適合性 — 隣接するプロダクトの画面と一致していますか？
推奨／却下
| 推奨 | 却下 |
|---|---|
| 草案 → 批評 → 改訂 | プロンプト → リリース |
| 具体的な指摘（「間隔スケールでは 12px」） | 「もっとよくして」 |
| システムを考慮した置き換え | 新たに作る一度限りのスタイル |
| モデルが間違っていると見抜くこと | プレビューが洗練されて見えるからと盲信すること |
レビューチェックリスト
- プレビューだけでなく、コード／CSS を誰かが読みましたか？
- 値が繰り返される箇所すべてでトークンを使っていますか？
- ネイティブの意味論が保たれていますか？
- モーションには意図があり、中断可能ですか？
- エッジケースの状態がありますか？
- 残されたデフォルト設定の一つひとつを、意図的なものとして説明できますか？
エッセイの出典
- 問題はモデルではありません
- デザインの力を何倍にもする
- ペアデザインとしての AI
- AI に審美眼を与える
コメント
Markdown 対応