---
name: ui-design-parser
description: 从用户提供的UI设计图片中提取设计风格、布局结构、配色方案、组件清单等信息，并生成规范化的UI设计参考文档。触发词：UI设计、UI转写、UI分析、页面设计、界面参考、设计图解析
---

# UI设计参考解析器

## 功能说明

此Skill用于分析用户提供的UI设计参考图片，提取关键设计信息并生成结构化的设计参考文档。

## 触发条件

当用户请求中包含以下关键词时自动触发：
- UI设计
- UI转写
- UI分析
- 页面设计
- 界面参考
- 设计图解析

## 工作流程

### 1. 图片接收与确认

- 确认用户已提供UI设计图片（通过拖拽或上传）
- 如果未提供图片，提示用户上传设计参考图

### 2. 设计分析

对图片进行全面分析，提取以下信息：

#### 2.1 基础信息
- 页面名称/功能
- 设计类型（Web端/移动端/桌面应用）
- 目标用户群体

#### 2.2 视觉风格
- **配色方案**
  - 主色调（Primary Color）
  - 辅助色（Secondary Color）
  - 背景色（Background）
  - 文字颜色（Text Color）
  - 强调色/警告色（Accent/Warning）
  
- **字体系统**
  - 标题字体（字号、字重）
  - 正文字体（字号、行高）
  - 辅助文字（字号、颜色）
  
- **间距规范**
  - 组件间距
  - 内边距（Padding）
  - 外边距（Margin）
  
- **圆角与边框**
  - 按钮圆角
  - 卡片圆角
  - 输入框样式
  - 边框粗细与颜色

- **阴影与层次**
  - 卡片阴影
  - 悬浮效果
  - 层级关系

#### 2.3 布局结构

使用ASCII字符绘制页面布局示意图，标注主要区域：

```
示例格式：
┌─────────────────────────────────────┐
│           Header / 导航栏            │
├─────────────────────────────────────┤
│  ┌─────────┐  ┌──────────────────┐ │
│  │ Sidebar │  │   Main Content   │ │
│  │         │  │                  │ │
│  └─────────┘  └──────────────────┘ │
├─────────────────────────────────────┤
│              Footer                 │
└─────────────────────────────────────┘
```

#### 2.4 组件清单

列出页面中使用的所有UI组件：
- 按钮（主按钮、次按钮、文字按钮）
- 输入框（文本框、搜索框、下拉框）
- 卡片
- 导航栏
- 侧边栏
- 表格
- 列表
- 图标
- 弹窗/对话框
- 标签页
- 其他自定义组件

#### 2.5 交互说明

- 按钮点击效果
- 悬停状态
- 焦点状态
- 加载状态
- 错误提示
- 动画效果

#### 2.6 响应式设计

- 断点设置
- 移动端适配方案
- 布局变化规则

#### 2.7 设计亮点

- 独特的设计元素
- 创新的交互方式
- 值得借鉴的细节

### 3. 文档生成

#### 3.1 确定项目名称

- 询问用户项目名称（如果未明确提供）
- 项目名称用于文件命名

#### 3.2 创建目录结构

确保 `.ui/` 目录存在，如不存在则创建。

#### 3.3 生成文档

按照以下模板生成 `.ui/{项目名称}-UI设计参考文件.md`：

```markdown
# {项目名称} - UI设计参考文档

> 生成时间：{当前日期}
> 来源：{图片文件名或描述}

## 一、基础信息

- **页面名称**：
- **设计类型**：
- **目标用户**：

## 二、视觉风格

### 2.1 配色方案

| 颜色类型 | 色值 | 用途说明 |
|---------|------|---------|
| 主色调 | #XXXXXX | |
| 辅助色 | #XXXXXX | |
| 背景色 | #XXXXXX | |
| 文字色 | #XXXXXX | |
| 强调色 | #XXXXXX | |

### 2.2 字体系统

| 文字类型 | 字号 | 字重 | 行高 | 颜色 |
|---------|------|------|------|------|
| 一级标题 | | | | |
| 二级标题 | | | | |
| 正文 | | | | |
| 辅助文字 | | | | |

### 2.3 间距规范

- 组件间距：
- 内边距：
- 外边距：

### 2.4 圆角与边框

- 按钮圆角：
- 卡片圆角：
- 输入框样式：
- 边框规范：

### 2.5 阴影与层次

- 卡片阴影：
- 悬浮效果：
- 层级关系：

## 三、布局结构

```
[ASCII布局示意图]
```

### 布局说明

- 整体布局方式：
- 栅格系统：
- 主要区域划分：

## 四、组件清单

### 4.1 按钮组件

- 主按钮：
- 次按钮：
- 文字按钮：

### 4.2 输入组件

- 文本输入框：
- 搜索框：
- 下拉选择：

### 4.3 展示组件

- 卡片：
- 列表：
- 表格：

### 4.4 导航组件

- 顶部导航：
- 侧边导航：
- 面包屑：

### 4.5 反馈组件

- 弹窗：
- 提示信息：
- 加载状态：

### 4.6 其他组件

[列出其他识别到的组件]

## 五、交互说明

### 5.1 状态变化

- 默认状态：
- 悬停状态：
- 点击状态：
- 禁用状态：

### 5.2 动画效果

- 页面过渡：
- 组件动画：
- 加载动画：

### 5.3 用户反馈

- 成功提示：
- 错误提示：
- 警告提示：

## 六、响应式设计

- 桌面端（>1200px）：
- 平板端（768px-1200px）：
- 移动端（<768px）：

## 七、设计亮点

1. 
2. 
3. 

## 八、实现建议

### 8.1 技术栈推荐

- 前端框架：
- UI组件库：
- CSS方案：

### 8.2 开发注意事项

1. 
2. 
3. 

## 九、参考资源

- 设计规范：
- 组件库：
- 图标库：

---

**备注**：本文档由AI自动生成，请根据实际需求调整。
```

### 4. 输出确认

- 告知用户文档已生成
- 提供文档路径
- 询问是否需要调整或补充

## 重要规则

1. **图片必需**：如果用户未提供图片，必须先请求用户上传
2. **详细分析**：尽可能详细地分析设计细节，不要遗漏重要信息
3. **ASCII布局**：布局图必须使用ASCII字符绘制，清晰易懂
4. **结构化输出**：严格按照模板格式生成文档
5. **项目名称**：文件名中的项目名称必须从用户处获取或从上下文推断
6. **目录创建**：确保 `.ui/` 目录存在
7. **中文优先**：所有输出内容使用中文
8. **实用性**：提供的信息应具有实际开发参考价值

## 输出示例

当用户上传一张登录页面设计图并说"帮我分析这个UI设计"时：

1. 识别触发词"UI设计"
2. 分析图片中的设计元素
3. 询问项目名称（如："这是哪个项目的登录页？"）
4. 生成 `.ui/登录页-UI设计参考文件.md`
5. 告知用户："已为你生成UI设计参考文档，保存在 `.ui/登录页-UI设计参考文件.md`"

## 参考文档

详细的ASCII绘图字符和布局示例请参考 `references/ascii-layout-guide.md`