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：

# {项目名称} - 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. 输出确认

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

重要规则

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

输出示例

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

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

参考文档

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

SKILL.md 6.7 KB Permalink Riwayat Mentahan