用途:该技能用于设计令牌(Design Token)管理,遵循 W3C 设计令牌社区组(DTCG)规范,为颜色、间距、字体、阴影等设计决策提供单一事实来源,供 Figma、Penpot 等设计工具与 CSS、Tailwind、iOS、Android 等代码端共享。
主要能力:包含 8 条规则文件,分别覆盖 W3C 令牌格式、对比度强制校验、三层令牌层级、OKLCH 色彩空间、间距与深度、Style Dictionary 转换、主题与暗色模式、版本化。三层层级为全局(原始值)、别名(语义含义)、组件(局部用法),通过替换别名映射即可切换主题而不改动组件令牌。OKLCH 提供感知均匀性,仅调整亮度通道即可生成对比度一致的色阶。
使用方式:令牌以 .tokens.json 文件编写,使用 $type/$value 字段,引用采用 {path.to.token} 别名语法。Style Dictionary 5.x 可将令牌转换为 CSS 自定义属性、Tailwind 主题、iOS Swift、Android XML 等平台输出;5.3+ 原生支持 OKLCH 输出,dimension 类型使用对象形式 { "value": 16, "unit": "px" }。主题通过 CSS 自定义属性配合 data-theme 属性实现。
适用场景:设计系统建设、跨平台令牌分发、暗色模式与多主题支持、令牌版本演进与迁移。
限制:资料未提供具体安装命令、收费信息或性能数据;部分规则细节需查阅对应规则文件。反模式包括组件中硬编码值、扁平令牌结构、用 HSL 生成色阶、省略 $type、用类切换原始值实现主题、令牌包不做版本化。