Claude Code CommandUtilities15 installs

Screenshot Analyzer

"Analyze product screenshots to extract features and generate development task lists."

Install with the Claude Code Templates CLI
$ npx claude-code-templates@latest --command="utilities/screenshot-analyzer" --yes

Requires Claude Code. The command adds this command to your project's .claudedirectory — nothing runs on ToolZip's servers.

What's inside this command

Component source

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:
  • 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?

  • Read and verify the screenshot files exist
  • 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:

  • Read the screenshot using the Read tool
  • Analyze according to their specialty
  • 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:

  • Cross-reference all analyses
  • Deduplicate features
  • Generate hierarchical task list
  • 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:

  • Compare against original screenshot
  • Check for missing features
  • Validate task quality
  • Suggest corrections if needed


Phase 5: Output

  • Write final task list to docs/plans/YYYY-MM-DD-<product>-features.md
  • Create the docs/plans directory if it doesn't exist
  • 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.

Type
Command
Category
Utilities
Installs
15
Source
GitHub ↗

Related Claude Code Commands

Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.