design-intelligence

デザインインテリジェンス — トークン生成とデザインシステムの初期構築

このスキルは、デザインシステムをゼロからセットアップするのに役立ちます。プロジェクトのコンテキスト（業界、ブランド、ユーザー）を指定すると、すぐに使えるデザイントークンを生成し、Tailwind の設定スニペットと CSS 変数ファイルを出力します。

使用するタイミング

• 新しいプロジェクトのデザインシステムをセットアップするとき（/spartan:ux system）
• 特定の業界やブランドに合ったカラーパレットを選ぶとき
• タイポグラフィのスケールを生成するとき
• 余白のシステムを作成するとき
• コンポーネント一覧を初期構築するとき

このスキルでできること

1. プロジェクトのコンテキスト（何を作るのか、誰が使うのか、業界、個性）を受け取ります
2. デザイントークン一式を生成します
3. 3 つの形式で出力します：トークンリファレンスドキュメント、Tailwind 設定、CSS 変数
4. プロジェクトの種類に基づいてコンポーネント一覧を作成します

動作の仕組み

ステップ 1：コンテキストを収集する

以下の質問をします（ユーザーがすでに回答している項目は省略します）。

1. 何を作っていますか？（ダッシュボード、SaaS、マーケットプレイス、モバイルアプリ、ランディングページなど）
2. 誰が使いますか？（開発者、ビジネスユーザー、消費者、管理者）
3. どのような個性を持たせますか？ 以下から 2～3 つ選んでください。
   • クリーン／プロフェッショナル／コーポレート
   • 大胆／遊び心のある／クリエイティブ
   • ミニマル／テクニカル／開発者向け
   • 温かみのある／親しみやすい／近寄りやすい
   • プレミアム／高級感のある／洗練された
   • データ量が多い／高密度／情報豊富
4. ライト、ダーク、または両方ですか？
5. すでに決まっているブランドカラーはありますか？（ある場合は、それを基礎として使います）
6. 参考にしたいアプリはありますか？（求める品質を備えたアプリ）

ステップ 2：カラーパレットを生成する

コンテキストに基づいて、パレット一式を生成します。

ダークテーマの場合：

Background:     #0F172A (slate-900 family)
Surface:        rgba(30, 41, 59, 0.5) (glass effect)
Primary:        [based on personality — blue for professional, green for growth, etc.]
Primary Hover:  [10% darker]
Accent:         [complementary or analogous — use sparingly, max 10-15%]
Text:           #F8FAFC (near white)
Text Secondary: #94A3B8 (slate-400)
Text Muted:     #64748B (slate-500)
Border:         rgba(148, 163, 184, 0.1)
Success:        #22C55E
Warning:        #F59E0B
Error:          #EF4444

ライトテーマの場合：

Background:     #FFFFFF or #F8FAFC
Surface:        #FFFFFF
Primary:        [based on personality]
Primary Hover:  [10% darker]
Accent:         [complementary]
Text:           #0F172A (near black)
Text Secondary: #475569 (slate-600)
Text Muted:     #64748B (slate-500)
Border:         #E2E8F0 (slate-200)
Success:        #16A34A
Warning:        #D97706
Error:          #DC2626

個性に応じた色の選択：

個性	プライマリの範囲	アクセントの範囲
プロフェッショナル／コーポレート	青（#2563EB → #1E40AF）	スレートまたはアンバー
大胆／クリエイティブ	紫（#7C3AED）、ピンク（#EC4899）	黄色またはシアン
ミニマル／テクニカル	グレー（#374151）、黒（#111827）	明るいアクセントカラーを 1 色
温かみのある／親しみやすい	オレンジ（#EA580C）、ティール（#0D9488）	アンバーまたはローズ
プレミアム／高級感のある	ディープブルー（#1E3A5F）、ゴールド（#B8860B）	シルバーまたはシャンパン
データ量が多い	ニュートラルブルー（#3B82F6）	ポジティブな値には緑、ネガティブな値には赤

ステップ 3：タイポグラフィのスケールを生成する

個性に基づいてフォントの組み合わせを選びます。

個性	おすすめのフォント	理由
プロフェッショナル	DM Sans、Plus Jakarta Sans	クリーンな幾何学的デザインで、UI に適しています
テクニカル	JetBrains Mono（コード）＋ Inter（UI）	開発者に適しています
クリエイティブ	Outfit、Space Grotesk	個性的でありながら読みやすい
温かみのある	Nunito、Quicksand	丸みがあり、親しみやすい印象
プレミアム	Playfair Display（見出し）＋ Lato（本文）	エレガントなコントラスト
データ量が多い	Inter、Roboto Mono（数値）	表形式の数値と高い可読性

タイプスケール（基本サイズ 16px）：

h1: 36px / 700 / 1.2 line-height
h2: 30px / 700 / 1.25
h3: 24px / 600 / 1.3
h4: 20px / 600 / 1.35
h5: 18px / 600 / 1.4
h6: 16px / 600 / 1.4
body: 16px / 400 / 1.6
body-sm: 14px / 400 / 1.5
caption: 12px / 500 / 1.4

ステップ 4：余白と角丸を生成する

余白スケール（基本サイズ 8px）：

xs:   4px   (0.25rem)
sm:   8px   (0.5rem)
md:   16px  (1rem)
lg:   24px  (1.5rem)
xl:   32px  (2rem)
2xl:  48px  (3rem)
3xl:  64px  (4rem)

個性に応じた角丸：

個性	カード	ボタン	バッジ	入力欄
プロフェッショナル	8px	6px	4px	6px
ミニマル	0～4px	4px	2px	4px
親しみやすい	12～16px	8px	9999px	8px
プレミアム	12px	8px	6px	8px

個性に応じたシャドウ：

個性	スタイル
プロフェッショナル	控えめ：0 1px 3px rgba(0,0,0,0.1)
ミニマル	なし、または非常に控えめな境界線
親しみやすい	柔らかい：0 4px 12px rgba(0,0,0,0.08)
プレミアム	多層：0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08)
ダークテーマ	グロー：0 0 20px rgba(primary, 0.15)

ステップ 5：3 つの形式で出力する

形式 1：トークンリファレンスドキュメント（.planning/design/system/tokens.md）

すべてのトークンをまとめた、人が読みやすい Markdown 形式です。デザイナーやすべてのコマンドで使用します。

形式 2：Tailwind 設定スニペット

// Paste into tailwind.config.ts → theme.extend
{
  colors: {
    primary: '[value]',
    'primary-hover': '[value]',
    accent: '[value]',
    background: '[value]',
    surface: '[value]',
    // ... all color tokens
  },
  fontFamily: {
    sans: ['[font]', 'sans-serif'],
  },
  borderRadius: {
    card: '[value]',
    button: '[value]',
  },
  boxShadow: {
    card: '[value]',
  },
}

形式 3：CSS 変数

:root {
  /* Colors */
  --color-primary: [value];
  --color-primary-hover: [value];
  --color-accent: [value];
  --color-bg: [value];
  --color-surface: [value];
  --color-text: [value];
  --color-text-secondary: [value];
  --color-text-muted: [value];
  --color-border: [value];
  --color-success: [value];
  --color-warning: [value];
  --color-error: [value];

  /* Typography */
  --font-family: '[font]', sans-serif;
  --font-size-h1: 36px;
  /* ... full scale */

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radius */
  --radius-card: [value];
  --radius-button: [value];
  --radius-badge: [value];

  /* Shadows */
  --shadow-sm: [value];
  --shadow-md: [value];
  --shadow-lg: [value];
}

ステップ 6：コンポーネント一覧の作成

プロジェクトの種類に基づいて、必要なコンポーネントを一覧にします。

ダッシュボード／SaaS：

• サイドバーナビゲーション、トップバー、統計カード、データテーブル、グラフ、モーダル、フォーム、トースト通知、ドロップダウンメニュー、バッジ、アバター、パンくずリスト

マーケットプレイス／Eコマース：

• 商品カード、検索バー、フィルター、カート、チェックアウトフォーム、レビュー、評価、画像ギャラリー、価格表示、カテゴリナビゲーション

モバイルアプリ：

• ボトムタブバー、プルして更新、スワイプ可能なカード、アクションシート、フローティングアクションボタン、リスト項目、空の状態、オンボーディング画面

ランディングページ：

• ヒーローセクション、機能グリッド、お客様の声、料金表、CTA ボタン、フッター、ナビゲーション、ソーシャルプルーフ

コンポーネント一覧を .planning/design/system/components.md に保存します。

---

コード生成時のデザインシステムの制約

UI コードを生成する際に、デザイントークンがすでに存在する場合：

最初に .planning/design/system/tokens.md または .planning/design-config.md を読み込みます。コードではこれらのトークンを必ず使用してください。Tailwind のデフォルト値、汎用色、独自に考案した余白は使用しないでください。

ジャズミュージシャンをイメージしてください。コード進行（トークン）は決まっています。その範囲内で美しく仕上げるのがあなたの役目です。キーを変えてはいけません。

---

提出前のチェックリスト

• 3 種類すべての出力形式（トークンドキュメント、Tailwind、CSS 変数）を作成した
• 色のコントラストが十分である（テキストは 4.5:1）
• タイポグラフィのスケールに一貫性があり、読みやすい
• 余白にグリッドを使用している（任意の値を使用していない）
• コンポーネント一覧がプロジェクトの種類に合っている
• design-config.md を更新した（以前から存在していた場合）