Agent Skills › plugin87/ux-ui-agent-skills › token-build

token-build

GitHub

将 DTCG JSON 设计令牌转换为多平台前端及原生代码（CSS、Tailwind、JS、iOS/Android），并集成 CI 验证与对比度检查，确保主题文件同步。

.claude/skills/token-build/SKILL.md plugin87/ux-ui-agent-skills

Trigger Scenarios

生成跨平台主题文件配置令牌构建流水线同步设计令牌到代码

Install

npx skills add plugin87/ux-ui-agent-skills --skill token-build -g -y

More Options

Non-standard path

npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build -g -y

Use without installing

npx skills use plugin87/ux-ui-agent-skills@token-build

指定 Agent (Claude Code)

npx skills add plugin87/ux-ui-agent-skills --skill token-build -a claude-code -g -y

安装 repo 全部 skill

npx skills add plugin87/ux-ui-agent-skills --all -g -y

预览 repo 内 skill

npx skills add plugin87/ux-ui-agent-skills --list

SKILL.md

Frontmatter

{
    "name": "token-build",
    "description": "Set up or run the token build pipeline — transform the DTCG tokens\/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS\/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary \/ Tokens Studio \/ W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output."
}

Skill: Token Build

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.

Steps

Read ${CLAUDE_SKILL_DIR}/../../../workflows/token-build.md (architecture, tool options, resolution rules, output targets, CI).
Pick the tool: Style Dictionary (multi-platform, the default), Tokens Studio (Figma-owned tokens — pairs with figma-integration), W3C DTCG export, or a small custom script (model on ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py).
Honor the resolution rules: resolve aliases to final values per platform; expose semantic + component tokens (primitives stay internal); emit base + dark/brand/density overrides (${CLAUDE_SKILL_DIR}/../../../tokens/theming.json) as deltas only; format by $type.
Generate the requested target(s): CSS :root vars, Tailwind v4 @theme, typed JS/TS, iOS Asset Catalog + Color.DS/Spacing, Android colors.xml/Compose theme.
Wire CI: on ${CLAUDE_SKILL_DIR}/../../../tokens/*.json change, run ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py, regenerate, fail if committed artifacts are stale; gate colors with ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py.

Verification (definition of done)

python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py passes (no unresolved aliases).
Regenerating produces no diff vs. committed artifacts.
Dark/brand/density outputs contain only deltas, not full duplicates.