token-build について
token-build は、DTCG トークンを各プラットフォーム向けのファイルに変換するデザインシステム用スキルです。出力生成、トークン検証、CI チェックの手順を示します。
主な機能
- 01CSS、Tailwind、JS/TS、iOS、Android向け出力
- 02エイリアスとプラットフォーム値の解決
- 03テーマ上書きを差分として出力
- 04トークンとコントラストの検証
- 05CIで生成物をチェック
活用シーン
- 01複数プラットフォーム向けのデザイントークン生成
- 02CIへのトークン生成と検証の追加
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/token-buildを入力して読み込まれたか確認します。
詳細
スキル：トークンのビルド
ステップ 0：キットはありますか？ このスキルはキットからファイルを読み込みます。一度だけ確認してください：
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGKIT_MISSINGの場合、インストールされているのはスキルフォルダーだけです。これはnpx skills addの動作です。その旨を明確に伝え、npx ux-ui-agent-skills initまたはプラグインのインストールを案内して、ここで終了してください。開けなかったファイルの内容を推測してはいけません。
DTCG トークンの信頼できる唯一の情報源を、各プラットフォームですぐ使える出力に変換します。トークンは一度だけ作成し、すべてのプラットフォーム向け出力を生成します。
手順
${CLAUDE_SKILL_DIR}/../../../workflows/token-build.mdを読みます（アーキテクチャ、ツールの選択肢、解決ルール、出力先、CI）。- ツールを選択します：Style Dictionary（マルチプラットフォーム対応のデフォルト）、Tokens Studio（Figma 管理のトークン向け。
figma-integrationと組み合わせます）、W3C DTCG エクスポート、または小規模なカスタムスクリプト（${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.pyを参考にします）。 - 解決ルールに従います：エイリアスを各プラットフォームの最終値に解決し、セマンティックトークンとコンポーネントトークンを公開します（プリミティブは内部にとどめます）。ベース、ダーク、ブランド、密度のオーバーライド（
${CLAUDE_SKILL_DIR}/../../../tokens/theming.json）は差分のみとして出力し、$typeに基づいてフォーマットします。 - 指定されたターゲットを生成します：CSS の
:root変数、Tailwind v4 の@theme、型付き JS/TS、iOS Asset Catalog とColor.DS／Spacing、Android のcolors.xml／Compose テーマ。 - CI を設定します：
${CLAUDE_SKILL_DIR}/../../../tokens/*.jsonの変更時に${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.pyを実行し、再生成して、コミット済みの成果物が古い場合は失敗させます。${CLAUDE_SKILL_DIR}/../../../scripts/contrast.pyで色の条件をチェックします。
検証（完了の定義）
python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.pyが成功します（未解決のエイリアスがないこと）。- 再生成した結果が、コミット済みの成果物との差分を生じません。
- ダーク、ブランド、密度の出力には差分のみが含まれ、全体の重複はありません。
コメント
Markdown 対応