screenshot-feature-extractor
Efficiently extracts product features from UI screenshots using a multi-agent analysis process, aiding design.
npx skills add davila7/claude-code-templates --skill screenshot-feature-extractorBefore / After Comparison
1 组Product managers or designers need to manually analyze UI screenshots, identify and record product features and interactions, which is time-consuming and prone to missing details, especially inefficient when dealing with a large number of screenshots.
Using the `screenshot-feature-extractor` skill, product features are automatically extracted from UI screenshots through a coordinated multi-agent analysis pipeline. This enables rapid generation of structured feature descriptions, significantly improving the efficiency and accuracy of feature extraction, and ensuring the completeness of descriptions.
description SKILL.md
screenshot-feature-extractor
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
Weekly Installs239Repositorydavila7/claude-…emplatesGitHub Stars23.1KFirst SeenJan 21, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykWarnInstalled onopencode199gemini-cli191claude-code180codex176cursor174github-copilot166
forumUser Reviews (0)
Write a Review
No reviews yet
Statistics
User Rating
Rate this Skill