mcpField
S
screenshot-analyzer

screenshot-analyzer

github.com/notedit开发340202 次安装34 周前更新
代码仓库

关于 screenshot-analyzer

screenshot-analyzer 是通过多 Agent 流程从界面截图提取产品功能的技能。它分别分析界面、交互和业务逻辑，再综合并审查任务清单，重点描述要构建的功能而非技术实现。

主要功能

  1. 01并行分析界面、交互与业务逻辑
  2. 02综合多视角分析结果
  3. 03审查任务清单的完整性
  4. 04将任务拆分为可执行子项
  5. 05跨截图去重功能

适用场景

  1. 01从界面截图整理开发任务
  2. 02分析多个产品页面并归并功能
  3. 03提取截图中的交互与导航流程
  4. 04进行竞品功能与差距分析

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/notedit/happy-skills --skill screenshot-analyzer

安装后在 Claude Code 中输入/screenshot-analyzer确认已加载。

附带文件references/output-format.md

详细介绍

截图分析器（多 Agent）

通过协同的多 Agent 分析流水线，从 UI 截图中提取产品功能。

核心原则：描述要构建什么（功能/交互），而不是如何构建（不涉及技术栈）。

多 Agent 架构

此技能编排 5 个专用 Agent 进行综合分析：

                    ┌─────────────────┐
                    │   Coordinator   │
                    │   (this skill)  │
                    └────────┬────────┘
                             │
         ┌───────────────────┼───────────────────┐
         │                   │                   │
         ▼                   ▼                   ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│  UI Analyzer    │ │  Interaction    │ │   Business      │
│  (parallel)     │ │   Analyzer      │ │    Analyzer     │
│                 │ │  (parallel)     │ │   (parallel)    │
└────────┬────────┘ └────────┬────────┘ └────────┬────────┘
         │                   │                   │
         └───────────────────┼───────────────────┘
                             ▼
                    ┌─────────────────┐
                    │   Synthesizer   │
                    │   (sequential)  │
                    └────────┬────────┘
                             │
                             ▼
                    ┌─────────────────┐
                    │    Reviewer     │
                    │   (sequential)  │
                    └─────────────────┘

流程

阶段 1：截图收集

收集所有需要分析的截图：

  1. 读取用户提供的截图文件
  2. 对于每张截图，记录文件路径及所提供的任何上下文
  3. 如果有多张截图，判断它们是否来自同一产品
阶段 2：并行分析

针对每张截图，并行启动三个 Task 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 工具进行三次并行调用，以最大化效率。

阶段 3：综合

在所有并行分析完成后，启动综合 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
阶段 4：审查

启动审查 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.
阶段 5：输出
  1. 将最终任务列表写入 docs/plans/YYYY-MM-DD-<product>-features.md
  2. 使用 references/output-format.md 中的格式
  3. 向用户展示摘要

关键准则

  • 所有任务均使用 - [ ] 复选框格式
  • 将功能拆分为小型、可执行的子任务
  • 关注用户交互，而非实现细节
  • 对于多张截图：在所有屏幕之间对功能去重
  • 对于竞品分析：突出独特功能与差距

多 Agent 方法的优势

  1. 全面性 - 三个专业视角可捕捉更多细节
  2. 速度 - 并行分析缩短总耗时
  3. 质量 - 综合 + 审查确保输出连贯、完整
  4. 专业化 - 每个 Agent 专注于其领域专长

评论

支持 Markdown