/design-system

name: ui-designer/design-system
description: 设计系统规范，包含颜色、字体、间距、圆角、阴影、动效等基础设计token
version: 1.0.0
agent: ui-designer
type: guideline
user-invocable: false
agent-invocable: true
dependencies: []
triggers:
  - 开始UI设计时
  - 需要定义视觉规范时
  - 确保设计一致性时

设计系统规范

适用场景

在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。

设计系统的价值

1. **一致性**：确保产品各部分视觉和交互统一 2. **效率**：设计师和开发者使用统一的设计语言，减少沟通成本 3. **可维护性**：修改设计token即可全局更新 4. **可扩展性**：新功能可以快速复用现有组件

设计系统组成

1. 颜色系统

品牌色

| 名称 | 色值 | 用途 | 示例场景 | |------|------|------|----------| | Primary | `#3B82F6` | 主要操作、强调 | 主按钮、链接、选中状态 | | Primary-hover | `#2563EB` | 主色悬停态 | 按钮悬停 | | Primary-active | `#1D4ED8` | 主色按下态 | 按钮按下 | | Primary-light | `#DBEAFE` | 主色浅色背景 | 标签背景、高亮区域 |

中性色

| 名称 | 色值 | 用途 | |------|------|------| | Gray-900 | `#111827` | 标题文字 | | Gray-800 | `#1F2937` | 重要文字 | | Gray-700 | `#374151` | 正文文字 | | Gray-600 | `#4B5563` | 次要文字 | | Gray-500 | `#6B7280` | 辅助文字 | | Gray-400 | `#9CA3AF` | 占位文字 | | Gray-300 | `#D1D5DB` | 边框、分割线 | | Gray-200 | `#E5E7EB` | 浅边框 | | Gray-100 | `#F3F4F6` | 背景 | | Gray-50 | `#F9FAFB` | 浅背景 | | White | `#FFFFFF` | 卡片背景、主背景 |

语义色

| 名称 | 色值 | 用途 | 背景色 | |------|------|------|--------| | Success | `#10B981` | 成功状态 | `#D1FAE5` | | Warning | `#F59E0B` | 警告状态 | `#FEF3C7` | | Error | `#EF4444` | 错误状态 | `#FEE2E2` | | Info | `#3B82F6` | 信息提示 | `#DBEAFE` |

**颜色使用原则**：

• 主色用于主要操作和强调，不要滥用
• 中性色用于文字和背景，建立清晰的层次
• 语义色用于状态反馈，保持一致性
• 确保颜色对比度符合WCAG AA标准（≥4.5:1）

2. 字体系统

字体家族

/* 无衬线字体（主要） */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;

/* 等宽字体（代码） */
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;

字体层级

| 层级 | 字号 | 行高 | 字重 | 用途 | CSS 变量 | |------|------|------|------|------|----------| | Display | 48px | 1.1 | 700 | 大标题、落地页 | `--text-display` | | H1 | 32px | 1.2 | 700 | 页面标题 | `--text-h1` | | H2 | 24px | 1.3 | 600 | 区块标题 | `--text-h2` | | H3 | 20px | 1.4 | 600 | 小标题 | `--text-h3` | | H4 | 18px | 1.4 | 600 | 卡片标题 | `--text-h4` | | Body | 16px | 1.5 | 400 | 正文 | `--text-body` | | Body-sm | 14px | 1.5 | 400 | 辅助文字 | `--text-body-sm` | | Caption | 12px | 1.4 | 400 | 说明文字、标签 | `--text-caption` |

**字体使用原则**：

• 标题使用较大字号和较重字重，建立层次
• 正文使用16px，确保可读性
• 行高保持1.4-1.6，确保舒适阅读
• 不要使用过多字号，保持简洁

3. 间距系统

基础单位：**4px**（所有间距都是4的倍数）

| 名称 | 值 | 用途 | CSS 变量 | |------|-----|------|----------| | space-0 | 0 | 无间距 | `--space-0` | | space-1 | 4px | 紧凑元素间（图标与文字） | `--space-1` | | space-2 | 8px | 相关元素间（标签与输入框） | `--space-2` | | space-3 | 12px | 组内元素间 | `--space-3` | | space-4 | 16px | 默认间距 | `--space-4` | | space-5 | 20px | 组间间距 | `--space-5` | | space-6 | 24px | 区块内间距 | `--space-6` | | space-8 | 32px | 区块间间距 | `--space-8` | | space-10 | 40px | 大区块间距 | `--space-10` | | space-12 | 48px | 页面级间距 | `--space-12` | | space-16 | 64px | 超大间距 | `--space-16` |

**间距使用原则**：

• 相关元素间距小，不相关元素间距大
• 使用统一的间距系统，不要随意使用其他值
• 移动端可以适当减小间距

4. 圆角系统

| 名称 | 值 | 用途 | CSS 变量 | |------|-----|------|----------| | radius-none | 0 | 无圆角 | `--radius-none` | | radius-sm | 4px | 小元素（标签、徽章） | `--radius-sm` | | radius-md | 8px | 按钮、输入框 | `--radius-md` | | radius-lg | 12px | 卡片 | `--radius-lg` | | radius-xl | 16px | 大卡片、弹窗 | `--radius-xl` | | radius-2xl | 24px | 超大卡片 | `--radius-2xl` | | radius-full | 9999px | 圆形、胶囊按钮 | `--radius-full` |

**圆角使用原则**：

• 圆角让界面更友好，但不要过度
• 保持一致性，同类元素使用相同圆角
• 移动端可以使用稍大的圆角

5. 阴影系统

| 名称 | 值 | 用途 | CSS 变量 | |------|-----|------|----------| | shadow-xs | `0 1px 2px rgba(0,0,0,0.05)` | 微小浮起 | `--shadow-xs` | | shadow-sm | `0 1px 3px rgba(0,0,0,0.1)` | 轻微浮起 | `--shadow-sm` | | shadow-md | `0 4px 6px rgba(0,0,0,0.1)` | 卡片 | `--shadow-md` | | shadow-lg | `0 10px 15px rgba(0,0,0,0.1)` | 弹窗、下拉菜单 | `--shadow-lg` | | shadow-xl | `0 20px 25px rgba(0,0,0,0.15)` | 模态框 | `--shadow-xl` | | shadow-2xl | `0 25px 50px rgba(0,0,0,0.25)` | 大型模态框 | `--shadow-2xl` |

**阴影使用原则**：

• 阴影表示层级，越重要的元素阴影越深
• 不要过度使用阴影，保持克制
• 悬停时可以加深阴影，表示可交互

6. 动效系统

时长

| 名称 | 值 | 用途 | |------|-----|------| | duration-fast | 150ms | 微交互（hover、focus） | | duration-normal | 250ms | 状态切换、展开收起 | | duration-slow | 350ms | 页面过渡、大型动画 |

缓动函数

| 名称 | 值 | 用途 | |------|-----|------| | ease-out | `cubic-bezier(0, 0, 0.2, 1)` | 元素进入（淡入、展开） | | ease-in | `cubic-bezier(0.4, 0, 1, 1)` | 元素退出（淡出、收起） | | ease-in-out | `cubic-bezier(0.4, 0, 0.2, 1)` | 状态切换 |

CSS 变量

--transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1);
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

**动效使用原则**：

• 动效要有意义，不要为了炫技
• 保持克制，不要过度动画
• 微交互要快（150ms），大动画可以慢（350ms）
• 使用合适的缓动函数，让动画更自然

7. 断点系统（响应式）

| 断点 | 值 | 设备 | 容器宽度 | |------|-----|------|----------| | xs | < 640px | 手机 | 100% | | sm | ≥ 640px | 大手机 | 640px | | md | ≥ 768px | 平板 | 768px | | lg | ≥ 1024px | 小桌面 | 1024px | | xl | ≥ 1280px | 桌面 | 1280px | | 2xl | ≥ 1536px | 大桌面 | 1536px |

**响应式设计原则**：

• 移动优先（Mobile First）
• 关键内容在所有设备上都可见
• 移动端简化操作，桌面端提供更多功能
• 触控目标在移动端至少44x44px

输出要求

在UI设计文档中，应包含以下设计系统章节：

## 4. 设计系统

### 4.1 颜色系统
[品牌色、中性色、语义色表格]

### 4.2 字体系统
[字体家族、字体层级表格]

### 4.3 间距系统
[间距表格]

### 4.4 圆角系统
[圆角表格]

### 4.5 阴影系统
[阴影表格]

### 4.6 动效系统
[时长、缓动函数表格]

关键原则

1. **一致性**：所有设计都使用统一的design token 2. **可扩展性**：新功能可以快速复用现有规范 3. **可维护性**：修改token即可全局更新 4. **克制**：不要定义过多变体，保持简洁

常见误区

❌ **随意使用颜色**：不使用定义的颜色，随意添加新颜色 ❌ **间距不统一**：使用5px、7px等非4倍数的间距 ❌ **字号过多**：定义10种以上的字号 ❌ **过度动画**：所有元素都加动画，影响性能和体验