Communitygithub.com

token-build

設定或執行 Token 建置管線,將 DTCG tokens/*.json(原始檔案)轉換為各平台成品(CSS 變數、Tailwind @theme、JS/TS、iOS Asset Catalog、Android、Compose),使用 Style Dictionary / Tokens Studio / W3C DTCG 匯出。

token-build 是什麼?

此技能用於將 DTCG 格式的設計 Token(tokens/*.json)轉換為多個平台的成品。它支援 Style Dictionary、Tokens Studio、W3C DTCG 匯出或自訂腳本等多種工具,並能根據解析規則正確處理別名與主題覆蓋。產生的輸出包含 CSS `:root` 變數、Tailwind v4 `@theme`、型別安全的 JS/TS、iOS Asset Catalog 與 `Color.DS`/`Spacing`,以及 Android `colors.xml`/Compose 主題。此外,還能整合 CI 流程,在 Token 變更時自動驗證與重新產生,並檢查對比度與成品是否過時。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

技能:Token Build

將 DTCG Token 原始檔案轉換為各平台可用的成品。Token 只需撰寫一次,即可產生所有平台的輸出。

步驟

  1. 閱讀 workflows/token-build.md(架構、工具選項、解析規則、輸出目標、CI)。
  2. 選擇工具:Style Dictionary(多平台,預設)、Tokens Studio(Figma 擁有的 Token — 與 figma-integration 搭配使用)、W3C DTCG 匯出,或小型自訂腳本(參考 scripts/validate_tokens.py)。
  3. 遵守解析規則:依平台將別名解析為最終值;公開語意 + 元件 Token(基本 Token 保持內部);僅以 Delta 方式輸出 base + dark/brand/density 覆蓋(tokens/theming.json);依 $type 格式化。
  4. 產生要求的目標:CSS :root 變數、Tailwind v4 @theme、型別安全的 JS/TS、iOS Asset Catalog + Color.DS/Spacing、Android colors.xml/Compose 主題。
  5. 設定 CI:當 tokens/*.json 變更時,執行 scripts/validate_tokens.py,重新產生,若提交的成品已過時則讓建置失敗;使用 scripts/contrast.py 檢查顏色對比。

驗證(完成定義)

  • python3 scripts/validate_tokens.py 必須通過(無未解析的別名)。
  • 重新產生後與已提交的成品無差異。
  • Dark/brand/density 輸出僅包含 Delta,而非完整重複。

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.

相關技能