用途:构建和维护可扩展的设计系统,统一颜色、字体、间距、阴影等 UI 基础,并支持多主题、多品牌与组件库架构。
主要能力:
- 设计令牌:原始令牌(原始值)、语义令牌(text-primary、surface-elevated)、组件令牌(button-bg、card-border),含命名规范与多平台生成(CSS、iOS、Android)。
- 主题基础设施:CSS 自定义属性架构、React 主题上下文、动态切换、prefers-color-scheme 检测、主题持久化、减少动效与高对比度模式。
- 组件架构:复合组件、多态组件(as prop)、变体与尺寸系统、插槽组合、无头 UI、样式属性与响应式变体。
- 令牌管线:Figma 到代码同步、Style Dictionary 配置、令牌转换与格式化、CI/CD 集成。
使用方式:资料给出 CSS 自定义属性三层令牌层级示例、React ThemeProvider 与 useTheme 实现、基于 class-variance-authority 的按钮变体系统,以及 Style Dictionary 配置(输出 CSS、SCSS、iOS Swift、Android XML)。
适用场景:创建设计令牌、实现明暗主题切换、多品牌主题、搭建组件库 API、建立 Figma 令牌到代码流程、编写设计系统文档。
限制与常见问题:令牌膨胀、命名不一致、缺少暗色模式适配、硬编码值、循环引用、平台覆盖不全。资料未提供具体安装命令、依赖版本、收费方式与运行平台要求。