# Design System

> 提供设计系统的标准规范，包括设计原则、视觉风格、组件库等。Invoke when designing new features or components for the application.

- Skill: `bage2014/design-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add bage2014/design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bage2014/design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: bage2014 (https://skillmd.com/u/bage2014)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bage2014/design-system

---


# 设计系统规范

## 1. 设计原则

### 1.1 核心原则

- **简洁性**：保持设计简洁明了，减少视觉干扰
- **一致性**：确保整个应用的设计风格一致
- **可用性**：优先考虑用户体验和易用性
- **可访问性**：确保所有用户都能访问和使用应用
- **响应式**：适配不同屏幕尺寸和设备

### 1.2 设计理念

- **以人为本**：以用户需求为中心，设计符合用户期望的界面
- **功能驱动**：设计应服务于功能，而非为了设计而设计
- **持续改进**：根据用户反馈和使用数据不断优化设计

## 2. 视觉风格

### 2.1 色彩系统

#### 2.1.1 主色调
- **主色**：绿色系列（`#10B981` - `#059669`）
- **辅助色**：蓝色系列（`#3B82F6` - `#2563EB`）、紫色系列（`#8B5CF6` - `#7C3AED`）
- **中性色**：灰色系列（`#F9FAFB` - `#111827`）

#### 2.1.2 语义色彩
- **成功**：绿色（`#10B981`）
- **警告**：黄色（`#F59E0B`）
- **错误**：红色（`#EF4444`）
- **信息**：蓝色（`#3B82F6`）

### 2.2 字体系统

#### 2.2.1 字体选择
- **主要字体**：无衬线字体，如 `Inter` 或系统默认无衬线字体
- **次要字体**：等宽字体，用于代码和数据展示

#### 2.2.2 字体大小
- **标题**：`text-2xl`（24px）、`text-xl`（20px）、`text-lg`（18px）
- **正文**：`text-base`（16px）
- **辅助文字**：`text-sm`（14px）、`text-xs`（12px）

#### 2.2.3 字重
- **粗体**：`font-bold`（700）
- **中等**：`font-medium`（500）
- **常规**：`font-normal`（400）

### 2.3 间距系统

- **基础间距**：4px 为一个单位
- **常用间距**：`p-4`（16px）、`m-4`（16px）、`space-x-4`（16px）
- **响应式间距**：根据屏幕尺寸调整间距

### 2.4 阴影系统

- **轻微阴影**：`shadow-sm`
- **中等阴影**：`shadow`
- **重度阴影**：`shadow-lg`、`shadow-xl`

### 2.5 圆角系统

- **小圆角**：`rounded`（4px）
- **中等圆角**：`rounded-md`（6px）
- **大圆角**：`rounded-lg`（8px）、`rounded-xl`（12px）

## 3. 组件库

### 3.1 基础组件

#### 3.1.1 按钮
- **主要按钮**：`bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200`
- **成功按钮**：`bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200`
- **危险按钮**：`bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200`
- **次要按钮**：`bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200`

#### 3.1.2 输入框
- **基础输入框**：`w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent`
- **错误状态**：`border-red-500 focus:ring-red-500`
- **禁用状态**：`bg-gray-100 cursor-not-allowed`

#### 3.1.3 选择框
- **基础选择框**：`w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent`

#### 3.1.4 卡片
- **基础卡片**：`bg-white p-6 rounded-lg shadow`
- **悬停效果**：`hover:shadow-lg transition-all duration-200`

#### 3.1.5 表格
- **基础表格**：`min-w-full divide-y divide-gray-200`
- **表头**：`bg-gray-50`
- **表体**：`bg-white divide-y divide-gray-200`
- **行悬停**：`hover:bg-gray-50`

### 3.2 布局组件

#### 3.2.1 容器
- **固定宽度容器**：`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`
- **流体容器**：`w-full px-4`

#### 3.2.2 网格
- **基础网格**：`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4`

#### 3.2.3 弹性布局
- **基础弹性布局**：`flex items-center justify-between`
- **垂直弹性布局**：`flex flex-col`

### 3.3 导航组件

#### 3.3.1 头部导航
- **基础头部**：`bg-white shadow h-16`
- **内容布局**：`flex items-center justify-between`

#### 3.3.2 侧边导航
- **基础侧边栏**：`w-64 bg-white shadow-md`
- **导航项**：`px-4 py-3 hover:bg-gray-100`

### 3.4 反馈组件

#### 3.4.1 提示框
- **成功提示**：`bg-green-100 text-green-800 p-4 rounded-md`
- **错误提示**：`bg-red-100 text-red-800 p-4 rounded-md`
- **警告提示**：`bg-yellow-100 text-yellow-800 p-4 rounded-md`
- **信息提示**：`bg-blue-100 text-blue-800 p-4 rounded-md`

#### 3.4.2 加载状态
- **基础加载**：`flex justify-center items-center`
- **加载动画**：使用 spinner 动画

## 4. 页面设计

### 4.1 页面布局

- **基础布局**：Header + Main + Footer
- **内容区域**：`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8`
- **响应式布局**：适配不同屏幕尺寸

### 4.2 页面类型

#### 4.2.1 列表页面
- **布局**：筛选器 + 列表 + 分页
- **表格**：使用标准表格组件
- **操作**：每行提供编辑、删除等操作

#### 4.2.2 详情页面
- **布局**：头部信息 + 详情内容 + 相关操作
- **信息展示**：使用卡片和表格展示信息

#### 4.2.3 表单页面
- **布局**：表单标题 + 表单内容 + 操作按钮
- **表单控件**：使用标准输入框、选择框等组件
- **验证**：实时表单验证和错误提示

### 4.3 页面示例

#### 4.3.1 登录页面
- **布局**：居中表单，包含邮箱、密码输入框和登录按钮
- **样式**：使用卡片组件，添加适当的阴影和间距

#### 4.3.2 首页
- **布局**：网格布局，展示功能卡片
- **样式**：使用卡片组件，添加悬停效果

#### 4.3.3 家族管理页面
- **布局**：顶部操作栏 + 家族列表表格
- **样式**：使用表格组件，添加适当的间距和阴影

## 5. 图标系统

### 5.1 图标选择
- **图标库**：使用 Heroicons 或其他现代图标库
- **风格**：线性图标，保持一致性
- **大小**：根据使用场景选择适当的图标大小

### 5.2 图标使用
- **导航图标**：16px - 20px
- **操作图标**：14px - 16px
- **状态图标**：12px - 14px

## 6. 交互设计

### 6.1 微交互

- **按钮悬停**：轻微放大和阴影变化
- **输入框聚焦**：边框和阴影变化
- **卡片悬停**：轻微上浮和阴影加深

### 6.2 动画效果

- **页面过渡**：平滑的页面切换动画
- **元素进入**：淡入、滑动等动画效果
- **加载状态**：旋转、脉冲等动画效果

### 6.3 反馈机制

- **操作反馈**：成功/失败提示
- **加载反馈**：加载动画
- **错误反馈**：错误提示和表单验证

## 7. 响应式设计

### 7.1 断点设计

- **移动端**：< 640px
- **平板**：640px - 1024px
- **桌面**：> 1024px

### 7.2 适配策略

- **移动端**：单列布局，简化导航
- **平板**：双列布局，适当调整间距
- **桌面**：多列布局，充分利用空间

### 7.3 触摸优化

- **触摸目标**：至少 44px × 44px
- **间距**：适当增加触摸元素之间的间距
- **手势**：支持常见的触摸手势

## 8. 设计工具

### 8.1 设计软件
- **Figma**：用于UI设计和原型制作
- **Sketch**：用于UI设计
- **Adobe XD**：用于UI设计和原型制作

### 8.2 协作工具
- **Zeplin**：用于设计规范和资产交付
- **InVision**：用于原型分享和反馈

## 9. 设计流程

### 9.1 设计阶段

1. **需求分析**：理解功能需求和用户需求
2. **低保真原型**：创建简单的线框图
3. **高保真原型**：创建详细的设计稿
4. **设计评审**：团队评审设计方案
5. **设计交付**：向开发团队交付设计规范和资产

### 9.2 设计规范维护

- **版本控制**：使用Git或其他版本控制工具
- **定期更新**：根据产品迭代更新设计规范
- **反馈收集**：收集用户和开发团队的反馈

## 10. 页面统一规范

### 10.1 页面布局统一

所有页面应遵循统一的布局结构：

```
┌─────────────────────────────────────────────────────────────┐
│  Header (统一头部导航)                                       │
│  - 返回按钮 + 页面标题 + 操作按钮 + 用户信息                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Main Content (主内容区)                                     │
│  - 统一容器: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8     │
│  - 背景色: bg-gray-50                                        │
│                                                             │
├─────────────────────────────────────────────────────────────┤
│  Footer (可选)                                               │
└─────────────────────────────────────────────────────────────┘
```

### 10.2 组件样式统一

#### 按钮规范

| 按钮类型 | Tailwind 类名 |
|----------|---------------|
| 主要按钮 | `px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 shadow-md hover:shadow-lg transition-all duration-200` |
| 次要按钮 | `px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 shadow-md hover:shadow-lg transition-all duration-200` |
| 危险按钮 | `px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 shadow-md hover:shadow-lg transition-all duration-200` |

#### 表单规范

| 元素 | Tailwind 类名 |
|------|---------------|
| 输入框 | `w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent` |
| 选择框 | `w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent` |
| 错误状态 | `border-red-500 focus:ring-red-500` |

#### 卡片规范

| 元素 | Tailwind 类名 |
|------|---------------|
| 基础卡片 | `bg-white p-6 rounded-lg shadow` |
| 悬停卡片 | `bg-white p-6 rounded-lg shadow hover:shadow-lg transition-all duration-200` |
| 选中卡片 | `border-2 border-green-500 bg-green-50` |

#### 表格规范

| 元素 | Tailwind 类名 |
|------|---------------|
| 表格容器 | `min-w-full divide-y divide-gray-200` |
| 表头 | `bg-gray-50` |
| 行悬停 | `hover:bg-gray-50` |

### 10.3 页面统一范围

| 页面类别 | 包含页面 | 统一内容 |
|----------|----------|----------|
| 认证页面 | 登录页、注册页 | 表单样式、按钮样式、错误提示 |
| 首页 | 首页 | 卡片样式、导航交互 |
| 家族管理 | 家族管理页、家族树页 | 家族选择器、操作按钮、数据展示 |
| 成员管理 | 成员列表页、成员详情页、成员搜索页 | 成员卡片、列表样式、编辑表单 |
| 关系管理 | 关系管理页 | 关系选择器、表单布局 |
| 历史记录 | 历史记录页、成员大事件页 | 时间轴样式、事件卡片 |
| 多媒体 | 多媒体库页 | 网格布局、媒体卡片、上传交互 |
| 系统管理 | 操作日志页、项目进度页 | 表格样式、筛选器 |
| AI功能 | AI关系分析页、家族故事页、图片导入页 | 结果展示、加载状态 |
| 地图功能 | 成员位置页 | 地图容器、标记样式 |
| 个人中心 | 个人信息页 | 表单样式、头像上传 |

### 10.4 交互反馈统一

#### 加载状态

| 场景 | 样式 |
|------|------|
| 页面加载 | `flex justify-center py-8` + 旋转动画 |
| 旋转动画 | `animate-spin rounded-full h-12 w-12 border-b-2 border-green-500` |

#### Toast提示

| 类型 | 颜色 | 用途 |
|------|------|------|
| success | 绿色背景 | 操作成功 |
| error | 红色背景 | 操作失败 |
| warning | 黄色背景 | 警告信息 |
| info | 蓝色背景 | 一般信息 |

## 11. 最佳实践

- **组件复用**：使用设计系统中的组件，保持一致性
- **设计系统维护**：定期更新和优化设计系统
- **用户测试**：进行用户测试，验证设计效果
- **性能考虑**：设计时考虑性能影响，如图片大小和动画复杂度
- **可访问性**：确保设计符合可访问性标准
- **页面统一**：遵循页面统一规范，确保所有页面风格一致

通过遵循本设计系统规范，可以确保应用的设计风格一致、用户体验良好，同时提高设计和开发效率。