diff --git a/.claude/skills/ui-layout-analyzer/SKILL.md b/.claude/skills/ui-layout-analyzer/SKILL.md index 9b7554b..c5643d1 100644 --- a/.claude/skills/ui-layout-analyzer/SKILL.md +++ b/.claude/skills/ui-layout-analyzer/SKILL.md @@ -14,7 +14,7 @@ description: 分析包含多个 UI 界面设计的图片,自动识别每个界 ``` 请分析这个 UI 设计图片:https://d8d-design-ai-oss.oss-cn-beijing.aliyuncs.com/path/to/image.jpg 该图片包含多个 UI 界面,请按照以下步骤进行分析: -1. 下载图片到本地(使用原始 URL) +1. 确认使用阿里云 OSS 原始图片 URL(无需下载) 2. 识别每个界面的坐标范围 3. 逐个分析每个界面并立即写入文档(分步分析+错峰写入) 4. 整理成结构化的分析报告 @@ -22,7 +22,7 @@ description: 分析包含多个 UI 界面设计的图片,自动识别每个界 ## Workflow -### Step 1: 下载图片(⚠️ 重要:使用原始图片 URL) +### Step 1: 确认图片 URL(⚠️ 重要:使用原始图片 URL) **关键原则**:必须使用阿里云 OSS 或其他云存储的**原始图片 URL**,不要使用 Cloud Code 或其他 CDN 转换后的 URL! @@ -30,22 +30,35 @@ description: 分析包含多个 UI 界面设计的图片,自动识别每个界 - ✅ 原始图片 URL 速度更快、分析更准确 - ❌ Cloud Code CDN 可能会压缩或转换图片,导致分析错误 -从用户提供的 URL 下载图片到本地工作区: - -```bash -# 下载到 /workspace/group/temp/ 目录 -# 优先使用阿里云 OSS URL,例如: -curl -o /workspace/group/temp/filename.jpg "https://d8d-design-ai-oss.oss-cn-beijing.aliyuncs.com/path/to/image.jpg" - -# 如果用户提供了 CDN URL,尝试提取原始 URL -# 例如:从 "https://cdn.example.com/image.jpg" 推断原始 URL +**直接使用 URL**: ``` +mcp__4_5v_mcp__analyze_image 工具可以直接接受 URL,无需下载图片到本地 + +示例 URL: +https://d8d-design-ai-oss.oss-cn-beijing.aliyuncs.com/path/to/image.jpg + +❌ 避免使用 CDN URL: +https://cdn.example.com/image.jpg +``` + +**注意**: +- MCP 工具会直接从 URL 读取图片 +- 无需使用 curl 或其他工具下载 +- 确保图片 URL 可公开访问 ### Step 2: 识别界面坐标范围 使用 mcp__4_5v_mcp__analyze_image 工具分析整张图片,识别每个 UI 界面的坐标范围。 -**提示词模板:** +**调用示例**: +```python +mcp__4_5v_mcp__analyze_image( + imageSource="https://d8d-design-ai-oss.oss-cn-beijing.aliyuncs.com/path/to/image.jpg", + prompt="请分析这张图片,识别其中包含的每个 UI 界面的坐标范围。请以以下格式输出:..." +) +``` + +**提示词模板**: ``` 请分析这张图片,识别其中包含的每个 UI 界面的坐标范围。 @@ -58,7 +71,7 @@ curl -o /workspace/group/temp/filename.jpg "https://d8d-design-ai-oss.oss-cn-bei ... ``` -**输出格式示例:** +**输出格式示例**: ``` 界面 1:主入口/抽背启动页 - 坐标范围:X:380-570, Y:15-460 @@ -86,17 +99,40 @@ curl -o /workspace/group/temp/filename.jpg "https://d8d-design-ai-oss.oss-cn-bei ...直到所有界面分析完成 ``` -**优势**: -- ✅ 避免连续调用 MCP 触发 429 错误 -- ✅ 每次写入文档的时间自然错开了 MCP 调用间隔 -- ✅ 即使某个界面分析失败,已分析的内容也不会丢失 -- ✅ 实时保存,进度可见 +**实现步骤**: -**单个界面分析提示词模板**: +1. **初始化文档框架** +```bash +# 创建初始文档 +REPORT_FILE="/workspace/group/docs/ui-analysis/ui-analysis-report-$(date +%s).md" +mkdir -p "$(dirname "$REPORT_FILE")" +cat > "$REPORT_FILE" << 'EOF' +# UI 设计分析报告 + +## 界面概览 +共识别出 N 个界面 + +## 界面详细分析 + +EOF ``` -请详细分析该图片中指定坐标范围内的 UI 界面设计。 -坐标范围:X:xxx-xxx, Y:xxx-yyy +2. **逐个分析并立即写入** + +对每个界面执行以下步骤: + +```python +# 伪代码示例 +IMAGE_URL = "https://d8d-design-ai-oss.oss-cn-beijing.aliyuncs.com/path/to/image.jpg" +interfaces = [...] # 从 Step 2 获取的界面列表 + +for i, interface in enumerate(interfaces, 1): + # 步骤 1: 直接使用 URL 分析当前界面 + analysis = mcp__4_5v_mcp__analyze_image( + imageSource=IMAGE_URL, + prompt=f"""请详细分析该图片中指定坐标范围内的 UI 界面设计。 + +坐标范围:X:{interface['x1']}-{interface['x2']}, Y:{interface['y1']}-{interface['y2']} 请重点分析以下内容: 1. **界面功能定位**:这个界面的主要功能是什么? @@ -119,9 +155,74 @@ curl -o /workspace/group/temp/filename.jpg "https://d8d-design-ai-oss.oss-cn-bei 6. **文字内容**: - 标题、按钮文字、提示语等所有可见文字 -请尽可能详细地描述,方便后续进行 UI 设计和开发工作。 +请尽可能详细地描述,方便后续进行 UI 设计和开发工作。""" + ) + + # 步骤 2: 立即将结果追加写入文档 + append_to_report(report_file, f""" +### 界面 {i}:{interface['name']} +**坐标范围**:X:{interface['x1']}-{interface['x2']}, Y:{interface['y1']}-{interface['y2']} +**位置**:{interface['position']} + +#### 功能定位 +{analysis['function']} + +#### 核心 UI 元素 +{analysis['elements']} + +#### 布局结构 +{analysis['layout']} + +#### 交互模式 +{analysis['interaction']} + +#### 视觉风格 +{analysis['style']} + +#### 文字内容 +{analysis['text']} + +--- +""") + + # 步骤 3: 写入操作自然耗时,自动错开下次 MCP 调用 + # 无需显式 sleep,文件 I/O 本身就需要时间 ``` +3. **完成报告总结** + +```bash +# 所有界面分析完成后,添加总结部分 +cat >> "$REPORT_FILE" << 'EOF' + +## 设计总结 + +### 整体设计风格 +[整体风格分析] + +### UI/UX 设计原则 +- 视觉设计原则 +- 交互设计原则 +- 响应式设计考虑 + +### 待优化功能点 +1. [优化建议] +2. [优化建议] + +--- +**分析完成时间**:$(date +%Y-%m-%d) +**图片来源**:[原始图片 URL] +**分析方法**:基于真实图片分析的 UI/UX 设计报告(分步分析+错峰写入模式) +EOF +``` + +**优势**: +- ✅ 避免连续调用 MCP 触发 429 错误 +- ✅ 每次写入文档的时间自然错开了 MCP 调用间隔 +- ✅ 即使某个界面分析失败,已分析的内容也不会丢失 +- ✅ 实时保存,进度可见 +- ✅ 无需下载图片,直接使用 URL(更快更简洁) + **错误处理**: - 如果某个界面的分析失败(MCP 返回错误),在文档中标注"⚠️ 分析失败,待人工确认" - 对于模糊或不清晰的界面,标注"⚠️ 图片模糊,内容待确认" @@ -137,8 +238,8 @@ curl -o /workspace/group/temp/filename.jpg "https://d8d-design-ai-oss.oss-cn-bei ## Tools Required -- **mcp__4_5v_mcp__analyze_image**: 图片分析工具(核心工具) -- **Bash**: 文件下载和管理 +- **mcp__4_5v_mcp__analyze_image**: 图片分析工具(核心工具,直接接受 URL) +- **Bash**: 文件管理和文档创建 - **Read/Write**: 文件读写操作 ## Example Usage @@ -165,12 +266,13 @@ curl -o /workspace/group/temp/filename.jpg "https://d8d-design-ai-oss.oss-cn-bei ## Best Practices 1. **使用原始图片 URL**:必须使用阿里云 OSS 或其他云存储的原始 URL,不要使用 CDN 转换后的 URL -2. **分步分析+错峰写入**:采用"分析一个→写入一个"的模式,避免触发 429 错误 -3. **精确记录坐标**:所有坐标范围应精确记录,格式为 X:xxx-xxx, Y:xxx-yyy -4. **结构化输出**:使用统一的 Markdown 格式,便于后续整理和查阅 -5. **详细描述**:尽可能详细地描述每个 UI 元素,包括文字内容、颜色、位置等 -6. **错误处理**:遇到 MCP 错误时,尝试备用方案或标注"待确认" -7. **可操作建议**:在分析报告中提供具体的 UI/UX 改进建议 +2. **直接使用 URL,无需下载**:mcp__4_5v_mcp__analyze_image 工具直接接受 URL 参数 +3. **分步分析+错峰写入**:采用"分析一个→写入一个"的模式,避免触发 429 错误 +4. **精确记录坐标**:所有坐标范围应精确记录,格式为 X:xxx-xxx, Y:xxx-yyy +5. **结构化输出**:使用统一的 Markdown 格式,便于后续整理和查阅 +6. **详细描述**:尽可能详细地描述每个 UI 元素,包括文字内容、颜色、位置等 +7. **错误处理**:遇到 MCP 错误时,尝试备用方案或标注"待确认" +8. **可操作建议**:在分析报告中提供具体的 UI/UX 改进建议 ## Common Patterns @@ -197,7 +299,7 @@ curl -o /workspace/group/temp/filename.jpg "https://d8d-design-ai-oss.oss-cn-bei **问题:图片分析不准确** - 解决:确认使用的是阿里云 OSS 原始图片 URL,而不是 CDN 转换后的 URL -- 备用:尝试重新下载原始图片,避免使用缓存 +- 备用:尝试使用不同的原始 URL 或重新上传图片 **问题:界面坐标识别不准确** - 解决:多次分析并交叉验证,手动调整坐标范围