用途:为项目生成 DESIGN_SYSTEM.md 与 globals.css,作为全部视觉决策的唯一来源。生成前会读取 progress.txt 中的品牌色、风格方向与字体偏好,检查是否存在 UI_UX_SELECTIONS 块(存在则优先采用其中的配色、排版与组件风格),并读取 ./docs/TECH_STACK.md 判断 CSS 方案(Tailwind、CSS Modules、纯 CSS 或 SCSS),读取 ./docs/PRD.md 了解应用类型以影响组件令牌。
主要能力:输出完整颜色令牌表(品牌色、primary 50-950 色阶、3 组渐变、中性色、语义色)、排版系统(字体栈与字号比例、字重)、间距(4px 基准,space-1 至 space-20)、圆角、阴影、断点(sm 640px 至 2xl 1536px,移动优先)、动画时长与缓动、z-index 层级、组件令牌(按钮变体与尺寸、输入框状态与尺寸、卡片变体),以及完整 :root{} 与 .dark{} CSS 变量块;按需附带 Tailwind 配置片段。文档结构依序为概述、颜色令牌、排版、间距、圆角、阴影、断点、动画、z-index、组件令牌、CSS 变量、Tailwind 配置(如适用)、用色规则。
使用方式:流程为提取设计输入、生成令牌、构建各系统、输出 CSS 变量、依据 TECH_STACK.md 检测 CSS 方案(使用 Tailwind 则输出配置片段与含 @tailwind 或 @import "tailwindcss"(v4)的 globals.css,非 Tailwind 则跳过配置、globals.css 仅用纯 CSS :root{}),保存 ./docs/DESIGN_SYSTEM.md 与 ./src/styles/globals.css(或等价根 CSS 文件),展示前 20 行预览,运行校验清单,最后询问是否批准或要求修改。
限制与规则:所有十六进制值须来自品牌色问询或 UI/UX 选择,最终不得残留 #XXXXXX 占位;须给出全部 11 个主色阶真实色值;中性令牌须定义明暗配对;globals.css 即使 CSS 变量不完整也要生成;Tailwind 配置使用 CSS 变量引用而非硬编码色值,暗色模式仅切换 .dark 类;字体族仅在 globals.css 声明一次;须包含用色规则(始终用 var(--color-primary) 或 className="text-primary",禁止硬编码)。校验项覆盖品牌色填充、完整色阶、3 组渐变变量、中性色暗色值、精确字体名、globals.css 生成保存、Tailwind 变量引用(非 Tailwind 跳过)、用色规则与无占位文本。未提供具体命令、收费与平台信息。