---
name: intentional-design-guard-b0467379565b
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 でデザイントークンを定義する。

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


---
Source attribution: mashharuki
Original project: https://github.com/mashharuki/AWS-SummitHackathon-2026/blob/5f2b67fd174e65b5eca533128877f7d97699007d/.claude/skills/intentional-design-guard/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 SABOROU Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: mashharuki
Original project: https://github.com/mashharuki/AWS-SummitHackathon-2026/blob/5f2b67fd174e65b5eca533128877f7d97699007d/.claude/skills/intentional-design-guard/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Development & Engineering
Roles: Frontend Developer, Product Designer, UX Designer
Specialties: Design, Frontend
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 5a9baa05c40e49b99232e514ea70c9fe7cda1d78a05351459e121c942f3ea766