Design Quality v2

既存のインターフェースの評価・作成・修正を行う全サイクルスキル。既存インターフェースでは監査とスコアリングを実行し、新規作成では方向性を設定して品質を確保します。壊れたインターフェースにはパスごとに修正を適用します。

このバージョンでは、ReviewモードとFixモードに特化したサブエージェントを使用します。可能な限り並列で動作し、次元スコアが5以下になると自動的に詳細分析に移行します。

ゲート0: 入力タイプの特定

分析や作成の前に、共有されたものを特定します。これにより以降のすべての処理が変わります。

共有されたもの	実行すること
スクリーンショット/画像	視覚的に分析。確認できないCSSを注記
HTML/CSSソース	スタイルを読み取り。完全監査可能
プロジェクトフォルダ	最初にメインCSS/コンポーネントファイルを検索。スコアリング前に読み取り
URL/ライブページ	DOMを読み取り。ブラウザが利用可能ならDevToolsでスタイルを検査
アーティファクトリンク	アーティファクトを読み取り。HTMLソースとして扱う
テキスト説明のみ	スコアリング前に上記のいずれかを要求。不足しているものを説明

また、コンテキストタイプも検出します。これにより適用するヒューリスティックが変わります。

アプリ画面 (ツール、ダッシュボード、SaaSプロダクト): 密度が支配的。ヘッダーは小規模。アクション自体がコンテンツ。
ページ (ランディングページ、マーケティング、エディトリアル): より創造的な自由。ヒーローが重要。セクションとリズム。

不確かな場合は、仮定を述べて先に進みます。

モード選択

リクエストから検出します。迷ったらレビューから開始します。

リクエストタイプ	モード
"review", "critique", "audit", "このデザインはAI生成に見えるか？"	review
"build", "create", "このページをデザインして"	create
"fix", "improve", "スロップ除去", "redesign"	fix (review → apply)
"polish", "少し違和感がある", "ほぼ完成"	polish

プロジェクトルートに PROJECT_DESIGN.md が存在する場合は、最初にそれを読み取ります。承認された方向性、パレット、Signatureが含まれています。許可なく上書きしないでください。

エージェントアーキテクチャ

ReviewモードとFixモードでは、すべての作業を逐次実行するのではなく、専門化されたサブエージェントをディスパッチします。これにより、短時間でより深い分析が可能になります。

エージェントを使用するタイミング

Reviewモード 実際のUI入力がある場合 → 常に3つの並列レビューエージェントをディスパッチ
いずれかの次元スコアが5以下 → スコアカード表示後、対応する詳細分析エージェントを自動ディスパッチ
Fixモード → パスごとに専用の修正エージェントをディスパッチ（パス3と4は並列）
Createモードゲート1 → 製品URLまたはカテゴリが判明している場合、方向性リサーチエージェントをオプションでディスパッチ

Fork vs フレッシュ

subagent_type: "fork" — レビューおよび修正エージェント向け。会話の全コンテキスト（UI入力、スクリーンショット、コード）を必要とする場合に使用。
デフォルト（フレッシュ） — 方向性リサーチエージェント向け。会話履歴を必要としない場合に使用。

エージェントプロンプトファイル

完全なプロンプトテンプレートは references/agents/ にあります。エージェントをディスパッチする際に参照してください。各ファイルは、そのエージェントの指示と出力形式を含む自己完結型です。

Reviewモード

監査、スコアリング、優先順位付け。許可なくコードを変更しないでください。

ステップ0: 3つの並列レビューエージェントをディスパッチ

自分で分析を行う前に、Agentツールを使用して1つのメッセージで3つのエージェントすべてをディスパッチします。3つともforkです。会話の全コンテキスト（UI入力を含む）を継承します。

エージェント1 — スロップ監査 プロンプトテンプレート: references/agents/review-slop.md タスク: スロップ監査、テンプレートチェック、アクセシビリティ、モバイル/タッチ、パフォーマンスの簡易チェック。

エージェント2 — スコアカード評価 プロンプトテンプレート: references/agents/review-scorecard.md タスク: 8つの次元すべてを1〜10で評価し、各スコアに理由を付ける。

エージェント3 — 感情分析 プロンプトテンプレート: references/agents/review-emotion.md タスク: すべての主要状態にわたる感情状態チェック + ピークエンドルールマッピング。

3つすべてが完了するのを待ち、ステップ1に進みます。

ステップ1: 統合

3つのエージェントの出力を標準出力形式にマージします。複数のエージェントに現れる重複した指摘は除去します。エージェント間でスコアが一致しない場合は、低い方の値を使用し、不一致があったことを注記します。

## スロップ監査
[エージェント1から — 各指摘にロケーションと重大度]

## テンプレートチェック
[エージェント1から]

## スコアカード
プロダクト適合性:    X/10   [エージェント2から — 一行メモ]
階層:      X/10
明瞭性:        X/10
テイスト:          X/10
抑制:      X/10
密度:        X/10
クラフト:          X/10
レスポンシブネス: X/10
総合:        X/10

## 感情デザイン
[エージェント3から — 感情状態 + ピークエンドの指摘]

## 判定
最も優れている点:
最も劣っている点:
必須修正 (P0): [ある場合 — なければ "なし"]
クイックウィン (P1): [最大3つ]

出力後、修正を適用するかどうかを尋ねます。

ステップ2: 自動詳細分析

スコアカードを表示した後、すべての次元を確認します。5以下のスコアがあった場合は、許可を待たずに対応する詳細分析エージェントを自動ディスパッチします。

ディスパッチテーブルとプロンプトテンプレートについては references/agents/deepdive-dispatch.md を参照してください。

ディスパッチ前にアナウンス: "階層が4でした — フォーカスした視覚的階層の批評をディスパッチします。"

詳細分析マップ:

次元 / 指摘	ディスパッチするスキル
階層 ≤ 5	`critique-visual-hierarchy` スキル
明瞭性 ≤ 5 (アフォーダンス)	`critique-affordance` スキル
明瞭性 ≤ 5 (密度)	`critique-information-density` スキル
クラフト ≤ 5 (タイポグラフィ)	`critique-typography` スキル
クラフト ≤ 5 (色)	`critique-color` スキル
クラフト ≤ 5 (レイアウト)	`critique-composition` スキル
テイスト ≤ 5 (平坦に感じる)	`interfaces-that-feel` スキル
密度 ≤ 5	`critique-information-density` スキル
感情アークの問題	`peak-end-rule` スキル

Createモード

UIを作成する前に、次の順序に従います。各ステップはゲートです。先に進む前に停止して確認します。

ゲート0: コンテキストタイプ

先に進む前に、該当するものを明記します。

アプリ画面 — ツール、ダッシュボード、データプロダクト。密度、アクション、状態が支配的。
ページ — ランディング、エディトリアル、マーケティング。構成、リズム、セクションが支配的。

ゲート1: プロダクトリサーチエージェント（オプションだが推奨）

プロダクトにURL、名前があるか、既知のカテゴリに属する場合は、ユーザーにプロダクトの理解を求める前にリサーチエージェントをディスパッチします。これにより往復を節約し、ユーザーが言及するのを忘れるかもしれないドメイン固有の慣習を明らかにできます。

プロンプトテンプレート: references/agents/direction-research.md

URLやカテゴリが不明な場合は、このステップをスキップしてユーザーに直接質問します。

プロジェクトルートに既存の PROJECT_DESIGN.md がないか確認します。存在する場合は読み取ります。方向性はすでに設定されています。ゲート3（ビルド）にスキップし、記録された方向性を適用します。

存在しない場合は、以下を読み取るか質問します: プロダクトの機能、対象ユーザー、主要タスク、既存のコンテンツ、技術スタック、既存のブランドカラー、フォント、コンポーネント。

質問: "方向性を設定する前に、私の理解が正しいか確認してもよろしいですか？" 停止します。待ちます。

ゲート2: 方向性 + デザインダイヤル

プロダクトから5つのラインを導き出します。トレンド、ポートフォリオ、見た目がクールだからという理由では決して導き出しません。

プロダクト: 何を誰のために行うか。簡潔な一文。
キャラクター: 2〜3の具体的な言葉。calm, exact, a little warm または fast, technical, playful。 "Clean, modern, sleek, minimal, premium" は禁止です。これらはすべてのテンプレートを説明します。
世界: プロダクトが自然に属する素材または場所。メモアプリ: 紙とインク。監視ツール: 計器と夜勤。旅行アプリ: 地図と窓から差す光。これにより、ニュートラル、アクセント、視覚的な瞬間が色づけられます。
瞬間: 画面上の1〜2箇所で、デザインが豊かで具体的になる場所。他のすべては静かに保ち、これらの瞬間が即座に伝わるようにします。
Signature: このプロダクトだけが持つ、一貫して繰り返される小さなディテール。

1〜3の方向性を提示します。それぞれについて、3つのデザインダイヤルを表示します。

バリアンス  ░░░░░░░░░░  1–10   (1 = ミニマル/中央寄せ, 10 = 大胆/非対称)
モーション    ░░░░░░░░░░  1–10   (1 = 静的, 10 = アニメーション)
密度   ░░░░░░░░░░  1–10   (1 = 広々/エディトリアル, 10 = ダッシュボード/高密度)

質問: "どの方向性が良いですか？また、ダイヤルは適切ですか、それとも調整が必要ですか？" 停止します。待ちます。

方向性が確定したら、プロジェクトルートに PROJECT_DESIGN.md を作成することを提案します。

# PROJECT_DESIGN.md

## 方向性: [名前]
プロダクト: [一文]
キャラクター: [2〜3語]
世界: [素材 / 場所]
瞬間: [1〜2の具体的な場所]
Signature: [一つのディテール]

## ダイヤル
バリアンス: X/10
モーション: X/10
密度: X/10

## パレット
キャンバス: [トークン + 16進数]
アクセント: [トークン + 16進数]
テキストプライマリ: [トークン + 16進数]
テキストミュート: [トークン + 16進数]

## タイポグラフィ
ディスプレイ: [フォント名 + ウェイト]
ボディ: [フォント名 + ウェイト]
モノ: [フォント名] (該当する場合)

## ボーダー半径: [値]px

デザイン原則

方向性が確定したら、次の順序で適用します（前のパスが後のパスに影響します）。

スペーシング — 最初に確立

8pxグリッド。すべてのマージン、パディング、ギャップ: 4または8の倍数。（mt-[13px] → 修正。）
同じ要素 = 同じサイズ。すべてのリスト行は1つの高さと1つのギャップを共有。
スペースはグループ化を示す。内側 < 外側。セクションラベルは、自身のアイテムにより近く、上のアイテムからは離れて配置。
ナビゲーションが最も密: 行32〜36px、行間2〜4px。

色

1つのニュートラルランプ。世界に向けて色味付け。背景、サーフェス、ボーダー、テキストはすべてそのランプから。
1つのアクセント色。控えめに使用: プライマリアクション、選択、または重要な1つの数字。
3つのテキストロール: プライマリ、セカンダリ、ミュート。決して10種類の微妙に異なるグレーを使用しない。
禁止: サーフェス上の色相グラデーション、グラデーションテキスト、色付きグロー、色付きシャドウ、ラジアルブラブ、ネオンボーダー。
アクセント色の上にテキスト: コントラスト比 ≥ 4.5:1。
新しいカラートークンにはOKLCHを推奨: oklch(L% C H)。

タイポグラフィ

特徴的なディスプレイフォントとクリーンなボディフォントをペアリング。ウェイトのコントラストを最大化。
すべての見出し（h1〜h3）に text-wrap: balance。ボディテキストとリストテキストに text-wrap: pretty。
:root または html に -webkit-font-smoothing: antialiased。
ボディテキストは最低14px（16pxを推奨）。ページにh1は1つ。

コンポーネント

ボタン: 動詞ファーストのラベル。セクションごとに1つのプライマリ。
アイコンとして絵文字は使用しない。1つのアイコンライブラリ、1つのストロークウェイト、currentColor のみ。
カード: シャドウ または ボーダー。両方は不可。
空状態: イラスト + 見出し + CTA。決して空のままにしない。
ローディング: 300ms遅延後、スケルトンスクリーン（スピナーではない）。
モーダル: Xボタン、キャンセル、Escapeキー。フォーカストラップ。閉じる際にフォーカスを戻す。
すべてのモーダル、ドロワー、ドロップダウンに overscroll-behavior: contain。
すべてのアイコンボタンに aria-label が必要。すべてのフォーム入力には関連付けられた <label> が必要。

1つの明るい要素ルール

各画面には、磨き上げられた豊かな要素が1つあります。その周りのすべては静かに保たれます。

アンチジェネリックガードレール

デザインがポートフォリオのスクリーンショットでは印象的に見えても、プロダクトが不明瞭になる場合は、それを却下します。

ビルド後

Reviewモード（エージェントを使用）を実行します。完了条件: P0の指摘がない、総合スコア ≥ 7/10、プロダクト適合性 ≥ 7/10。

Fixモード

最初にReviewモードを実行してスコアカードを取得します。その後、パス順に修正エージェントをディスパッチします。

実行順序:

パス1、2 → 順次（最初にスペーシング、次に色）
パス3 + パス4 → 並列（アイコンとコピーは独立）
パス5〜10 → 順次

各パスのエージェントプロンプトテンプレートについては references/agents/fix-passes.md を参照してください。

各パスで、エージェントが何をしているかをアナウンスし、パスごとにレポートします: 何が変更され、何がまだ注意を必要としているか。

パス順:

スペーシング — 8pxグリッドの調整、リズム、グループ化
色 — スロップを除去、ニュートラルランプから構築
アイコン — 1つのセット、1つのサイズ、1つのストローク、currentColor (コピーと並列)
コピー — 絵文字ラベルを除去、叫びを鎮め、プロダクト固有にする (アイコンと並列)
タイポグラフィ — 階層、ウェイト、text-wrap: balance、text-wrap: pretty、アンチエイリアス、tabular-nums
レイアウト — 整列、密度
ディテール — 同心円半径、シャドウ、ボーダー
アクセシビリティ & タッチ — フォーカス状態、aria-label、touch-action: manipulation、44pxターゲット、overscroll-behavior
ビジュアル — 空状態のイラスト、アイコンの一貫性、画像アスペクト比。references/passes-visuals.md を参照
モーション — 最後のパス。意味が加わる場合のみ。references/passes-motion.md を参照

すべてのパスの後: Reviewモードエージェントを再度実行して検証します。元のスコアカードからの差分を報告します。

Polishモード

ほとんど適切にデザインされているが、微妙に違和感があるインターフェース向け。

テクニック: ブラウザのDevTools（アニメーションパネル）でインターフェースの速度を10%に落とし、すべての状態（ホバー、フォーカス、アクティブ、ローディング、空）をウォークスルーします。10%の速度で違和感があるものは、フルスピードでも微妙に間違っているものです。

具体的な値については references/micro-polish.md を参照してください。

クイックチェックリスト:

納品前チェックリスト

UIを完了とマークする前に:

RomuloRogerio/design-quality-v2

design-quality-v2 とは？

お気に入りのAIに質問する

ドキュメント