工作方法
Design Tokens 建立新组件将引用的变量值。它先检查已有 CSS 变量、主题 provider、变量文件和框架依赖，再阅读功能的设计说明。如果系统已经存在，该 skill 会补齐缺口，而不是将其替换。
输出遵循项目技术栈，采用 CSS 自定义属性、Tailwind 配置或主题模块。文档规定的工作流同时包含浅色和深色配色，以及间距、文字排版、布局、动效和响应式值。智能体会解释所选视觉方向，以及任何偏离该方向的决策。
预期交付物
- 采用项目现有格式的变量文件或主题扩展。
- 围绕语义角色专门设计的浅色和深色配色。
- 对设计方向和实现选择的简要说明。
从简报到审查
- 01检查现有基础
查找 CSS 变量、Tailwind 配置、主题 provider 和变量导出。生成前先识别缺口，例如缺少深色模式或动效值。
- 02把设计说明与技术栈衔接
阅读当前功能说明及其审美方向。选择符合应用的变量格式；技术栈不明确时，默认使用 CSS 自定义属性。
- 03定义相关尺度
建立语义颜色及一致的间距、文字排版和布局值。包含组件可引用的动效和断点类别。
- 04构建两种主题模式
有针对性地设计深色值，并支持源文件中的系统偏好和手动主题模式。解释新值如何扩展现有系统。