以 skill 自身的术语
一个设计系统工具包，可将单一品牌色转化为完整的 token 集合。design_token_generator.py 接受一个十六进制颜色值和 modern、classic 或 playful 预设，返回颜色、字体排版、8pt 间距、尺寸、边框、阴影、动画、断点和 z-index 层级，格式可为 json、css、scss 或摘要。
随后的四个工作流涵盖从原子到模板的组件架构、使用 clamp() 流体排版的响应式断点、WCAG 对比度校验，以及面向构建团队的开发交接（转换为 React CSS 变量、Tailwind 配置或 styled-components），并通过 Tokens Studio 实现 Figma 同步。该工具面向需要为构建团队记录 token 和组件的资深 UI 设计师。
它产出什么
- 组件 API 文档，涵盖属性、变体选项、状态和无障碍要求。
- 面向 React 的集成代码片段，包括 CSS 变量、Tailwind 主题配置和 styled-components。
- 自带对比色的语义化颜色 token。
工作方式
- 01确定品牌色
该工作流首先确定品牌主色，该文件要求以十六进制格式提供，因为所有生成的类别都由此派生而来。
- 02运行 Token 生成器
一次脚本调用即可生成整套系统：它接受颜色、样式预设和输出格式这三个参数。
- 03将 Token 映射到组件层级
组件按原子、分子、组织和模板进行组织，然后每一层都关联到它所使用的 token 组。
- 04设置断点与流体字号
六个断点从 xs 到 2xl，流体字体大小通过最小值与最大值之间的 clamp 公式表达。
- 05将 Token 接入代码库
交付工作流展示了直接导入 token 文件、基于该 JSON 构建的 Tailwind theme，以及读取 token 键值的 styled-components theme。
- 06同步 Figma 并完成交付确认
Token 通过 Tokens Studio 插件导入 Figma，交付清单用于确认流水线、组件库和文档均已完成。