用途:为产品族建立设计系统架构,把设计决策编码为数据,统一多团队、多平台的一致性,并支撑主题与多品牌扩展。
主要能力:
- 设计令牌三层架构:全局/原始令牌(原始值)、语义/别名令牌(设计意图)、组件令牌(具体应用),采用 W3C DTCG 格式,使用 $value、$type、$description 与 {} 引用语法,文件扩展名 .tokens.json。
- 令牌类别:颜色、间距、排版、圆角、阴影、时长、缓动、尺寸、透明度、z-index。
- 组件库架构:组件解剖(Props、Variants、States、Slots、Tokens、Accessibility、Documentation)、五级成熟度模型、API 设计原则(枚举优于布尔、组合优于配置、类型安全、转发 ref、多态渲染)。
- 主题架构:以 CSS 自定义属性作为运行时主题机制,支持 prefers-color-scheme 与手动覆盖。
- 多品牌:共享基础 + 品牌令牌 + 组件覆盖层 + 品牌×模式主题矩阵。
- 治理与扩展:集中式、联邦式、混合式贡献模型,RFC 变更流程,SemVer 版本策略与弃用。
- 设计到代码:Figma 与代码命名对齐、Token Studio、Style Dictionary 生成 CSS/SCSS、iOS、Android、React Native 输出及 TypeScript 类型。
使用方式:按需阅读技能内参考文档,如 references/governance-scaling.md、references/design-token-architecture.md、references/maturity-model-multi-brand.md、references/design-token-implementation.md、references/token-specification-guide.md;并交叉参考 ui-visual-design-system、accessibility-inclusive-design、interaction-motion-design、mobile-ux-design。
适用场景:需要统一设计语言、跨平台令牌分发、多品牌主题、组件库治理与设计到代码同步的团队。
限制:资料未提供具体安装命令、收费方式、平台支持范围与效果数据,暂未提供。