需要建立跨团队一致 UI 标准时，创建包含设计令牌、组件…

适用于建立设计标准、构建组件库或确保跨团队视觉与交互一致性。

适用场景

解决思路

1. 建立基础层（Foundation）：定义颜色、排版、间距、elevation（阴影/层级）。
2. 建立组件层（Components）：构建按钮、输入、卡片、导航等组件。
3. 建立模式层（Patterns）：定义表单、布局、空状态等模式。
4. 在 CSS `:root` 中定义基础设计令牌：主色阶 `--color-primary-50`、`--color-primary-500`、`--color-primary-900`。
5. 定义语义色令牌：`--color-success`、`--color-warning`、`--color-error`。
6. 定义排版令牌：`--font-sans: 'Inter', system-ui, sans-serif;`、`--font-mono: 'Fira Code', monospace;`。
7. 定义字号比例：`--text-xs: 0.75rem;`、`--text-sm: 0.875rem;`、`--text-base: 1rem;`、`--text-lg: 1.125rem;`、`--text-xl: 1.25rem;`、`--text-2xl: 1.5rem;`。
8. 以 4px 为基准定义间距：`--space-1: 0.25rem;`、`--space-2: 0.5rem;`、`--space-4: 1rem;`、`--space-8: 2rem;`。
9. 定义阴影/elevation：`--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);`、`--shadow-md: 0 4px 6px rgba(0,0,0,0.1);`、`--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);`。
10. 为每个组件编写文档，例如 Button 文档。
11. 在组件文档中写解剖结构：Container（内边距、背景）、Label（文本）、Icon（可选）。
12. 在组件文档中写变体：Primary（主要操作）、Secondary（替代操作）、Ghost（弱化操作）。
13. 在组件文档中写状态：Default、Hover、Active、Disabled、Loading。
14. 在组件文档中写可访问性：Role: button、Keyboard: Enter/Space 激活、Focus: 可见焦点环。
15. 提供 React 组件示例：定义 `ButtonProps` 接口，包含 `variant?: 'primary' | 'secondary' | 'ghost'`、`size?: 'sm' | 'md' | 'lg'`、`loading?: boolean`、`disabled?: boolean`、`children: React.ReactNode`。
16. 实现 `Button` 组件，默认 `variant = 'primary'`、`size = 'md'`，接收 `loading`、`disabled`、`children`。
17. 在 `Button` 上设置 `className={`btn btn-${variant} btn-${size}`}`，`disabled={disabled || loading}`，`aria-busy={loading}`。
18. 在 `loading` 为真时渲染 `<Spinner />`，否则渲染 `children`。
19. 治理：设立 Review Committee 审批新组件。
20. 治理：制定 Contribution Process：RFC → Review → Implementation。
21. 治理：使用语义化版本（Semantic versioning）发布。
22. 治理：废弃组件提前 3 个月通知并提供迁移指南。
23. 最佳实践：从基础令牌开始。
24. 最佳实践：为每个组件彻底编写文档。
25. 最佳实践：确保符合 WCAG 2.1 AA。
26. 最佳实践：从一开始支持深色模式。
27. 最佳实践：包含使用指南及 do/don't 示例。

适用边界 · 注意事项

• 一次性原型、个人脚本或无需跨团队一致性的小项目，创建完整设计系统可能成本过高。
• 已存在成熟且满足需求的组件库或设计系统时，不需要从零创建。
• 缺乏持续维护、评审和版本治理资源时，不宜启动完整设计系统。