技能:Token Build
將 DTCG Token 原始檔案轉換為各平台可用的成品。Token 只需撰寫一次,即可產生所有平台的輸出。
步驟
- 閱讀
workflows/token-build.md(架構、工具選項、解析規則、輸出目標、CI)。 - 選擇工具:Style Dictionary(多平台,預設)、Tokens Studio(Figma 擁有的 Token — 與
figma-integration搭配使用)、W3C DTCG 匯出,或小型自訂腳本(參考scripts/validate_tokens.py)。 - 遵守解析規則:依平台將別名解析為最終值;公開語意 + 元件 Token(基本 Token 保持內部);僅以 Delta 方式輸出 base + dark/brand/density 覆蓋(
tokens/theming.json);依$type格式化。 - 產生要求的目標:CSS
:root變數、Tailwind v4@theme、型別安全的 JS/TS、iOS Asset Catalog +Color.DS/Spacing、Androidcolors.xml/Compose 主題。 - 設定 CI:當
tokens/*.json變更時,執行scripts/validate_tokens.py,重新產生,若提交的成品已過時則讓建置失敗;使用scripts/contrast.py檢查顏色對比。
驗證(完成定義)
python3 scripts/validate_tokens.py必須通過(無未解析的別名)。- 重新產生後與已提交的成品無差異。
- Dark/brand/density 輸出僅包含 Delta,而非完整重複。