批評スキル · 5次元専門家レビュー
任意のアーティファクトを5次元でスコアリングし、実行可能な修正案を提案する、単一ファイルのHTML「デザインレビューレポート」を作成します。huashu-design の専門家批評フローに着想を得ています。
使用タイミング
- エージェント（またはユーザー）がアーティファクト（デッキ／プロトタイプ／ランディングページ）を生成し、ユーザーが「これはどう？」または「これをレビューして」と尋ねたとき
- エージェントが自身の出力を出力する前に実行できるセルフチェックループとして
- 同じデザインの2つのバリアントを比較するため
生成するもの
単一の自己完結型 <artifact type="text/html"> レビューレポートで、以下を含みます：
- ヘッダー — レビューしたアーティファクト、日付、レビュアー（"OD · Critique skill"）、1行の評決
- レーダーチャート（インラインSVG、ライブラリ不要）5つのスコアを表示
- 5つの次元カード、それぞれに：
- 0–10のスコア（バンド付き：0–4 壊れている · 5–6 機能的 · 7–8 強い · 9–10 例外的）
- 1段落のエビデンス（具体的な要素／ファイル／行を引用）
- 1つのKeep／Fix／Quick-winの箇条書き
- 下部に結合されたアクションリスト：
- Keep — 機能しているもの、触らないこと
- Fix — 視覚的に高コストなP0/P1の問題
- Quick wins — 5〜15分の調整で不釣り合いな効果が得られるもの
5つの次元
各次元は独立しています — デッキが革新性で9/10でも、階層性で4/10であれば、レポートはそのように率直に述べるべきです。興味深い失敗を平均化して薄めてはいけません。
1. 哲学的一貫性 · 哲学一致性
アーティファクトは明確な方向性を選び、あらゆる微細な決定（クローム／キッカー／スペーシング／アクセント）でそれを貫いているか？
確認すべきエビデンス：
- 明確なデザインの方向性（例：Monocle／WIRED／Kinfolk）が1つ宣言されているか、それとも3つのスタイルが混ざっているか？
- クローム／キッカーの語彙が1つのレジスターに留まっているか、それとも3ページ目は「Vol.04 · Spring」で7ページ目は「BUT WAIT 🔥」になっているか？
- アクセント／セリフ／モノが全体で同じルールで使われているか？
0–4 3つのスタイルが互いに競合している。5–6 1つの方向性だが、半分の要素が逸脱している。7–8 一貫性があり、エッジケースで時折逸脱がある。9–10 すべての要素が同じテーゼを主張している。
2. 視覚階層 · 視覚層級
見知らぬ人が、何を最初に、次に、3番目に読むべきかを、説明されなくても理解できるか？
確認すべきエビデンス：
- 各ページで最も大きなタイプが、明らかに最も重要なものになっているか？
- モノ／セリフ／サンセリフの役割が、情報の役割（メタ／本文／ディスプレイ）と一致しているか？
- 「うるさい」要素がたくさん競合しているか？ それとも明確なプライマリ＋セカンダリ＋ターシャリの階層があるか？
0–4 すべてが叫んでいる。5–6 ヒーローページでは階層が機能するが、本文ページで崩れる。7–8 明確な階層があり、時折衝突がある。9–10 視線が摩擦なく動く。
3. 詳細実行 · 細節執行
90/10の部分 — 整列、行送り、大きなサイズでのカーニング、画像フレーミング、フッター／クロームの仕上げ、エッジケースのスペーシング。
確認すべきエビデンス：
- 大きな統計ページ：数字はベースラインに乗っているか、浮いているか？
grid-2-7-5で左右の列のトップが揃っているか？frame-img+ キャプションの比率がページ間で一貫しているか？- モノラベル：同じ文字間隔か？ 同じ大文字ルールか？
- 1文字の行を引き起こす孤立した
<br>はあるか？
0–4 テープとひもが見える。5–6 ほとんどのページはきれいだが、1〜2箇所ガタついている。7–8 磨かれているが、専門家の目で2〜3箇所のミスを見つけられる。9–10 雑誌品質 — 手組みのタイポグラファーがうなずくような細部。
4. 機能性 · 功能性
アーティファクトは意図された用途で機能するか？ クリックターゲット、ナビゲーション、プレゼンテーション距離での可読性、コードブロックのコピペ可能性、該当する場合はモバイルフォールバック。
確認すべきエビデンス：
- デッキ：キーボード／ホイール／タッチナビゲーションはすべて機能するか？ iframeスクロールフォールバックはあるか？
- ランディング：CTAはファーストビューにあるか？ 電話番号はモバイルでタップ可能か？
- ラン ブック：コードブロックはコピー可能か、モノフォントか、スマートクォートは使われていないか？
- 重要な情報は4m先から読めるか（大画面プレゼンテーション）？
0–4 見た目は良いが、目的を果たせていない。5–6 コアフローは機能するが、エッジケースが壊れている。7–8 通常の使用では堅牢。9–10 防御的に設計されている — iframe／フルスクリーン／ペースト／印刷でも動じない。
5. 革新性 · 創新性
これは中央値を超えているか？ 人々が前のめりになるような要素が1つあるか？
確認すべきエビデンス：
- 要求されていない予想外のレイアウト／モーション／タイポグラフィックな動きが1つあるか？
- それとも100%安全 — どの代理店のデッキ／ランディングでもあり得るか？
- 革新性は獲得されたものか（方向性に合致している）、それとも付け焼き刃か（KinfolkのスローライフデッキにランダムなWebGL）？
0–4 一般的なAIスラッジの中央値。5–6 有能だが記憶に残らない。7–8 記憶に残る瞬間が1つあり、残りは堅実。9–10 盗みたくなるような動きが複数ある — しかしそれぞれは明らかにテーゼに貢献している。
スコアリング規律（スコアリング前に読むこと）
- 常にエビデンスを引用する — 「ヒーローページでPlayfairディスプレイとInterサンセリフが同じ行に混在しているため4」は、「一貫性がない感じ」よりも優れています。エビデンスのない数値は却下されます。
- 平均化して上げない — 階層性が3ページ目で壊れているために5であれば、1ページ目と2ページ目が良いからといって7に上げないでください。スコアは最も悪い持続バンドです。
- 採点インフレをしない — 7は強いを意味し、許容できるではありません。すべてのスコアが7以上の場合、批判的にレビューしていません。
- 革新性は低くても構わない — プロダクション成果物では5/10で問題ありません。適切な保守性を罰しないでください。
ワークフロー
ステップ1 — アーティファクトを取得する
3つのモード：
- プロジェクトファイル — ユーザーが「今作ったindex.htmlをレビューして」と言った場合：プロジェクトフォルダから開く。
- ペーストされたHTML — ユーザーがチャットにコードをペーストした場合：メッセージから読み取る。
- このターンであなたが生成したもの — 上記でアーティファクトを出力したばかりで、セルフ批評したい場合：自分の
<artifact>を再読み取りする。
複数のHTMLファイルが存在する場合、どれかを尋ねます（すべてはレビューしません）。
ステップ2 — スコアリングに十分な量を読む
<style> 全体をざっと読み、その後6〜8個の代表的なコンテンツブロックを読みます。フロントマターだけでスコアリングしないでください。 スコアは宣言された意図ではなく、実行されたデザインに依存します。
ステップ3 — エビデンス付きでスコアリングする
5つの次元それぞれについて、スコアと、特定の要素を挙げた30〜80語のエビデンス段落を書きます。行番号、クラス名、ページ番号を使用します。
例：
次元: 詳細実行
スコア: 6 / 10
エビデンス: 3ページの統計カードはきれいに整列していますが（grid-6、3×2）、8ページでは右列のフッターが左よりも2vh高く位置しています。これは.calloutに3vhの上部マージンがある一方、figureにはないためです。画像キャプションは5ページではモノフォントですが、7ページではサンセリフです — どちらかに統一してください。
ステップ4 — アクションリストを作成する
5つのエビデンス段落を集約して、以下を作成します：
- Keep（3〜5個の箇条書き） — 機能している具体的なもの。ユーザーが次のイテレーションで壊してはいけません。クラス／ページ／要素で引用。
- Fix（3〜6個の箇条書き） — 必須項目。費やした1分あたりに節約される視覚的コストで順序付け。各箇条書きは1文以内。
- Quick wins（3〜5個の箇条書き） — 各5〜15分、高いシグナル対ノイズ比（例：「4ページの列のずれを修正するために
display:flexをgridに交換」）。
ステップ5 — レポートHTMLを出力する
単一ファイルを作成：
- ヘッダー：アーティファクト名＋レビュアークレジット＋日付
- 大きなレーダーチャート（SVG）
- 1列または2列グリッドの5つの次元カード
- 下部にチェックボックス機能付きの3つのアクションリスト
アクティブなDESIGN.mdトークンが存在する場合はそれを使用し、それ以外の場合はニュートラルなライトテーマ（オフホワイトの背景、ニアブラックのテキスト、レーダーフィル用の1つのアクセントカラー）をデフォルトにします。
出力契約
<artifact identifier="critique-<artifact-slug>" type="text/html" title="Critique · <アーティファクトタイトル>">
<!doctype html>
<html>...</html>
</artifact>
アーティファクトの前に1文（「Xを5次元でレビューしました。以下のレポートをご覧ください。」）を入れ、</artifact> 以降は停止 — チャットでレポートを言い換えず、ユーザーはアーティファクトを読むことになります。
厳格なルール
- 毎回5つのスコア — 部分的なレポート（例：3次元のみ）は許可されません。
- スコアごとにエビデンス — 「変な感じ」／「改善が必要」はダメです。要素を引用できない場合、スコアは正当化されません。
- 採点インフレをしない — 全体平均が8を超える場合は疑わしいので、自分を確認してください。
- 同じターンで自分のアーティファクトをレビューしない — ユーザーが最初にそれを見る必要があります。明示的なリクエスト（「今作ったものを批評して」）がある場合のみセルフ批評を行います。
- 単一ファイルHTMLのみ — 外部CSS/JSは不可。すべてをインライン化します。
- レーダーチャートは必須 — レポートに認識可能なシルエットを与え、ユーザーが弱い軸を一目で見つけられるようにします。