refactor: 简化 ui-layout-analyzer 技能流程

## 优化内容 ### 移除图片下载步骤 - ❌ 之前：使用 curl 下载图片到本地 temp 目录 - ✅ 现在：直接传递阿里云 OSS URL 给 MCP 工具 ### 优势 - 更快速：无需等待图片下载 - 更简洁：减少中间步骤和临时文件 - 更可靠：避免磁盘 I/O 和文件管理问题 ### 保持不变 - ✅ 仍使用阿里云 OSS 原始图片 URL - ✅ 仍采用分步分析+错峰写入模式 - ✅ 避免触发 429 错误 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-28 10:04:39 +00:00
parent a694561783
commit 54cda45d35
1 changed files with 133 additions and 31 deletions
--- 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 或重新上传图片

 **问题：界面坐标识别不准确**
 - 解决：多次分析并交叉验证，手动调整坐标范围