SuperAPI AI 工具集

managing-design-tokens

设计与创作

查看项目

更新于 10-15 22:17

技能介绍

用途:帮助按 DTCG(Design Tokens Community Group)规范创建、组织、校验和迁移设计令牌,连接设计与代码。

主要能力:讲解令牌结构($value、$type、$description 等 $ 前缀属性);原子类型(color、dimension、fontFamily、fontWeight、duration、cubicBezier、number)与复合类型(strokeStyle、border、shadow、gradient、typography、transition);结构化颜色格式(colorSpace、components、alpha、hex,支持 srgb、display-p3、oklch、oklab、hsl、hwb、lab、lch 等);两种引用语法(花括号 {path.to.token} 与 JSON Pointer $ref);分组与 $type 继承;用 resolver 管理主题、平台、密度等上下文,含 sets、modifiers、resolutionOrder。

使用方式:按 primitives → semantic → components 分层组织 .tokens.json 文件;用 jq 校验 JSON、列出令牌路径、补 $extensions.mode 与 hex 回退;用 Terrazzo 构建,例如 npm install -D @terrazzo/cli @terrazzo/plugin-css,配置 terrazzo.config.mjs 后执行 npx terrazzo build;校验可用 terrazzo validate;迁移可用 terrazzo convert --from style-dictionary --to dtcg。

适用场景:设计系统令牌建模、明暗主题与多平台输出、Figma 变量导出导入、从 CSS 变量或 Style Dictionary 迁移、无障碍对比度与减弱动效标注。

限制:资料未提供具体收费、价格、平台支持范围与效果数据;涉及规范能力时应先查阅对应 reference 文件,不应凭假设判断规范限制。