Communitygithub.com

プラグイン87/トークンビルド

DTCGトークン（JSON）から、CSS変数、Tailwind @theme、JS/TS、iOSアセットカタログ、Android/Composeなど、プラットフォーム別のテーマファイルを生成・セットアップするスキル。ユーザーがトークンからテーマファイルを作成したい、トークンCIを構築したい、マルチプラットフォーム出力を得たい場合に使用する。

トークンビルド とは？

このスキルは、DTCG（Design Token Community Group）形式のトークンJSONファイルを単一の真実源として、複数のプラットフォーム向け出力に変換するトークンビルドパイプラインを設定・実行するためのものです。主なツールとしてStyle Dictionary（マルチプラットフォーム・デフォルト）、Tokens Studio（Figma連携）、W3C DTCGエクスポート、またはカスタムスクリプト（`scripts/validate_tokens.py`をモデルに）を選択できます。生成可能なターゲットは、CSS変数、Tailwind v4の`@theme`、型付きJS/TS、iOSアセットカタログ＋`Color.DS`/`Spacing`、Androidの`colors.xml`/Composeテーマです。また、トークン変更をトリガーとしたCIパイプラインの構築を支援し、`scripts/validate_tokens.py`による検証と、ダーク/ブランド/デンシティオーバーライドを差分のみで出力する最適化ルールに従います。このスキルはClaude Code、Cursor、Codexなどのエージェントで使用可能で、ワークフローファイル（`workflows/token-build.md`）に従ってアーキテクチャ、ツール選択、解決ルール、出力ターゲット、CI設定を段階的に実行します。

対応~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

スキル: トークンビルド

DTCGトークンの真実源をプラットフォーム対応の出力に変換します。トークンは一度作成すれば、すべてのプラットフォーム出力が自動生成されます。

手順

  1. workflows/token-build.md を読む（アーキテクチャ、ツールオプション、解決ルール、出力ターゲット、CI）。
  2. ツールを選択する: Style Dictionary（マルチプラットフォーム、デフォルト）、Tokens Studio（Figma所有トークン — figma-integrationと組み合わせて使用）、W3C DTCGエクスポート、または小規模なカスタムスクリプト（scripts/validate_tokens.pyをモデルに）。
  3. 解決ルールに従う: エイリアスをプラットフォームごとの最終値に解決する。セマンティックトークンとコンポーネントトークンを公開する（プリミティブは内部に留める）。ベース＋ダーク/ブランド/デンシティのオーバーライド（tokens/theming.json）は差分のみとして出力する。$type に基づいてフォーマットする。
  4. 要求されたターゲットを生成する: CSS :root 変数、Tailwind v4 @theme、型付き JS/TS、iOS アセットカタログ + Color.DS/Spacing、Android colors.xml/Compose テーマ。
  5. CI を構築する: tokens/*.json の変更をトリガーに、scripts/validate_tokens.py を実行し、再生成する。コミットされたアーティファクトが古い場合は失敗させる。scripts/contrast.py で色をゲートする。

検証（完了条件）

  • python3 scripts/validate_tokens.py がパスすること（未解決のエイリアスがないこと）。
  • 再生成してもコミットされたアーティファクトとの差分が生じないこと。
  • ダーク/ブランド/デンシティの出力には差分のみが含まれ、全体の複製ではないこと。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community