设计系统指南
原子设计层级
| 层级 | 描述 | 示例 |
|---|---|---|
| 1. 原子 | 最小UI元素，单一用途 | 按钮、输入框、图标、标签、颜色 |
| 2. 分子 | 原子的简单组合 | 搜索栏（输入框+按钮）、表单字段（标签+输入+错误） |
| 3. 有机体 | 复杂UI部分 | 页眉、商品卡片、评论区 |
| 4. 模板 | 页面级结构 | 博文布局、仪表板布局 |
| 5. 页面 | 含真实内容的实例 | 实际渲染的产品页面 |
设计令牌示例
/* Design Tokens — CSS Custom Properties */
:root {
/* Color tokens */
--color-primary-500: #6c63ff;
--color-primary-600: #5b52e8;
--color-neutral-0: #ffffff;
--color-neutral-900: #0f1117;
/* Spacing scale (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
--space-16: 64px;
/* Typography */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
--shadow-md: 0 4px 12px rgba(0,0,0,0.24);
}
主流组件库
| 组件库 | 框架 | 样式方式 | 适合 |
|---|---|---|---|
| shadcn/ui | React | 复制粘贴，Tailwind | 定制设计系统 |
| Radix UI | React | 无样式 | 无障碍基础组件 |
| MUI (Material UI) | React | Material设计 | 企业应用、快速开发 |
| Ant Design | React | 风格明确、功能丰富 | 管理后台、B2B |
| Vuetify | Vue | Material设计 | Vue Material应用 |
| Element Plus | Vue 3 | 简洁可定制 | 国内企业应用 |
| Tailwind UI | 任何框架 | Tailwind CSS | 营销、落地页 |
设计系统建设清单
- ☐ 定义含语义令牌的调色板（主色、辅色、错误、成功）
- ☐ 建立4px或8px间距比例
- ☐ 选择1–2种字体并定义字号比例
- ☐ 记录组件状态：默认、悬停、聚焦、激活、禁用、错误
- ☐ 确保WCAG 2.1 AA对比度（文字4.5:1，UI元素3:1）
- ☐ 发布到Storybook或类似文档站