diff --git a/.claude/skills/ui-layout-analyzer/SKILL.md b/.claude/skills/ui-layout-analyzer/SKILL.md index c5643d1..eceb06e 100644 --- a/.claude/skills/ui-layout-analyzer/SKILL.md +++ b/.claude/skills/ui-layout-analyzer/SKILL.md @@ -1,16 +1,24 @@ --- name: ui-layout-analyzer -description: 分析包含多个 UI 界面设计的图片,自动识别每个界面的坐标范围,并逐个进行详细的 UI/UX 分析。适用于 UI 设计稿包含多个界面的复合图、产品需求分析阶段的 UI 设计评审、界面原型图的自动化分析。使用场景:用户提供一张包含多个 UI 界面的图片 URL,需要提取和分析单个界面的设计细节时触发。⚠️ 重要:必须使用阿里云 OSS 原始图片 URL(不要使用 CDN),采用分步分析+错峰写入模式避免 429 错误。 +description: 分析包含多个 UI 界面设计的图片,自动识别每个界面的坐标范围,并逐个进行详细的 UI/UX 分析。支持基于需求文档进行需求符合度评估。适用于 UI 设计稿包含多个界面的复合图、产品需求分析阶段的 UI 设计评审、界面原型图的自动化分析。使用场景:用户提供一张包含多个 UI 界面的图片 URL 和需求文档(可选),需要提取和分析单个界面的设计细节并评估需求符合度时触发。⚠️ 重要:必须使用阿里云 OSS 原始图片 URL(不要使用 CDN),采用分步分析+错峰写入模式避免 429 错误。 --- # UI Layout Analyzer ## Overview -自动分析包含多个 UI 界面的复合图片,识别每个界面的坐标范围,并逐个进行详细的 UI/UX 分析。适用于产品需求分析、UI 设计评审等场景。 +自动分析包含多个 UI 界面的复合图片,识别每个界面的坐标范围,并逐个进行详细的 UI/UX 分析。支持基于需求文档进行需求符合度评估。适用于产品需求分析、UI 设计评审等场景。 + +**核心能力**: +- 📸 自动识别多个 UI 界面的坐标范围 +- 🔍 逐个分析每个界面的 UI/UX 设计细节 +- 📋 基于需求文档评估设计符合度(新增) +- 📊 生成结构化的分析报告 +- ✅ 采用分步分析+错峰写入模式,避免 429 错误 ## Quick Start +**基础用法(无需求文档)**: ``` 请分析这个 UI 设计图片:https://d8d-design-ai-oss.oss-cn-beijing.aliyuncs.com/path/to/image.jpg 该图片包含多个 UI 界面,请按照以下步骤进行分析: @@ -20,8 +28,47 @@ description: 分析包含多个 UI 界面设计的图片,自动识别每个界 4. 整理成结构化的分析报告 ``` +**高级用法(带需求文档分析)**: +``` +请分析这个 UI 设计图片:https://d8d-design-ai-oss.oss-cn-beijing.aliyuncs.com/path/to/image.jpg + +需求文档:/workspace/group/docs/requirements/product-prd.md + +分析要求: +1. 先读取需求文档,提取功能需求和交互要求 +2. 分析 UI 设计图片,识别每个界面 +3. 基于需求文档,评估每个界面的需求符合度 +4. 提供改进建议和最佳实践参考 + +输出格式: +- 需求文档摘要 +- 每个界面的详细分析 +- 需求符合度评估(符合/部分符合/不符合) +- 改进建议清单 +``` + ## Workflow + +### Step 0: 读取需求文档(可选) + +**如果用户提供了需求文档路径**,先读取需求文档内容,了解产品需求和设计意图。 + +```bash +# 读取需求文档(通常是 Markdown 格式) +Read(requirement_doc_path) + +# 如果是其他格式,调用相应技能: +# - PDF: /skill pdf extract +# - Word: /skill docx extract +``` + +**目的**:基于需求文档,在后续分析中评估 UI 设计的符合度。 + +**如果未提供需求文档**:跳过此步骤,直接进行 UI 分析。 + +--- + ### Step 1: 确认图片 URL(⚠️ 重要:使用原始图片 URL) **关键原则**:必须使用阿里云 OSS 或其他云存储的**原始图片 URL**,不要使用 Cloud Code 或其他 CDN 转换后的 URL!