From f54cabdf437c67ac26b4cbe79fe19ce11732fd2f Mon Sep 17 00:00:00 2001 From: Claude AI Date: Sat, 28 Mar 2026 09:05:19 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20ui-layout-analyzer?= =?UTF-8?q?=20=E6=8A=80=E8=83=BD=E5=92=8C=E9=A1=B9=E7=9B=AE=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 ui-layout-analyzer 技能，用于分析包含多个 UI 界面的图片 - 支持自动识别界面坐标范围 - 支持逐个详细分析每个界面的 UI/UX 设计 - 生成结构化的 Markdown 分析报告 - 添加项目配置文件，允许技能目录写入权限 Co-Authored-By: Claude Sonnet 4.6 --- .claude/settings.json | 9 + .claude/skills/ui-layout-analyzer/SKILL.md | 230 +++++++++++++++++++++ 2 files changed, 239 insertions(+) create mode 100644 .claude/settings.json create mode 100644 .claude/skills/ui-layout-analyzer/SKILL.md diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..1655ac9 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "Write(.claude/skills/*)", + "Edit(.claude/skills/*)", + "Read(.claude/skills/*)" + ] + } +} diff --git a/.claude/skills/ui-layout-analyzer/SKILL.md b/.claude/skills/ui-layout-analyzer/SKILL.md new file mode 100644 index 0000000..171863d --- /dev/null +++ b/.claude/skills/ui-layout-analyzer/SKILL.md @@ -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)