| 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つインスピレーション源を選ぶ（例: 金融アプリ → 建築雑誌、教育ツール → レコードジャケット、SaaSダッシュボード → 新聞の紙面レイアウト）
Step 2: デザイントークン先行定義
コンポーネントを書く前に、CSS Custom Properties でデザイントークンを定義する。
:root {
--color-primary: ;
--color-surface: ;
--color-surface-alt: ;
--color-text: ;
--color-text-muted: ;
--color-accent: ;
--font-heading: ;
--font-body: ;
--space-unit: ;
}
Tailwind 使用時は extend で必ず登録する。ユーティリティ直接のハードコード色禁止。
Step 3: 構造設計（セクション単位で反復）
全体を一度に生成せず、セクション単位で生成→レビュー→次セクションの反復で精度を上げる。
- ページ構造（セクション一覧）を先に決定
- 各セクションを個別に実装
- セクション間の余白リズムと視覚的つながりを最後に調整
タイポグラフィ
フォント選択は 文脈 → ムード → 書体 の順で決定する。
ルール
- 画面のトーンからムードキーワードを2つ選ぶ
references/typography-alternatives.md からムードに合うペアリングを選択- 見出しと本文で十分なコントラストを確保する
コントラスト要件
- ウェイト差 300以上（例: 見出し 800 / 本文 400）
- または セリフ × サンセリフの混合
- サイズ比は 1.5倍ではなく 2〜3倍 のジャンプを推奨
- 1ページにフォントファミリーは最大3つ
禁止
- 見出し・本文が同一ファミリー・同一ウェイト
- ウェイト差 200 以下（例: 400 vs 500）
- Blacklist フォントの使用
→ 詳細なペアリング集: references/typography-alternatives.md
カラー
パレットは コンセプト → 主色 → ニュートラル → アクセント の順で構築する。
ルール
- コンセプトから主色を1色決定（ブランドカラーがあればそれ）
- 主色の色相を混ぜたニュートラル群を導出（純粋なグレー
#808080 系は使わない）
- 補色関係または分割補色でアクセント色を1〜2色追加
- 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スロップに陥りやすい。以下の戦略を検討:
- 既存テンプレートベース: Figma Community / HTML テンプレートから出発し、カスタマイズする
- デザインシステム準拠: Material Design / Radix / shadcn/ui 等を土台に、トークンだけ差し替える
- Figma MCP 連携: Figma でデザインし、MCP 経由でコードに忠実変換する
いずれも「AIの自由生成域を狭める」ことで品質を担保する手法。
セルフレビューチェックリスト
UI実装後、以下を すべて 確認する。1つでも該当すれば修正:
基本チェック
タイポグラフィ
カラー
レイアウト
モーション
最終主観チェック
References
| ファイル | 内容 | いつ読むか |
|---|
references/typography-alternatives.md | ムード別フォントペアリング集（欧文・和文） | フォント選択時 |
references/color-system-guide.md | カラーパレット構築手順と CSS テンプレート | 配色設計時 |
references/layout-and-components.md | レイアウト・コンポーネントの代替パターン集 | 構造設計時 |
