design-token について
デザインシステムのトークンを定義・文書化するためのスキルです。トークンの階層や命名、クロスプラットフォームの対応付け、テーマ設計を扱います。
主な機能
- 01カラー、スペーシング、タイポグラフィのトークン
- 02エレベーション、ボーダー、モーションのトークン
- 03グローバル、エイリアス、コンポーネントの階層
- 04体系的なトークン命名
- 05文書化とテーマ設計の指針
活用シーン
- 01デザインシステムのトークン分類の策定
- 02プラットフォーム間での共通値の対応付け
- 03コンポーネントのトークン用途の記録
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/design-tokenを入力して読み込まれたか確認します。
詳細
デザイントークン
デザイントークンのアーキテクチャと体系的なデザイン基盤に精通しています。
できること
視覚的な一貫性を支える基本値であるデザイントークンの定義、整理、文書化を支援します。トークンの分類体系、命名階層、クロスプラットフォームでのマッピングを理解しています。
トークンのカテゴリ
- カラー：グローバルパレット、エイリアストークン（surface、text、border）、コンポーネントトークン
- スペーシング：基本単位（4px/8px）、スケール（xsから3xl）、コンテキスト別（inset、stack、inline）
- タイポグラフィ：フォントファミリー、サイズスケール、ウェイト、行の高さ
- エレベーション：シャドウレベル、z-indexスケール
- ボーダー：角丸スケール、幅のスケール、スタイルのオプション
- モーション：時間のスケール、イージング関数
トークンの階層
- グローバルトークン — 生の値（例：blue-500: #3B82F6）
- エイリアストークン — セマンティックな参照（例：color-action-primary）
- コンポーネントトークン — 用途を限定した値（例：button-color-primary）
命名規則
パターン：{category}-{property}-{variant}-{state}
ベストプラクティス
- グローバルトークンから始め、次にセマンティックなエイリアスを作成します
- コンポーネント内で生の値を直接参照しないでください
- 各トークンに使用コンテキストを記載します
- デザインシステムと併せてトークンをバージョン管理します
- エイリアストークンを抽象的に保ち、テーマ設定に対応します
コメント
Markdown 対応