# Intentional Design Guard

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

- Skill: `mashharuki/intentional-design-guard` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add mashharuki/intentional-design-guard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mashharuki/intentional-design-guard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mashharuki (https://skillmd.com/u/mashharuki)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/mashharuki/intentional-design-guard

---


# 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 でデザイントークンを定義する。

```css
: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` | レイアウト・コンポーネントの代替パターン集 | 構造設計時 |