Design System

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 0317d4cb4f54 · 15 Oct 2026Report an issue or request a re-scan

• PublisherechoVic GitHub userOwner of the repository this skill is read from
• Source folderechoVic/boss-skill/skill/skills/ui-designer/design-systemThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict0317d4cb4f54A new audit runs when the source changes
• Repository statusNot archivedLast push 4 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 设计系统规范,包含颜色、字体、间距、圆角、阴影、动效等基础设计token

---
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设计时
  - 需要定义视觉规范时
  - 确保设计一致性时
metadata:
  internal: true
---

# 设计系统规范

## 适用场景

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

## 设计系统的价值

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. 字体系统

#### 字体家族

```css
/* 无衬线字体(主要) */
--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 变量

```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设计文档中,应包含以下设计系统章节:

```markdown
## 4. 设计系统

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

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

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

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

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

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

## 关键原则

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

## 常见误区

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

Excerpt, first 5,487 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/echoVic/boss-skill
git -C boss-skill checkout 0317d4cb4f54

Works in

1. 2026-10-15
   ✓SAFE B 89 / 100

   first audit · source 0317d4cb4f54

Questions about Design System

• github.com/echoVic/boss-skill/tree/main/skill/skills/ui-designer — the audited source at commit 0317d4cb4f54 and every finding aboveObserved · 15 Oct 2026

Spotted something wrong? Report a correction · Methodology