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 対応