关于 token-build
token-build 是用于将 DTCG 令牌源转换为平台就绪文件的设计系统 Skill，指导团队生成输出、验证令牌并配置 CI 检查。
主要功能
- 01生成 CSS、Tailwind、JS/TS、iOS 和 Android 输出
- 02解析别名并处理平台值
- 03将主题覆盖输出为差异
- 04验证令牌与颜色对比度
- 05在 CI 中检查生成文件
适用场景
- 01为多个平台生成设计令牌
- 02在 CI 中加入令牌生成与验证
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/token-build确认已加载。
详细介绍
技能：令牌构建
步骤 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或安装插件，然后停止。不要猜测 无法打开的文件内容。
将 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、Androidcolors.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