Back to Details

token-build

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Token Build

Skill: Token 构建

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

将 DTCG Token 唯一可信源转换为可直接在各平台使用的输出产物。Token 只需编写一次，即可生成所有平台的输出。

Steps

步骤

Read
```
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
```
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 (
```
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
```
tokens/*.json
```
change, run
```
scripts/validate_tokens.py
```
, regenerate, fail if committed artifacts are stale; gate colors with
```
scripts/contrast.py
```
.

阅读
```
workflows/token-build.md
```
（架构、工具选项、解析规则、输出目标、CI）。
选择工具：Style Dictionary（多平台，默认选项）、Tokens Studio（适用于 Figma 原生 Token —— 与
```
figma-integration
```
搭配使用）、W3C DTCG 导出，或小型自定义脚本（参考
```
scripts/validate_tokens.py
```
编写）。
遵守解析规则：按平台将别名解析为最终值；对外暴露语义化 Token 和组件 Token（基础 Token 保持内部使用）；仅以增量形式输出基础主题 + 暗色/品牌/密度覆盖配置（
```
tokens/theming.json
```
）；按
```
$type
```
格式化。
生成请求的目标产物：CSS
```
:root
```
变量、Tailwind v4
```
@theme
```
、带类型的 JS/TS、iOS Asset Catalog +
```
Color.DS
```
/
```
Spacing
```
、Android
```
colors.xml
```
/Compose 主题。
搭建 CI：当
```
tokens/*.json
```
变更时，运行
```
scripts/validate_tokens.py
```
，重新生成产物；若已提交的产物过期则构建失败；使用
```
scripts/contrast.py
```
校验颜色对比度。

Verification (definition of done)

验证（完成标准）

```
python3 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.

```
python3 scripts/validate_tokens.py
```
运行通过（无未解析的别名）。
重新生成的产物与已提交的产物无差异。
暗色/品牌/密度输出仅包含增量内容，而非完整重复内容。