以 skill 自身的术语
该 skill 通过设计 token、主题基础设施和组件架构模式来构建可扩展的设计系统。它创建三层 token 层级结构——原始值层的 primitive token、承载语境意义的 semantic token，以及特定用法的 component token——然后使用 CSS custom properties 和 React context provider 实现主题切换。
该 skill 处理面向 CSS、iOS 和 Android 的多平台 token 生成，借助 Style Dictionary 建立 Figma 到代码的工作流，并使用复合组件、多态组件、variant、slot 和 headless UI 模式来构建组件库架构。它可检测 prefers-color-scheme 等系统偏好以及减少动态效果模式。
它产出什么
- 为 CSS、iOS 和 Android 生成的多平台 token 文件
- 具备 variant 与尺寸体系的组件库
- 设计系统文档与规范指南
工作方式
- 01定义 Primitive Token
为颜色、尺寸和字体创建原始值 token，作为基础层。这些是十六进制代码和像素度量等字面值。
- 02构建 Semantic Token 层
引用 primitive token 来创建具有语境意义的 token，如 text-primary、surface-elevated 和 border-default，它们承载意义而非视觉描述。
- 03创建特定组件的 Token
为特定组件用法定义 token，例如 button-bg 和 card-border，它们引用 semantic token。