screenshot-analyzer — Claude Code command: what it does and setup
Runs parallel subagents on interface screenshots to extract UI components, flows, and business rules into a Markdown task list.
npx claude-code-templates@latest --command utilities/screenshot-analyzerWhat screenshot-analyzer does
The workflow runs across five phases. It begins by collecting context about the target product and confirming the screenshot files. During the second phase, the command triggers three subagents in parallel using the Task tool. One inspects UI layout and visual elements, another maps interactive transitions, and the third extracts domain business logic.
Once the parallel analysis finishes, a synthesizer agent deduplicates the findings and organizes them into a hierarchical structure. A separate reviewer agent then inspects the draft against the original image to catch omitted details.
The final task list is written to docs/plans/YYYY-MM-DD-<product>-features.md. The command requires the Task tool enabled in Claude Code, because subagent execution depends on it.
What it helps with
- identify visual components and layouts from product screenshots
- extract domain logic and data entities from interface captures
- map user interaction flows and state transitions
- generate a structured markdown backlog of development tasks
Example prompts for the agent
- /screenshot-analyzer ./screenshots/dashboard.png
- /screenshot-analyzer inspect checkout screen from ./assets/cart.png
- /screenshot-analyzer
How to install screenshot-analyzer
1claude-code-templates
npx claude-code-templates@latest --command utilities/screenshot-analyzer2Manually: put the files in place
.claude/commands/screenshot-analyzer.mdCall it with /screenshot-analyzer. For all projects use ~/.claude/commands/
Manually: put the files in place
~/.codex/prompts/screenshot-analyzer.mdCall it with /prompts:screenshot-analyzer. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.github/prompts/screenshot-analyzer.prompt.mdManually: put the files in place
.gemini/commands/screenshot-analyzer.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about screenshot-analyzer
How to install screenshot-analyzer in Claude Code?
Run npx claude-code-templates@latest --command utilities/screenshot-analyzer in your terminal. Alternatively, save the command file directly to .claude/commands/screenshot-analyzer.md.
What does screenshot-analyzer do?
It breaks screenshot inspection across specialized subagents covering UI layout, interaction states, and domain logic. A synthesis step then compiles their reports into a unified task list.
Where does the command save generated files?
Outputs are saved to docs/plans/YYYY-MM-DD-<product>-features.md. The command creates the docs/plans directory automatically if it is missing.
Source text
screenshot-analyzer.md · MIT
--- description: "Analyze product screenshots to extract features and generate development task lists." argument-hint: Screenshot path or description allowed-tools: Read, Write, Grep, Glob, TodoWrite, Task --- # Screenshot Analysis Command This command uses a multi-agent pipeline for comprehensive screenshot analysis. ## Phase 1: Discovery **Goal**: Understand what screenshots to analyze Initial request: $ARGUMENTS **Actions**: 1. If no screenshot path provided, ask user: - What screenshots do you want me to analyze? - What product/app are these from? - Is this for competitive analysis or internal product planning? 2. Read and verify the screenshot files exist 3. Confirm scope with user (single screen, full app, specific feature) --- ## Phase 2: Multi-Agent Analysis For each screenshot, launch THREE analysis agents IN PARALLEL using Task tool: ### Parallel Agent Calls Launch all three in a SINGLE message with multiple Task tool calls: **Task 1: UI Analysis** - subagent_type: "general-purpose" - prompt: Include screenshot path, ask for UI components, layout, design patterns analysis in JSON format **Task 2: Interaction Analysis** - subagent_type: "general-purpose" - prompt: Include screenshot path, ask for user flows, clickable elements, state transitions in JSON format **Task 3: Business Analysis** - subagent_type: "general-purpose" - prompt: Include screenshot path, ask for business functions, data entities, domain logic in JSON format Each agent should: 1. Read the screenshot using the Read tool 2. Analyze according to their specialty 3. Return structured JSON analysis --- ## Phase 3: Synthesis After parallel analyses complete, launch synthesizer agent: **Task 4: Synthesis** - subagent_type: "general-purpose" - prompt: Provide all three analysis results, ask to combine into unified task list The synthesizer should: 1. Cross-reference all analyses 2. Deduplicate features 3. Generate hierarchical task list 4. Output markdown format --- ## Phase 4: Review Launch reviewer agent to validate: **Task 5: Review** - subagent_type: "general-purpose" - prompt: Provide screenshot path and synthesized task list, ask for completeness review The reviewer should: 1. Compare against original screenshot 2. Check for missing features 3. Validate task quality 4. Suggest corrections if needed --- ## Phase 5: Output 1. Write final task list to `docs/plans/YYYY-MM-DD-<product>-features.md` 2. Create the docs/plans directory if it doesn't exist 3. Present summary to user with: - Total modules identified - Total features extracted - Total tasks generated - Link to output file --- ## Example Parallel Analysis Call When you reach Phase 2, your response should include THREE Task tool calls like: ``` [Task 1: UI Analysis for screenshot.png] [Task 2: Interaction Analysis for screenshot.png] [Task 3: Business Analysis for screenshot.png] ``` All launched simultaneously for maximum efficiency.
© davila7 · MIT · davila7/claude-code-templates