mcpField
D
design-tokens

design-tokens

github.com/plugin87デザイン・UI3.1k558 回インストール3 日前に更新
リポジトリ

design-tokens について

design-tokensは、3階層の体系でDTCGトークンを作成・管理するデザインスキルです。プロジェクトのルールに従い、JSON構造とエイリアス解決を検証します。

主な機能

  1. 01DTCGトークンの生成と更新
  2. 023階層でのトークン整理
  3. 03OKLCHパレットの生成
  4. 04コントラスト基準の確認
  5. 05JSONとエイリアスの検証

活用シーン

  1. 01新しいパレットのトークン作成
  2. 02既存トークンセットの拡張
  3. 03トークンファイルとエイリアスの検証

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-tokens

インストール後、Claude Code で/design-tokensを入力して読み込まれたか確認します。

詳細

スキル：デザイントークン

ステップ 0：キットはありますか？ このスキルはキットのファイルを読み込みます。次のコマンドを一度実行してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーのみです。これは npx skills add の動作です。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を推測してはいけません。

プロジェクトの 3 層システムに従って、DTCG（$type／$value）トークンを作成・保守します。

手順

  1. ${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md の「Token System」および「Color Guidelines」と、ルールが記載された ${CLAUDE_SKILL_DIR}/../../../.claude/rules/typography-and-spacing.md を読み込みます（4px 基準、Major Third スケール、OKLCH パレット生成、セマンティックレイヤーでのダークモード）。
  2. 構造を合わせるため、${CLAUDE_SKILL_DIR}/../../../tokens/ にある関連ファイルを読み込みます：colors.json、typography.json、spacing.json、shadows.json、borders.json、breakpoints.json、motion.json、gradients.json、opacity.json、blur.json、sizing.json、states.json、theming.json。
  3. トークンを生成・拡張します：
    • プリミティブは生の値（直接使用しません）。セマンティックは用途に応じたエイリアスです。コンポーネントはコンポーネントスコープです。
    • 新しいパレットでは、11 段階の OKLCH シェードを生成し、a11y-audit スキル／${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py を使用して、白地で 500 が 4.5:1 以上（テキスト）、600 が 3:1 以上（UI）であることを確認します。
    • マルチブランド／密度には theming.json を使用します。
  4. 検証：python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py を実行します（JSON の妥当性とエイリアスの解決）。

出力

DTCG JSON。すべてのトークンで $description を保持します。ハードコードせず、参照してください。

コメント

Markdown 対応