feat: 添加 ui-layout-analyzer 技能和项目配置
- 新增 ui-layout-analyzer 技能，用于分析包含多个 UI 界面的图片 - 支持自动识别界面坐标范围 - 支持逐个详细分析每个界面的 UI/UX 设计 - 生成结构化的 Markdown 分析报告 - 添加项目配置文件，允许技能目录写入权限 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude AI
9
.claude/settings.json
Normal file
9
.claude/settings.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Write(.claude/skills/*)",
|
||||
"Edit(.claude/skills/*)",
|
||||
"Read(.claude/skills/*)"
|
||||
]
|
||||
}
|
||||
}
|
||||
230
.claude/skills/ui-layout-analyzer/SKILL.md
Normal file
230
.claude/skills/ui-layout-analyzer/SKILL.md
Normal file
@@ -0,0 +1,230 @@
|
||||
---
|
||||
name: ui-layout-analyzer
|
||||
description: 分析包含多个 UI 界面设计的图片，自动识别每个界面的坐标范围，并逐个进行详细的 UI/UX 分析。适用于 UI 设计稿包含多个界面的复合图、产品需求分析阶段的 UI 设计评审、界面原型图的自动化分析。使用场景：用户提供一张包含多个 UI 界面的图片 URL，需要提取和分析单个界面的设计细节时触发。
|
||||
---
|
||||
|
||||
# UI Layout Analyzer
|
||||
|
||||
## Overview
|
||||
|
||||
自动分析包含多个 UI 界面的复合图片，识别每个界面的坐标范围，并逐个进行详细的 UI/UX 分析。适用于产品需求分析、UI 设计评审等场景。
|
||||
|
||||
## Quick Start
|
||||
|
||||
```
|
||||
请分析这个 UI 设计图片：https://example.com/ui-design.jpg
|
||||
该图片包含多个 UI 界面，请按照以下步骤进行分析：
|
||||
1. 下载图片到本地
|
||||
2. 识别每个界面的坐标范围
|
||||
3. 逐个分析每个界面的详细内容
|
||||
4. 整理成结构化的分析报告
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: 下载图片
|
||||
|
||||
从用户提供的 URL 下载图片到本地工作区：
|
||||
|
||||
```bash
|
||||
# 下载到 /workspace/group/temp/ 目录
|
||||
curl -o /workspace/group/temp/filename.jpg "图片URL"
|
||||
```
|
||||
|
||||
### Step 2: 识别界面坐标范围
|
||||
|
||||
使用 `mcp__4_5v_mcp__analyze_image` 工具分析整张图片，识别每个 UI 界面的坐标范围。
|
||||
|
||||
**提示词模板：**
|
||||
```
|
||||
请分析这张图片，识别其中包含的每个 UI 界面的坐标范围。
|
||||
|
||||
请以以下格式输出：
|
||||
界面 1：[界面功能描述]
|
||||
- 坐标范围：X:xxx-xxx, Y:xxx-yyy
|
||||
- 位置说明：[顶部/底部/左侧/右侧/中间]
|
||||
|
||||
界面 2：[界面功能描述]
|
||||
...
|
||||
```
|
||||
|
||||
**输出格式示例：**
|
||||
```
|
||||
界面 1：主入口/抽背启动页
|
||||
- 坐标范围：X:380-570, Y:15-460
|
||||
- 位置：顶部区域
|
||||
|
||||
界面 2：AI智能抽背助手
|
||||
- 坐标范围：X:280-470, Y:510-960
|
||||
- 位置：左下区域
|
||||
```
|
||||
|
||||
### Step 3: 逐个分析每个界面
|
||||
|
||||
对每个识别出的界面，使用 `mcp__4_5v_mcp__analyze_image` 工具进行详细分析。
|
||||
|
||||
**提示词模板：**
|
||||
```
|
||||
请详细分析该图片中指定坐标范围内的 UI 界面设计。
|
||||
|
||||
坐标范围：X:xxx-xxx, Y:xxx-yyy
|
||||
|
||||
请重点分析以下内容：
|
||||
1. **界面功能定位**：这个界面的主要功能是什么？
|
||||
2. **核心 UI 元素**：
|
||||
- 按钮：数量、位置、文字内容
|
||||
- 输入框：类型、占位符文字
|
||||
- 导航栏：Tab 数量、文字内容
|
||||
- 其他交互元素（图标、开关、选择器等）
|
||||
3. **布局结构**：
|
||||
- 顶部区域元素
|
||||
- 中部区域元素
|
||||
- 底部区域元素
|
||||
4. **交互模式**：
|
||||
- 单选/多选/滑动/点击等
|
||||
- 操作反馈方式
|
||||
5. **视觉风格**：
|
||||
- 主色调、背景色
|
||||
- 字体大小、粗细
|
||||
- 间距、留白
|
||||
6. **文字内容**：
|
||||
- 标题、按钮文字、提示语等所有可见文字
|
||||
|
||||
请尽可能详细地描述，方便后续进行 UI 设计和开发工作。
|
||||
```
|
||||
|
||||
**注意事项：**
|
||||
- 如果某个界面的分析失败（MCP 返回错误），尝试使用备用 URL 或重新分析
|
||||
- 对于模糊或不清晰的界面，标注"待确认"或"需要补充信息"
|
||||
- 所有坐标范围应精确记录，方便后续单独分析某个界面
|
||||
|
||||
### Step 4: 整理分析结果
|
||||
|
||||
将所有界面的分析结果整合成结构化的 Markdown 文档。
|
||||
|
||||
**输出格式模板：**
|
||||
```markdown
|
||||
# UI 设计分析报告
|
||||
|
||||
## 界面概览
|
||||
共识别出 N 个界面
|
||||
|
||||
## 界面详细分析
|
||||
|
||||
### 界面 1：[功能描述]
|
||||
**坐标范围**：X:xxx-xxx, Y:xxx-yyy
|
||||
**位置**：[顶部/底部/左侧/右侧/中间]
|
||||
|
||||
#### 功能定位
|
||||
[界面的主要功能说明]
|
||||
|
||||
#### 核心 UI 元素
|
||||
- [元素类型]：[描述]
|
||||
- [元素类型]：[描述]
|
||||
|
||||
#### 布局结构
|
||||
- 顶部：[元素列表]
|
||||
- 中部：[元素列表]
|
||||
- 底部：[元素列表]
|
||||
|
||||
#### 交互模式
|
||||
[交互方式说明]
|
||||
|
||||
#### 视觉风格
|
||||
- 色彩：[描述]
|
||||
- 字体：[描述]
|
||||
- 间距：[描述]
|
||||
|
||||
#### 文字内容
|
||||
[所有可见文字列表]
|
||||
|
||||
---
|
||||
|
||||
## 设计总结
|
||||
|
||||
### 整体设计风格
|
||||
[整体风格分析]
|
||||
|
||||
### UI/UX 设计原则
|
||||
- 视觉设计原则
|
||||
- 交互设计原则
|
||||
- 响应式设计考虑
|
||||
|
||||
### 待优化功能点
|
||||
1. [优化建议]
|
||||
2. [优化建议]
|
||||
```
|
||||
|
||||
### Step 5: 更新需求文档（可选）
|
||||
|
||||
如果用户提供了需求文档路径，自动将 UI 分析结果更新到文档的相关章节。
|
||||
|
||||
## Tools Required
|
||||
|
||||
- **mcp__4_5v_mcp__analyze_image**: 图片分析工具（核心工具）
|
||||
- **Bash**: 文件下载和管理
|
||||
- **Read/Write**: 文件读写操作
|
||||
|
||||
## Example Usage
|
||||
|
||||
**方式 1：直接描述**
|
||||
```
|
||||
请分析这个 UI 设计图片，它包含多个界面：https://example.com/ui-design.jpg
|
||||
```
|
||||
|
||||
**方式 2：使用技能触发**
|
||||
```
|
||||
/skill ui-layout-analyzer https://example.com/ui-design.jpg
|
||||
```
|
||||
|
||||
**方式 3：详细需求**
|
||||
```
|
||||
请帮我分析这个 UI 设计稿：https://example.com/ui-design.jpg
|
||||
这张图包含了好几个界面，我需要：
|
||||
1. 识别每个界面的位置和范围
|
||||
2. 分析每个界面的具体设计元素
|
||||
3. 整理成结构化的报告，方便后续开发使用
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **精确记录坐标**：所有坐标范围应精确记录，格式为 X:xxx-xxx, Y:xxx-yyy
|
||||
2. **结构化输出**：使用统一的 Markdown 格式，便于后续整理和查阅
|
||||
3. **详细描述**：尽可能详细地描述每个 UI 元素，包括文字内容、颜色、位置等
|
||||
4. **错误处理**：遇到 MCP 错误时，尝试备用方案或标注"待确认"
|
||||
5. **可操作建议**：在分析报告中提供具体的 UI/UX 改进建议
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### 移动端界面分析
|
||||
- 关注顶部状态栏、导航栏
|
||||
- 识别 Tab 切换、底部导航
|
||||
- 分析手势交互（滑动、点击、长按）
|
||||
|
||||
### Web 界面分析
|
||||
- 关注顶部导航、侧边栏
|
||||
- 识别面包屑、分页器
|
||||
- 分析表单布局和验证提示
|
||||
|
||||
### 数据展示界面
|
||||
- 关注图表类型和数据维度
|
||||
- 识别筛选、排序、导出功能
|
||||
- 分析数据刷新和加载机制
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**问题：MCP 图片分析失败**
|
||||
- 解决：尝试使用备用 URL 或重新上传图片
|
||||
- 备用：如果图片已上传到系统，使用系统内的图片 URL
|
||||
|
||||
**问题：界面坐标识别不准确**
|
||||
- 解决：多次分析并交叉验证，手动调整坐标范围
|
||||
- 备用：请求用户提供更高清晰度的图片
|
||||
|
||||
**问题：文字内容模糊不清**
|
||||
- 解决：标注"待确认"，建议用户提供原始设计文件
|
||||
- 备用：基于上下文推断可能的文字内容
|
||||
|
||||
## Output Examples
|
||||
|
||||
完整的分析报告示例参见：[examples/full-analysis-report.md](examples/full-analysis-report.md)
|
||||
Reference in New Issue
Block a user