screenshot-feature-extractor

核心能力

screenshot-feature-extractor 是一款多 Agent 协作分析产品截图的智能体技能。它通过协调 5 个专用 Agent 并行工作，从 UI 截图和界面设计中自动提取功能列表，并生成结构化的开发任务清单，适用于竞品分析、PRD 撰写、UI 设计评审等多种场景。

多 Agent 并行分析架构：协调 5 个专用 Agent 同时工作，Coordinator 负责任务调度，UI Analyzer、Interaction Analyzer、Business Analyzer 并行处理不同维度，Synthesizer 整合结果，Reviewer 做质量审核

功能清单自动提取：输入截图，自动识别并输出产品的功能模块列表，每个功能附带详细的任务拆解

竞品截图对比分析：批量分析多个产品的截图，快速生成竞品功能对照表

PRD 和任务清单生成：基于截图内容自动生成符合规范的产品需求文档和开发任务检查清单

多应用批量处理：支持同时处理多张来自同一产品的不同页面截图，生成统一的功能规划

纯描述性输出：只描述要构建什么（WHAT），不指定技术实现方式（HOW），避免技术偏见

安装配置

方式一：skills CLI 一键安装

npx skills add davila7/claude-code-templates --skill screenshot-feature-extractor -g -a claude-code -y

方式二：手动克隆安装

git clone --depth 1 https://github.com/davila7/claude-code-templates /tmp/claude-code-templates cp -r /tmp/claude-code-templates/cli-tool/components/skills/development/screenshot-feature-extractor ~/.claude/skills/screenshot-feature-extractor-davila7

方式三：Smithery 平台安装

npx skills add https://smithery.ai/skills/davila7/claude-code-templates --skill screenshot-feature-extractor

使用步骤

步骤一：准备截图

将待分析的产品截图准备好，标注文件路径。推荐提供多张不同页面的截图，以获得更完整的分析结果。

步骤二：触发技能

向 AI 助手描述你的需求，例如：「分析这个截图中的产品功能，提取主要模块和用户交互流程，输出开发任务清单」

步骤三：并行 Agent 分析

技能自动启动三个并行 Agent：

UI Analyzer 分析界面组件、布局结构和设计模式

Interaction Analyzer 分析用户交互、导航流程和状态转换

Business Analyzer 分析业务功能、数据实体和领域逻辑

步骤四：结果整合与审核

Synthesizer 整合三个 Agent 的分析结果，生成结构化的功能清单；Reviewer 对输出内容做完整性审核。

步骤五：输出开发任务清单

最终结果以 Markdown 格式输出到 docs/plans/YYYY-MM-DD--features.md，包含产品定位和核心功能概述、按模块拆解的功能任务清单。

适用场景

竞品功能分析：截取竞品产品界面，自动分析并生成功能对照表，用于产品规划和竞争策略

PRD 文档生成：将 UI 设计稿截图转换为结构化的产品需求文档，加速产品从设计到开发流程

UI 设计评审：设计师提交设计稿截图，AI 自动识别设计模式和组件，辅助开发团队理解设计意图

多应用批量分析：同时分析一个产品的多个页面截图，生成完整的产品功能图谱

适用人群

产品经理：需要快速了解竞品功能、撰写 PRD 文档的从业者

AI 应用开发者：使用 Claude Code、Cursor 等 AI 编程助手的工程师

UX 设计师：希望将设计稿快速转化为可执行开发任务的设计师

创业者和独立开发者：需要快速分析目标产品功能、制定开发计划的创始人

工作原理

该技能通过多 Agent 协调架构实现截图分析。Coordinator Agent 负责任务分发和结果整合，三个专业分析 Agent（UI/Interaction/Business）并行处理截图的不同维度，采用 Describe WHAT NOT HOW 原则——只输出功能描述，不指定技术实现方式，确保生成的任务清单与技术栈无关。

安装来源：davila7/claude-code-templates 仓库（★30.4K），MIT 许可证。