设计系统¶

构建可扩展且可维护的设计系统。

使用时机¶

• 初始化设计系统
• 扩展组件库
• 保持设计与实现之间的同步
• 强制实施无障碍标准
• 实现主题化

核心要素¶

1. 设计令牌¶

颜色、排版、间距、阴影的集中式集合。

2. 组件¶

按钮、输入框、卡片等可复用的基本 UI 构建块。

3. 布局模式¶

页面布局、表单、网格。

4. 图标¶

基于 SVG 的图标库。

工具¶

• Figma 设计工具
• Storybook 组件展示
• Chromatic 视觉测试
• 设计令牌 JSON 管理

检查清单¶

• [ ] 定义令牌（颜色、间距、字体）
• [ ] 实现基础组件
• [ ] 配置 Storybook
• [ ] 无障碍测试
• [ ] 编写文档
• [ ] 团队采用

有关详细信息，请参阅文档。