Screenshot Analyzer (Multi-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).

Multi-Agent Architecture

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) │ └─────────────────┘

Process

Phase 1: Screenshot Collection

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

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.

Phase 3: Synthesis

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

Phase 4: Review

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.

Phase 5: Output

• Write final task list to docs/plans/YYYY-MM-DD-<product>-features.md

• Use format from references/output-format.md

• Present summary to user

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

• 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