Home/UI/UX 设计/screenshot-feature-extractor
S

screenshot-feature-extractor

by @davila7v
4.6(26)

Efficiently extracts product features from UI screenshots using a multi-agent analysis process, aiding design.

Image RecognitionComputer VisionUI Feature ExtractionScreenshot AnalysisAI Design ToolsGitHub
Installation
npx skills add davila7/claude-code-templates --skill screenshot-feature-extractor
compare_arrows

Before / After Comparison

1
Before

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.

After

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

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs787
Rating4.6 / 5.0
Version
Updated2026年3月17日
Comparisons1

User Rating

4.6(26)
5
0%
4
0%
3
0%
2
0%
1
0%

Rate this Skill

0.0

Compatible Platforms

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

Timeline

Created2026年3月17日
Last Updated2026年3月17日