02 · 设计系统建设

设计系统是「把设计决策代码化」的过程。有了它，你只需要决定一次「按钮是什么颜色」，之后整个产品自动保持一致。

生成设计 Token 体系

为我的在线教育平台生成设计 Token，用 CSS 变量实现：

颜色 Token：
- 主色系（5 个深浅层级）
- 中性色系（灰度，10 个层级）
- 语义颜色（success / warning / error / info）
- 表面颜色（background / surface / overlay）

字体 Token：
- 字号（xs / sm / base / lg / xl / 2xl / 3xl / 4xl）
- 行高（对应字号）
- 字重（normal / medium / semibold / bold）

间距 Token：
- 间距系统（4px 基准，1 / 2 / 3 / 4 / 5 / 6 / 8 / 10 / 12 / 16 / 20 / 24）

圆角：
- none / sm / md / lg / xl / full

把所有 Token 输出为：
1. CSS 变量（/src/styles/tokens.css）
2. Tailwind 主题扩展配置（/tailwind.config.ts）

写组件库文档注释

读 /src/components/Button.tsx，
为它添加完整的 Storybook 风格文档注释：

- 组件描述
- 每个 prop 的说明和默认值
- 使用示例（代码片段）
- 设计规范（什么时候用 primary，什么时候用 ghost）
- 可访问性说明

不要改实现代码，只加注释。

生成组件使用规范文档

为我们的 UI 组件库写使用规范文档 /docs/design/components.md：

包含以下组件的使用指南：
- Button（何时用 primary/secondary/ghost/danger）
- Input、Textarea（不同状态的用法）
- Modal、Drawer（区别和各自适用场景）
- Toast / Alert（不同严重程度的选择）
- Badge、Tag（语义上的区别）

每个组件：一句话定义 + 正确用法 + 错误用法示例。

暗色模式支持

读 /src/styles/tokens.css，
为所有颜色 Token 添加暗色模式版本：

- 把 [data-theme="dark"] 选择器的覆盖值加上
- 主色在暗色下要稍微提亮（避免对比度不足）
- 背景色做反转（浅色模式的背景 ≈ 暗色模式的前景）
- 保证 WCAG AA 对比度标准（正文 4.5:1）

同时在 /src/components/ThemeToggle.tsx 写一个主题切换按钮。