design-tokens

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

使用例

• 「このプロジェクト用のデザイントークンをセットアップして」
• 「Dieter Ramsをベースにしたトークンシステムを生成してください」
• 「構築を始める前にスペーシングスケールとカラーパレットが必要」
• 「ブリーフに合わせたトークンを作成して」

プロセス

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などの同様の名前のファイル
   • package.json内のUIフレームワーク依存関係(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 custom properties(最も移植性の高い)をデフォルトにします

4. 常にライトモードとダークモード両方のパレットを生成します。 [data-theme="dark"]またはprefers-color-schemeメディアクエリを使用します。両方のパレットは、値を単に反転させたのではなく、選択した哲学に対して意図的に感じられるべきです。

トークンカテゴリ

カラー

/* 生の値ではなくセマンティックなカラートークン */
--color-bg-primary:          /* メイン背景 */
--color-bg-secondary:        /* セカンダリ/カード背景 */
--color-bg-tertiary:         /* 微細な背景(入力フィールド、ウェル) */
--color-bg-inverse:          /* 反転背景 */

--color-text-primary:        /* メインテキスト */
--color-text-secondary:      /* 薄いテキスト */
--color-text-tertiary:       /* プレースホルダー、無効化テキスト */
--color-text-inverse:        /* 反転背景上のテキスト */
--color-text-link:           /* リンクカラー */

--color-border-primary:      /* デフォルトボーダー */
--color-border-secondary:    /* 微細なボーダー */
--color-border-focus:        /* フォーカスリングカラー */

--color-accent-primary:      /* プライマリアクションカラー */
--color-accent-primary-hover:
--color-accent-primary-active:
--color-accent-secondary:    /* セカンダリアクションカラー */

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

--color-surface-overlay:     /* モーダル/ドロップダウンバックドロップ */

スペーシング

一貫性のあるスケールを生成します。ベースユニットは哲学と一致すべき:

• タイト系(ブルータリズム、スイス): 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:       /* 見出し/ディスプレイフォント */
--font-family-body:          /* ボディテキストフォント */
--font-family-mono:          /* コード/等幅フォント */

--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:             /* ヒーロー/ディスプレイサイズ */

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

--line-height-tight:         /* 見出し: 1.1-1.3 */
--line-height-normal:        /* ボディ: 1.4-1.6 */
--line-height-relaxed:       /* スペーシャスボディ: 1.6-1.8 */

--letter-spacing-tight:      /* ディスプレイタイプ */
--letter-spacing-normal:
--letter-spacing-wide:       /* 大文字、ラベル */

レイアウト

--max-width-content:         /* 最大読み取り幅(65-75ch相当) */
--max-width-wide:            /* ワイドコンテンツエリア */
--max-width-page:            /* フルページ最大幅 */

--border-radius-sm:
--border-radius-md:
--border-radius-lg:
--border-radius-full:        /* ピル/サークル */

--shadow-sm:
--shadow-md:
--shadow-lg:
--shadow-focus:              /* フォーカスリングシャドウ */

モーション

--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;    /* モバイル */
--breakpoint-md:   768px;    /* タブレット */
--breakpoint-lg:   1024px;   /* スモールデスクトップ */
--breakpoint-xl:   1280px;   /* デスクトップ */
--breakpoint-2xl:  1536px;   /* ワイドデスクトップ */

ダークモード

常にライトモードに合わせてダークモードトークンを生成します。ルール:

• 単に色を反転しないでください。ダーク背景は哲学に応じてウォームまたはクールであるべき。
• ダークモードでは対比をわずかに低下させます(純白テキストの純黒背景は厳しい)。
• シャドウはダークモードではライトモードと同じシャドウではなく、より暗く、より透明な値を使用すべき。
• アクセントカラーは対比率を保つために明度調整が必要になる場合があります。
• ユーザーがシステム設定と手動トグルの両方をサポートできるように、prefers-color-schemeメディアクエリと[data-theme="dark"]属性セレクタの両方を含めます。

:root {
  /* ライトモードトークン */
}

[data-theme="dark"] {
  /* ダークモードオーバーライド */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* システム設定ダークモード、ユーザーが明示的にライトを選択していない限り */
  }
}

出力

トークンファイルをプロジェクトのテックスタック用の適切な場所に保存します。トークンの導出元となった哲学を述べ、行われた逸脱または選択を記載します。