screenshot-analyzer
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseScreenshot Analyzer (Multi-Agent)
Screenshot Analyzer（多Agent）
Extract product features from UI screenshots using a coordinated multi-agent analysis pipeline.
Core principle: Describe WHAT to build (features/interactions), NOT HOW (no tech stack).
通过协同多Agent分析流程从UI截图中提取产品功能。
核心原则：描述要构建的内容（功能/交互），而非实现方式（不涉及技术栈）。
Multi-Agent Architecture
多Agent架构
This skill orchestrates 5 specialized agents for comprehensive analysis:
┌─────────────────┐
│ Coordinator │
│ (this skill) │
└────────┬────────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ UI Analyzer │ │ Interaction │ │ Business │
│ (parallel) │ │ Analyzer │ │ Analyzer │
│ │ │ (parallel) │ │ (parallel) │
└────────┬────────┘ └────────┬────────┘ └────────┬────────┘
│ │ │
└───────────────────┼───────────────────┘
▼
┌─────────────────┐
│ Synthesizer │
│ (sequential) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Reviewer │
│ (sequential) │
└─────────────────┘该技能编排5个专业Agent以进行全面分析：
┌─────────────────┐
│ Coordinator │
│ (this skill) │
└────────┬────────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ UI Analyzer │ │ Interaction │ │ Business │
│ (parallel) │ │ Analyzer │ │ Analyzer │
│ │ │ (parallel) │ │ (parallel) │
└────────┬────────┘ └────────┬────────┘ └────────┬────────┘
│ │ │
└───────────────────┼───────────────────┘
▼
┌─────────────────┐
│ Synthesizer │
│ (sequential) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Reviewer │
│ (sequential) │
└─────────────────┘Process
流程
Phase 1: Screenshot Collection
阶段1：截图收集
Gather all screenshots to analyze:
- Read the screenshot file(s) provided by the user
- For each screenshot, note the file path and any context provided
- If multiple screenshots, determine if they are from the same product
收集所有待分析的截图：
- 读取用户提供的截图文件
- 为每张截图记录文件路径及任何附带的上下文信息
- 若为多张截图，判断它们是否来自同一产品
Phase 2: Parallel Analysis
阶段2：并行分析
Launch THREE Task agents IN PARALLEL for each screenshot:
Agent 1: screenshot-ui-analyzer
Analyze this screenshot for UI components, layout structure, and design patterns.
Screenshot: [file path]
Return your analysis as JSON.Agent 2: screenshot-interaction-analyzer
Analyze this screenshot for user interactions, navigation flows, and state transitions.
Screenshot: [file path]
Return your analysis as JSON.Agent 3: screenshot-business-analyzer
Analyze this screenshot for business functions, data entities, and domain logic.
Screenshot: [file path]
Return your analysis as JSON.IMPORTANT: Use the Task tool with THREE parallel calls in a single message to maximize efficiency.
为每张截图并行启动三个任务Agent：
Agent 1: screenshot-ui-analyzer
Analyze this screenshot for UI components, layout structure, and design patterns.
Screenshot: [file path]
Return your analysis as JSON.Agent 2: screenshot-interaction-analyzer
Analyze this screenshot for user interactions, navigation flows, and state transitions.
Screenshot: [file path]
Return your analysis as JSON.Agent 3: screenshot-business-analyzer
Analyze this screenshot for business functions, data entities, and domain logic.
Screenshot: [file path]
Return your analysis as JSON.重要提示：在一条消息中使用Task工具进行三次并行调用，以最大化效率。
Phase 3: Synthesis
阶段3：合成
After all parallel analyses complete, launch the synthesizer agent:
Agent 4: screenshot-synthesizer
Synthesize these analysis results into a unified development task list.
UI Analysis:
[paste UI analyzer result]
Interaction Analysis:
[paste Interaction analyzer result]
Business Analysis:
[paste Business analyzer result]
Product Name: [product name]
Output file: docs/plans/YYYY-MM-DD-<product>-features.md完成所有并行分析后，启动合成Agent：
Agent 4: screenshot-synthesizer
Synthesize these analysis results into a unified development task list.
UI Analysis:
[paste UI analyzer result]
Interaction Analysis:
[paste Interaction analyzer result]
Business Analysis:
[paste Business analyzer result]
Product Name: [product name]
Output file: docs/plans/YYYY-MM-DD-<product>-features.mdPhase 4: Review
阶段4：审核
Launch the reviewer agent to validate the output:
Agent 5: screenshot-reviewer
Review this task list for completeness and quality.
Original screenshot(s): [file paths]
Task list: [synthesized output]
If issues found, provide corrections.启动审核Agent以验证输出内容：
Agent 5: screenshot-reviewer
Review this task list for completeness and quality.
Original screenshot(s): [file paths]
Task list: [synthesized output]
If issues found, provide corrections.Phase 5: Output
阶段5：输出
- Write final task list to
docs/plans/YYYY-MM-DD-<product>-features.md - Use format from references/output-format.md
- Present summary to user
- 将最终任务清单写入
docs/plans/YYYY-MM-DD-<product>-features.md - 使用references/output-format.md中的格式
- 向用户展示摘要
Key Guidelines
关键指南
- Use checkbox format for all tasks
- [ ] - Break features into small, executable subtasks
- Focus on user interactions, not implementation details
- For multiple screenshots: deduplicate features across all screens
- For competitive analysis: highlight unique features and gaps
- 所有任务均使用复选框格式
- [ ] - 将功能拆分为小的、可执行的子任务
- 聚焦用户交互，而非实现细节
- 若为多张截图：在所有界面中去重功能
- 若为竞品分析：突出独特功能与差距
Benefits of Multi-Agent Approach
多Agent方案的优势
- Thoroughness - Three specialized perspectives catch more details
- Speed - Parallel analysis reduces total time
- Quality - Synthesis + Review ensures coherent, complete output
- Specialization - Each agent focuses on its domain expertise
- 全面性 - 三个专业视角捕捉更多细节
- 速度 - 并行分析减少总耗时
- 质量 - 合成+审核确保输出连贯、完整
- 专业性 - 每个Agent聚焦其领域专长