设计系统规范
适用场景
在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。
设计系统的价值
- 一致性：确保产品各部分视觉和交互统一
- 效率：设计师和开发者使用统一的设计语言，减少沟通成本
- 可维护性：修改设计token即可全局更新
- 可扩展性：新功能可以快速复用现有组件
设计系统组成
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 动效系统
[时长、缓动函数表格]
关键原则
- 一致性：所有设计都使用统一的design token
- 可扩展性：新功能可以快速复用现有规范
- 可维护性：修改token即可全局更新
- 克制：不要定义过多变体，保持简洁
常见误区
❌ 随意使用颜色：不使用定义的颜色，随意添加新颜色
❌ 间距不统一：使用5px、7px等非4倍数的间距
❌ 字号过多：定义10种以上的字号
❌ 过度动画：所有元素都加动画，影响性能和体验
Source: hashgraph-online/awesome-codex-plugins → plugins/echoVic/boss-skill/skill/skills/ui-designer/design-system/SKILL.md
1---2name: ui-designerdesign-system3description: 设计系统规范，包含颜色、字体、间距、圆角、阴影、动效等基础设计token4---567# 设计系统规范89## 适用场景1011在开始具体的页面和组件设计前，需要先建立统一的设计系统，确保整个产品的视觉和交互一致性。1213## 设计系统的价值14151. **一致性**：确保产品各部分视觉和交互统一162. **效率**：设计师和开发者使用统一的设计语言，减少沟通成本173. **可维护性**：修改设计token即可全局更新184. **可扩展性**：新功能可以快速复用现有组件1920## 设计系统组成2122### 1. 颜色系统2324#### 品牌色2526| 名称 | 色值 | 用途 | 示例场景 |27|------|------|------|----------|28| Primary | `#3B82F6` | 主要操作、强调 | 主按钮、链接、选中状态 |29| Primary-hover | `#2563EB` | 主色悬停态 | 按钮悬停 |30| Primary-active | `#1D4ED8` | 主色按下态 | 按钮按下 |31| Primary-light | `#DBEAFE` | 主色浅色背景 | 标签背景、高亮区域 |3233#### 中性色3435| 名称 | 色值 | 用途 |36|------|------|------|37| Gray-900 | `#111827` | 标题文字 |38| Gray-800 | `#1F2937` | 重要文字 |39| Gray-700 | `#374151` | 正文文字 |40| Gray-600 | `#4B5563` | 次要文字 |41| Gray-500 | `#6B7280` | 辅助文字 |42| Gray-400 | `#9CA3AF` | 占位文字 |43| Gray-300 | `#D1D5DB` | 边框、分割线 |44| Gray-200 | `#E5E7EB` | 浅边框 |45| Gray-100 | `#F3F4F6` | 背景 |46| Gray-50 | `#F9FAFB` | 浅背景 |47| White | `#FFFFFF` | 卡片背景、主背景 |4849#### 语义色5051| 名称 | 色值 | 用途 | 背景色 |52|------|------|------|--------|53| Success | `#10B981` | 成功状态 | `#D1FAE5` |54| Warning | `#F59E0B` | 警告状态 | `#FEF3C7` |55| Error | `#EF4444` | 错误状态 | `#FEE2E2` |56| Info | `#3B82F6` | 信息提示 | `#DBEAFE` |5758**颜色使用原则**：59- 主色用于主要操作和强调，不要滥用60- 中性色用于文字和背景，建立清晰的层次61- 语义色用于状态反馈，保持一致性62- 确保颜色对比度符合WCAG AA标准（≥4.5:1）6364### 2. 字体系统6566#### 字体家族6768```css69/* 无衬线字体（主要） */70--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 71 "Helvetica Neue", Arial, "Noto Sans", sans-serif;7273/* 等宽字体（代码） */74--font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;75```7677#### 字体层级7879| 层级 | 字号 | 行高 | 字重 | 用途 | CSS 变量 |80|------|------|------|------|------|----------|81| Display | 48px | 1.1 | 700 | 大标题、落地页 | `--text-display` |82| H1 | 32px | 1.2 | 700 | 页面标题 | `--text-h1` |83| H2 | 24px | 1.3 | 600 | 区块标题 | `--text-h2` |84| H3 | 20px | 1.4 | 600 | 小标题 | `--text-h3` |85| H4 | 18px | 1.4 | 600 | 卡片标题 | `--text-h4` |86| Body | 16px | 1.5 | 400 | 正文 | `--text-body` |87| Body-sm | 14px | 1.5 | 400 | 辅助文字 | `--text-body-sm` |88| Caption | 12px | 1.4 | 400 | 说明文字、标签 | `--text-caption` |8990**字体使用原则**：91- 标题使用较大字号和较重字重，建立层次92- 正文使用16px，确保可读性93- 行高保持1.4-1.6，确保舒适阅读94- 不要使用过多字号，保持简洁9596### 3. 间距系统9798基础单位：**4px**（所有间距都是4的倍数）99100| 名称 | 值 | 用途 | CSS 变量 |101|------|-----|------|----------|102| space-0 | 0 | 无间距 | `--space-0` |103| space-1 | 4px | 紧凑元素间（图标与文字） | `--space-1` |104| space-2 | 8px | 相关元素间（标签与输入框） | `--space-2` |105| space-3 | 12px | 组内元素间 | `--space-3` |106| space-4 | 16px | 默认间距 | `--space-4` |107| space-5 | 20px | 组间间距 | `--space-5` |108| space-6 | 24px | 区块内间距 | `--space-6` |109| space-8 | 32px | 区块间间距 | `--space-8` |110| space-10 | 40px | 大区块间距 | `--space-10` |111| space-12 | 48px | 页面级间距 | `--space-12` |112| space-16 | 64px | 超大间距 | `--space-16` |113114**间距使用原则**：115- 相关元素间距小，不相关元素间距大116- 使用统一的间距系统，不要随意使用其他值117- 移动端可以适当减小间距118119### 4. 圆角系统120121| 名称 | 值 | 用途 | CSS 变量 |122|------|-----|------|----------|123| radius-none | 0 | 无圆角 | `--radius-none` |124| radius-sm | 4px | 小元素（标签、徽章） | `--radius-sm` |125| radius-md | 8px | 按钮、输入框 | `--radius-md` |126| radius-lg | 12px | 卡片 | `--radius-lg` |127| radius-xl | 16px | 大卡片、弹窗 | `--radius-xl` |128| radius-2xl | 24px | 超大卡片 | `--radius-2xl` |129| radius-full | 9999px | 圆形、胶囊按钮 | `--radius-full` |130131**圆角使用原则**：132- 圆角让界面更友好，但不要过度133- 保持一致性，同类元素使用相同圆角134- 移动端可以使用稍大的圆角135136### 5. 阴影系统137138| 名称 | 值 | 用途 | CSS 变量 |139|------|-----|------|----------|140| shadow-xs | `0 1px 2px rgba(0,0,0,0.05)` | 微小浮起 | `--shadow-xs` |141| shadow-sm | `0 1px 3px rgba(0,0,0,0.1)` | 轻微浮起 | `--shadow-sm` |142| shadow-md | `0 4px 6px rgba(0,0,0,0.1)` | 卡片 | `--shadow-md` |143| shadow-lg | `0 10px 15px rgba(0,0,0,0.1)` | 弹窗、下拉菜单 | `--shadow-lg` |144| shadow-xl | `0 20px 25px rgba(0,0,0,0.15)` | 模态框 | `--shadow-xl` |145| shadow-2xl | `0 25px 50px rgba(0,0,0,0.25)` | 大型模态框 | `--shadow-2xl` |146147**阴影使用原则**：148- 阴影表示层级，越重要的元素阴影越深149- 不要过度使用阴影，保持克制150- 悬停时可以加深阴影，表示可交互151152### 6. 动效系统153154#### 时长155156| 名称 | 值 | 用途 |157|------|-----|------|158| duration-fast | 150ms | 微交互（hover、focus） |159| duration-normal | 250ms | 状态切换、展开收起 |160| duration-slow | 350ms | 页面过渡、大型动画 |161162#### 缓动函数163164| 名称 | 值 | 用途 |165|------|-----|------|166| ease-out | `cubic-bezier(0, 0, 0.2, 1)` | 元素进入（淡入、展开） |167| ease-in | `cubic-bezier(0.4, 0, 1, 1)` | 元素退出（淡出、收起） |168| ease-in-out | `cubic-bezier(0.4, 0, 0.2, 1)` | 状态切换 |169170#### CSS 变量171172```css173--transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1);174--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);175--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);176```177178**动效使用原则**：179- 动效要有意义，不要为了炫技180- 保持克制，不要过度动画181- 微交互要快（150ms），大动画可以慢（350ms）182- 使用合适的缓动函数，让动画更自然183184### 7. 断点系统（响应式）185186| 断点 | 值 | 设备 | 容器宽度 |187|------|-----|------|----------|188| xs | < 640px | 手机 | 100% |189| sm | ≥ 640px | 大手机 | 640px |190| md | ≥ 768px | 平板 | 768px |191| lg | ≥ 1024px | 小桌面 | 1024px |192| xl | ≥ 1280px | 桌面 | 1280px |193| 2xl | ≥ 1536px | 大桌面 | 1536px |194195**响应式设计原则**：196- 移动优先（Mobile First）197- 关键内容在所有设备上都可见198- 移动端简化操作，桌面端提供更多功能199- 触控目标在移动端至少44x44px200201## 输出要求202203在UI设计文档中，应包含以下设计系统章节：204205```markdown206## 4. 设计系统207208### 4.1 颜色系统209[品牌色、中性色、语义色表格]210211### 4.2 字体系统212[字体家族、字体层级表格]213214### 4.3 间距系统215[间距表格]216217### 4.4 圆角系统218[圆角表格]219220### 4.5 阴影系统221[阴影表格]222223### 4.6 动效系统224[时长、缓动函数表格]225```226227## 关键原则2282291. **一致性**：所有设计都使用统一的design token2302. **可扩展性**：新功能可以快速复用现有规范2313. **可维护性**：修改token即可全局更新2324. **克制**：不要定义过多变体，保持简洁233234## 常见误区235236❌ **随意使用颜色**：不使用定义的颜色，随意添加新颜色237❌ **间距不统一**：使用5px、7px等非4倍数的间距238❌ **字号过多**：定义10种以上的字号239❌ **过度动画**：所有元素都加动画，影响性能和体验240241---242243**Source:** [`hashgraph-online/awesome-codex-plugins`](https://github.com/hashgraph-online/awesome-codex-plugins) → `plugins/echoVic/boss-skill/skill/skills/ui-designer/design-system/SKILL.md`
thedixitjain