作業の進め方
Design Tokens は、新しいコンポーネントが参照する値を定義します。まず既存の CSS 変数、テーマ provider、トークンファイル、フレームワーク依存を調べ、機能のデザインブリーフを読みます。既存体系があれば置き換えず、不足を補います。
出力はプロジェクトの技術構成に合わせ、CSS カスタムプロパティ、Tailwind 設定、テーマモジュールのいずれかにします。文書化された手順にはライトとダーク両方のパレットに加え、間隔、文字、レイアウト、動き、レスポンシブの値が含まれます。エージェントは選んだ視覚方針と、そこから外れる判断を説明します。
想定される成果物
- プロジェクトの形式に合わせたトークンファイルまたはテーマ拡張。
- 意味上の役割を持ち、意図して設計されたライト・ダークのパレット。
- デザイン方針と実装上の選択についての簡潔な説明。
ブリーフからレビューまで
- 01既存の基盤を調べる
CSS 変数、Tailwind 設定、テーマ provider、トークンのエクスポートを探します。生成前に、ダークモードや動きの値の不足などを確認します。
- 02ブリーフと技術構成を結び付ける
対象機能のブリーフと美的方針を読みます。アプリに合うトークン形式を選び、構成が不明な場合は CSS カスタムプロパティを既定とします。
- 03関連するスケールを定義する
セマンティックカラーと一貫した間隔・文字・レイアウト値を作成します。コンポーネントが参照できる動きとブレークポイントの分類も含めます。
- 04両テーマを構築する
ダーク用の値を意図して設計し、ソースが示すシステム設定と手動テーマ選択のパターンをサポートします。新しい値が既存体系をどう拡張するかを説明します。