设计系统生成器 是做什么的？
构建让产品保持一致的最小化系统。设计系统是一组决策，而不是大量值的集合：精心命名的少量令牌胜过无人使用的庞大数值库。
如果已安装 frontend-design 技能，frontend-design/references/tokens.md 中包含一个完整的、经过对比度检查的起始集；建议从它开始并根据需要调整。
1. 输入
- 读取现有内容：当前 CSS、Tailwind 配置、主题文件、组件库、品牌资产。清点实际使用的值（颜色、字号、间距、半径）及其出现频率。
- 明确（或推断并说明）产品的调性、平台（web、iOS、Android）、密度，以及是否需要暗色模式和高对比度模式。
2. 架构：三层
- 原始令牌：具有中性名称的原始值。
--gray-50 ... --gray-950、--blue-600、--space-4、--radius-md。永不在组件中直接使用。 - 语义令牌：基于用途的别名。
--bg、--surface、--surface-sunken、--border、--border-strong、--text、--text-muted、--text-subtle、--accent、--accent-fg、--accent-subtle、--focus-ring、--success、--warning、--danger、--info（及相关-subtle变体）。主题通过切换这些值来实现。 - 组件令牌（仅在需要时）：
--button-height-md、--input-border、--card-padding。当某个组件需要独立主题化时添加。
命名规则：类别-角色-变体-状态（--text-muted、--accent-hover）。语义令牌中不包含颜色名称（使用 --accent 而非 --blue）。
3. 需要做出的决策
- 间距：基于 4px。刻度：0、2、4、8、12、16、20、24、32、40、48、64、80、96、128。（Fluent 2 和 Material 都基于 4px；Tailwind 的默认刻度也基于 4px。）
- 字体：一到两个字体族；模块化缩放（紧凑型 1.2、产品型 1.25、编辑型 1.333+）；使用角色而非固定字号（展示、标题、标题、正文、标签、说明、代码）；每个角色设置行高；仅对展示尺寸使用
clamp()进行流式缩放。 - 颜色：10-12 步中性色阶（有意选择微暖或微冷）、一个强调色阶、四个语义色相。使用 OKLCH 色彩空间生成均匀感知步进。
- 圆角：一个圆角家族（锋利、柔和或圆润），包含 3-4 个步进加
full。 - 阴影：最多 3 级（凸起、浮动、覆盖），双层中性阴影；在暗色模式下偏好在较浅的表面上使用较浅的阴影，而非更深的阴影。
- 动效：3 个时长（快速 ~140ms、基础 ~220ms、慢速 ~320ms）、3 个缓动曲线（缓出、缓入、缓入缓出），以及一条减少动效规则。
- 层级：一个小型 z-index 刻度（粘性、下拉、覆盖、对话框、提示、工具提示）。
- 断点：内容驱动；常用设置为 640、768、1024、1280、1536。
4. 主题与对比度
- 同时定义亮色和暗色主题。暗色模式：接近黑色的背景（非 #000）、偏白的文本（非 #fff）、用于层级提升的较浅表面、强调色变亮并轻微去饱和。
- 添加
prefers-contrast: more的变体，增强边框和弱化文本的对比度。 - 使用 WCAG 2.0 公式验证每一对文本/背景组合并发布对比度比率：文本 4.5:1，大文本和有意义的 UI（输入边框、图标、焦点环）3:1。在文档中包含这些数值；未经计算请勿声称“符合 AA 级”。
5. 交付物
根据项目技术栈，产出：
tokens.css（CSS 自定义属性，包含亮色 + 暗色 + 高对比度），和/或 Tailwind 主题映射（v4 使用@theme，v3 使用theme.extend），和/或tokens.json（若使用 Style Dictionary 等管道，则采用 W3C 设计令牌社区组格式）。- 一份简短的
DESIGN.md文档，包含：原则（3-5 行）、含对比度比率的令牌表、字体角色、间距使用规则，以及核心组件（按钮、输入框、卡片、对话框、表格、提示）的示例与反例。 - 可选：一个单独的
styleguide.html/ Story 页面，在亮暗两种主题下渲染每个令牌和组件状态，以便视觉检查系统。
6. 迁移（现有产品）
- 将现有值映射到最近的令牌；列出即将消失的值及其原因。
- 按顺序替换：先颜色，然后间距，再字体，最后圆角和阴影。
- 如果代码库较大，暂时保留一个旧名称的别名层。
检查清单
- 原始令牌、语义令牌和（仅在需要时）组件令牌层级分离。
- 组件仅引用语义令牌。
- 亮色、暗色和高对比度主题已存在，并且每一对文本/背景组合都有计算出的对比度比率。
- 间距基于 4px；一个圆角家族；最多三级阴影。
- 字体角色覆盖展示到说明；最多两个字体族，三种字重。
- 动效令牌包含减少动效规则。
- 文档说明了何时使用每个令牌，而不仅仅是其值。