intentional-design-guard

name	intentional-design-guard
description	AI生成UIの没個性的パターン（AIスロップ美学）を検出・回避し、文脈に根ざした意図あるデザインを生成するためのガード。フロントエンドのUI実装、デザイン生成、コンポーネント設計、CSSスタイリング、カラーパレット選定、フォント選択、レイアウト構築を行う際に自動的に適用する。「UIを作って」「画面を実装して」「デザインして」「スタイルを当てて」「ランディングページを作って」「Webサイトを作成して」「ダッシュボードを構築して」「コンポーネントを実装して」等のUI生成タスク全般で使用する。Claude Code、Codex、GitHub Copilot、Cursor、その他AIエージェント共通で適用可能。

Intentional Design Guard

なぜAI生成UIは似るのか

LLMはトレーニングデータの統計的中央値に収束する（分布収束 / Distributional Convergence）。指示が曖昧なほど、Inter + 紫グラデーション + 白背景 + 3列カードという「安全な平均」に落ち着く。このスキルは分布の端に意図的に向かうことで、プロジェクト固有のデザインを実現するガードレールである。

---

Blacklist: AI スロップ美学

以下は「AIが作った」と即座に見抜かれるシグナル。代替なしに使用禁止。

フォント

• Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Source Sans Pro
• system-ui / -apple-system / Arial / Helvetica のみのフォントスタック
• 世代間で収束しやすいフォント（Space Grotesk 等）の安易な選択

カラー

• 白背景 + 薄い紫/青グラデーション（#7C3AED → #3B82F6 系）
• 黒背景 + ネオンパープル/シアン
• Tailwind デフォルトパレットの無加工使用（blue-500, purple-600 等そのまま）
• 紫をAI機能インジケータとして使うこと（✨ + 紫 = AI の慣用表現）

レイアウト

• 3カラム均等カードグリッドの反復
• Hero → Features(3列) → Testimonials → CTA の定型LP構成
• 意図なく rounded-2xl shadow-lg を全カードに適用
• 全セクション同一の px-4 py-8 パディング

コンポーネント

• アイコン + タイトル + テキストだけの Feature カード量産
• グラデーション背景の大型 CTA ボタン
• 装飾目的のみの半透明カード・ぼかし背景
• ダークモードをデフォルトにする（指定がない限り）

モーション

• 全要素がスクロールでふわっと出現するフェードイン
• animate-pulse, animate-bounce の多用
• 意味なく transition-all duration-300 を全要素に適用

---

必須プロセス: コードを書く前に

Step 1: 文脈の3問（コード内コメントに残す）

1. 誰が、何のために使う画面か？ → ユーザー像と目的を1行で
2. この画面のムード/トーンは？ → 例: 信頼感、軽快さ、専門性、温かみ、緊張感、権威、前衛、遊び心
3. 類似しない参照点は？ → 同ジャンル外から1つインスピレーション源を選ぶ（例: 金融アプリ → 建築雑誌、教育ツール → レコードジャケット、SaaSダッシュボード → 新聞の紙面レイアウト）

Step 2: デザイントークン先行定義

コンポーネントを書く前に、CSS Custom Properties でデザイントークンを定義する。

:root {
  /* Step 2a: 主色をコンセプトから1色決定 */
  --color-primary: ;
  /* Step 2b: 主色の色相を混ぜたニュートラル群（純グレー禁止） */
  --color-surface: ;
  --color-surface-alt: ;
  --color-text: ;
  --color-text-muted: ;
  /* Step 2c: 補色/分割補色でアクセント */
  --color-accent: ;
  /* Step 2d: タイポグラフィ */
  --font-heading: ;
  --font-body: ;
  /* Step 2e: 余白リズム */
  --space-unit: ;
}

Tailwind 使用時は extend で必ず登録する。ユーティリティ直接のハードコード色禁止。

Step 3: 構造設計（セクション単位で反復）

全体を一度に生成せず、セクション単位で生成→レビュー→次セクションの反復で精度を上げる。

1. ページ構造（セクション一覧）を先に決定
2. 各セクションを個別に実装
3. セクション間の余白リズムと視覚的つながりを最後に調整

---

タイポグラフィ

フォント選択は 文脈 → ムード → 書体 の順で決定する。

ルール

1. 画面のトーンからムードキーワードを2つ選ぶ
2. references/typography-alternatives.md からムードに合うペアリングを選択
3. 見出しと本文で十分なコントラストを確保する

コントラスト要件

• ウェイト差 300以上（例: 見出し 800 / 本文 400）
• または セリフ × サンセリフの混合
• サイズ比は 1.5倍ではなく 2〜3倍 のジャンプを推奨
• 1ページにフォントファミリーは最大3つ

禁止

• 見出し・本文が同一ファミリー・同一ウェイト
• ウェイト差 200 以下（例: 400 vs 500）
• Blacklist フォントの使用

→ 詳細なペアリング集: references/typography-alternatives.md

---

カラー

パレットは コンセプト → 主色 → ニュートラル → アクセント の順で構築する。

ルール

1. コンセプトから主色を1色決定（ブランドカラーがあればそれ）
2. 主色の色相を混ぜたニュートラル群を導出（純粋なグレー #808080 系は使わない）
3. 補色関係または分割補色でアクセント色を1〜2色追加
4. CSS Custom Properties で定義 → Tailwind extend で登録

禁止

• #FFFFFF 純白 + 彩度バラバラのカラフルカード群
• 意味のないグラデーション装飾
• パレット未定義のまま Tailwind ユーティリティで直接色ハードコード
• 紫系をメインカラーに採用（AI っぽさの最大シグナル）

背景表現の代替テクニック（グラデーション以外）

• 微細 SVG ノイズテクスチャ
• backdrop-filter: blur() + 半透明背景
• 幾何学 SVG パターン（ドット、ライン、クロスハッチ）
• box-shadow 多層レイヤーによる奥行き表現
• グレインオーバーレイ（background-image + mix-blend-mode）

→ 詳細: references/color-system-guide.md

---

レイアウト

「意味のある不均一」 を目指す。均等割りは思考停止のサイン。

ルール

• グリッドに非対称を混ぜる（2:1, 3:2 比率、col-span 変更）
• 余白を情報として扱う（広い余白 = 重要度が高い、またはブレス）
• セクション境界は 余白のリズム変化 で表現する（罫線やカード枠ではなく）
• 視線の流れに沿った配置（Z型、F型、または意図的な破壊）
• 異なるセクションで異なるグリッド構造を使う

禁止

• grid-cols-3 均等3列を2セクション以上で反復
• 全カード同サイズ・同構造
• 全セクション同一パディングの機械的統一

→ 詳細な代替パターン集: references/layout-and-components.md

---

モーション

アニメーションは 「なぜ動くのか」を1行で説明できるもの のみ許可する。

許可

• ユーザー操作フィードバック（ホバー、クリック、フォーカス）→ 理由: 操作確認
• ステガーアニメーション（コンテンツ出現順を伝える）→ 理由: 情報階層の可視化
• 状態遷移トランジション（開閉、ページ遷移）→ 理由: 空間的連続性

禁止

• 全要素スクロールフェードイン（理由なきお化粧）
• animate-pulse / animate-bounce の多用
• transition-all duration-300 の全要素適用

実装指針

• HTML/CSS のみ: CSS アニメーション・トランジション優先
• React: Framer Motion（Motion ライブラリ）推奨
• 高インパクトな1箇所の演出 > 散在するマイクロインタラクション

---

テンプレート戦略（オプション）

ゼロから生成するとAIスロップに陥りやすい。以下の戦略を検討:

1. 既存テンプレートベース: Figma Community / HTML テンプレートから出発し、カスタマイズする
2. デザインシステム準拠: Material Design / Radix / shadcn/ui 等を土台に、トークンだけ差し替える
3. Figma MCP 連携: Figma でデザインし、MCP 経由でコードに忠実変換する

いずれも「AIの自由生成域を狭める」ことで品質を担保する手法。

---

セルフレビューチェックリスト

UI実装後、以下を すべて 確認する。1つでも該当すれば修正:

基本チェック

• Blacklist のフォントを使っていない
• 紫グラデーション / ネオンパープル / AI インジケータ色を使っていない
• 3問（誰が、ムード、異分野参照）にコメントで答えている
• デザイントークンが CSS Custom Properties で先行定義されている

タイポグラフィ

• 見出しと本文でフォントまたはウェイトに十分な差がある（300+ or セリフ/サンセリフ混合）
• フォントファミリーは3つ以下

カラー

• カラーパレットが CSS 変数で定義されている
• 純粋なグレー（#XXX で R=G=B）をニュートラルに使っていない
• Tailwind デフォルト色をそのまま使っていない

レイアウト

• 均等3列カードを2箇所以上で繰り返していない
• 異なるセクションで異なるグリッド/レイアウト構造を使っている
• Hero → Features → Testimonials → CTA の定型構成になっていない

モーション

• すべてのアニメーションに「なぜ動くのか」の理由がある
• スクロールフェードインを全要素に適用していない

最終主観チェック

• 画面全体を見て 「AIが作った」と感じない
• 「このデザインは何のプロジェクトか」が色とレイアウトから伝わる
• 同じプロンプトで別のAIに生成させたら、異なる結果になると思える

---

References

ファイル	内容	いつ読むか
references/typography-alternatives.md	ムード別フォントペアリング集（欧文・和文）	フォント選択時
references/color-system-guide.md	カラーパレット構築手順と CSS テンプレート	配色設計時
references/layout-and-components.md	レイアウト・コンポーネントの代替パターン集	構造設計時