name: screenshot-analyzer description: “分析产品截图以提取功能列表并生成开发任务清单。使用场景:(1) 分析竞争对手产品截图进行功能提取,(2) 从UI设计生成PRD/任务清单,(3) 批量分析多个应用屏幕,(4) 基于视觉参考进行竞争分析。”
截图分析器(多智能体)
使用协调的多智能体分析流水线从UI截图提取产品功能。
核心原则:描述要构建什么(功能/交互),而不是如何构建(不涉及技术栈)。
多智能体架构
这个技能协调5个专门代理进行全面分析:
┌─────────────────┐
│ 协调器 │
│ (此技能) │
└────────┬────────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ UI分析器 │ │ 交互分析器 │ │ 业务分析器 │
│ (并行) │ │ (并行) │ │ (并行) │
│ │ │ │ │ │
└────────┬────────┘ └────────┬────────┘ └────────┬────────┘
│ │ │
└───────────────────┼───────────────────┘
▼
┌─────────────────┐
│ 合成器 │
│ (顺序) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 审核器 │
│ (顺序) │
└─────────────────┘
流程
阶段1:截图收集
收集所有要分析的截图:
- 读取用户提供的截图文件
- 对于每个截图,记录文件路径和任何提供的上下文
- 如果有多个截图,确定它们是否来自同一产品
阶段2:并行分析
为每个截图启动三个任务代理并行执行:
代理1:screenshot-ui-analyzer
分析此截图的UI组件、布局结构和设计模式。
截图:[文件路径]
以JSON格式返回分析结果。
代理2:screenshot-interaction-analyzer
分析此截图的用户交互、导航流程和状态转换。
截图:[文件路径]
以JSON格式返回分析结果。
代理3:screenshot-business-analyzer
分析此截图的业务功能、数据实体和领域逻辑。
截图:[文件路径]
以JSON格式返回分析结果。
重要:使用Task工具在单个消息中发起三个并行调用以提高效率。
阶段3:合成
所有并行分析完成后,启动合成器代理:
代理4:screenshot-synthesizer
将这些分析结果合成为统一的开发任务清单。
UI分析:
[粘贴UI分析器结果]
交互分析:
[粘贴交互分析器结果]
业务分析:
[粘贴业务分析器结果]
产品名称:[产品名称]
输出文件:docs/plans/YYYY-MM-DD-<产品>-features.md
阶段4:审核
启动审核器代理以验证输出:
代理5:screenshot-reviewer
审核此任务清单的完整性和质量。
原始截图:[文件路径]
任务清单:[合成输出]
如果发现问题,提供修正。
阶段5:输出
- 将最终任务清单写入
docs/plans/YYYY-MM-DD-<产品>-features.md - 使用references/output-format.md中的格式
- 向用户呈现摘要
关键指南
- 所有任务使用
- [ ]复选框格式 - 将功能分解为小的、可执行的子任务
- 关注用户交互,而非实现细节
- 对于多个截图:跨所有屏幕去重功能
- 对于竞争分析:突出独特功能和差距
多智能体方法的优点
- 全面性 - 三个专门视角捕捉更多细节
- 速度 - 并行分析减少总时间
- 质量 - 合成+审核确保连贯、完整的输出
- 专业化 - 每个代理专注于其领域专长