design-tokens

このスキルは、プロジェクトの基盤となるデザイントークンを生成します。デザインブリーフの作成後、コンポーネントの構築前に実行してください。その後に構築するすべてのコンポーネントは、値をハードコードする代わりに、これらのトークンを参照します。

プロンプトの例

• 「このプロジェクトのデザイントークンを設定して」
• 「ディーター・ラムスに基づいてトークンシステムを生成して」
• 「構築を始める前に、スペーシングスケールとカラーパレットが必要です」
• 「ブリーフに合ったトークンを作成して」

プロセス

1. 既存のものを確認します。 何かを生成する前に、コードベースをスキャンして次の項目を確認します。

   • CSS 変数の定義（:root、[data-theme]、カスタムプロパティのファイル）
   • Tailwind の設定ファイル（tailwind.config.js、tailwind.config.ts）とテーマ拡張
   • テーマプロバイダーのファイル（Material UI の createTheme、Chakra の extendTheme、shadcn の globals.css）
   • デザイントークンの JSON ファイル（Style Dictionary 形式、Figma のトークンエクスポート）
   • tokens.css、variables.css、theme.css、または同様の名前のファイル
   • UI フレームワークの依存関係を確認できる package.json（tailwindcss、@mui/material、@chakra-ui/react など）

   トークンがすでに存在する場合は、置き換えるのではなく、拡張してください。不足している項目（ダークモードの欠如、不完全なスペーシングスケール、モーショントークンの欠如など）を特定し、それらを補います。

2. ブリーフを読みます。 .design/*/DESIGN_BRIEF.md にあるデザインブリーフを探します。サブフォルダーが複数ある場合は、最終更新日時が最も新しいものを使用するか、ユーザーがどの機能に取り組んでいるかを尋ねます。デザイン思想が指定されている場合は、/frontend-design のパラメーターを使ってトークンの値を導き出します。ブリーフがない場合は、希望する方向性をユーザーに尋ねます。

3. プロジェクトの技術スタックに合った形式でトークンを生成します。

   • Tailwind プロジェクト → tailwind.config.js を拡張し、globals.css に書き込みます
   • CSS／HTML プロジェクト → tokens.css ファイルに書き込みます
   • CSS-in-JS プロジェクト → theme.ts または theme.js ファイルに書き込みます
   • 判断できない場合は、CSS カスタムプロパティをデフォルトとして使用します（最も汎用性が高いため）

4. 必ずライトモードとダークモードの両方のパレットを生成します。 [data-theme="dark"] または prefers-color-scheme メディアクエリーを使用します。どちらのパレットも、単に値を反転させるのではなく、選択したデザイン思想に沿った意図のあるものにします。

トークンのカテゴリ

色

/* Semantic color tokens, not raw values */
--color-bg-primary:          /* Main background */
--color-bg-secondary:        /* Secondary/card background */
--color-bg-tertiary:         /* Subtle background (inputs, wells) */
--color-bg-inverse:          /* Inverted background */

--color-text-primary:        /* Main text */
--color-text-secondary:      /* Subdued text */
--color-text-tertiary:       /* Placeholder, disabled text */
--color-text-inverse:        /* Text on inverse backgrounds */
--color-text-link:           /* Link color */

--color-border-primary:      /* Default borders */
--color-border-secondary:    /* Subtle borders */
--color-border-focus:        /* Focus ring color */

--color-accent-primary:      /* Primary action color */
--color-accent-primary-hover:
--color-accent-primary-active:
--color-accent-secondary:    /* Secondary action color */

--color-status-success:
--color-status-warning:
--color-status-error:
--color-status-info:

--color-surface-overlay:     /* Modal/dropdown backdrop */

スペーシング

一貫性のあるスケールを生成します。基本単位はデザイン思想に合わせます。

• タイトなデザイン思想（ブルータリズム、スイススタイル）：4px を基本単位とします
• バランスの取れたデザイン思想（ラムス、スカンジナビアン）：4px または 8px を基本単位とします
• ゆとりのあるデザイン思想（日本のミニマリズム、エディトリアル）：8px を基本単位とし、より大きな倍率を使用します

--space-0:   0;
--space-1:   /* base * 0.25 */
--space-2:   /* base * 0.5 */
--space-3:   /* base * 0.75 */
--space-4:   /* base * 1 */
--space-5:   /* base * 1.5 */
--space-6:   /* base * 2 */
--space-7:   /* base * 3 */
--space-8:   /* base * 4 */
--space-9:   /* base * 6 */
--space-10:  /* base * 8 */
--space-11:  /* base * 12 */
--space-12:  /* base * 16 */

タイポグラフィ

--font-family-display:       /* Headline/display font */
--font-family-body:          /* Body text font */
--font-family-mono:          /* Code/monospace font */

--font-size-xs:
--font-size-sm:
--font-size-base:
--font-size-md:
--font-size-lg:
--font-size-xl:
--font-size-2xl:
--font-size-3xl:
--font-size-4xl:             /* Hero/display size */

--font-weight-normal:
--font-weight-medium:
--font-weight-semibold:
--font-weight-bold:

--line-height-tight:         /* Headings: 1.1-1.3 */
--line-height-normal:        /* Body: 1.4-1.6 */
--line-height-relaxed:       /* Spacious body: 1.6-1.8 */

--letter-spacing-tight:      /* Display type */
--letter-spacing-normal:
--letter-spacing-wide:       /* All-caps, labels */

レイアウト

--max-width-content:         /* Max reading width (65-75ch equivalent) */
--max-width-wide:            /* Wide content area */
--max-width-page:            /* Full page max width */

--border-radius-sm:
--border-radius-md:
--border-radius-lg:
--border-radius-full:        /* Pill/circle */

--shadow-sm:
--shadow-md:
--shadow-lg:
--shadow-focus:              /* Focus ring shadow */

モーション

--duration-instant:   50ms;
--duration-fast:      150ms;
--duration-normal:    250ms;
--duration-slow:      400ms;
--duration-slower:    600ms;

--easing-default:     cubic-bezier(0.4, 0, 0.2, 1);
--easing-in:          cubic-bezier(0.4, 0, 1, 1);
--easing-out:         cubic-bezier(0, 0, 0.2, 1);
--easing-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

レスポンシブブレークポイント

--breakpoint-sm:   375px;    /* Mobile */
--breakpoint-md:   768px;    /* Tablet */
--breakpoint-lg:   1024px;   /* Small desktop */
--breakpoint-xl:   1280px;   /* Desktop */
--breakpoint-2xl:  1536px;   /* Wide desktop */

ダークモード

ライトモードと併せて、必ずダークモードのトークンを生成します。ルール：

• 色を単純に反転させないでください。背景色はデザイン思想に応じて、暖色系または寒色系にします。
• ダークモードではコントラストを少し抑えます（純黒の背景に純白のテキストは刺激が強すぎます）。
• ダークモードのシャドウには、ライトモードと同じものではなく、より暗く透明度の高い値を使用します。
• コントラスト比を保つために、アクセントカラーの明度を調整する必要がある場合があります。
• システム設定と手動切り替えの両方に対応できるよう、prefers-color-scheme メディアクエリーと [data-theme="dark"] 属性セレクターを両方含めます。

:root {
  /* Light mode tokens */
}

[data-theme="dark"] {
  /* Dark mode overrides */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* System-preference dark mode, unless user explicitly chose light */
  }
}

出力

プロジェクトの技術スタックに適した場所にトークンファイルを保存します。トークンの基になったデザイン思想を明記し、変更点や選択した内容があれば記載します。