Screenshot Feature Extractor

davila7/claude-code-templates/cli-tool/components/skills/development/screenshot-feature-extractor

作者 davila78da17d671b6f無授權條款32K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫今天更新

Analyze product screenshots to extract feature lists and generate development task checklists. Use when: (1) Analyzing competitor product screenshots for feature extraction, (2) Generating PRD/task lists from UI designs, (3) Batch analyzing multiple app screens, (4) Conducting competitive analysis from visual references.

僅含說明Research & Analysis Productivity & Workflow

AI 產生的概覽

分析產品介面截圖，擷取功能清單並產生開發任務清單。

功能: 此技能會編排一條多代理流程，讀取產品截圖，並從介面、互動與業務三個角度平行分析。接著由綜合代理將結果合併為統一的功能與任務清單，再由審查代理驗證。最終輸出為寫入 docs/plans 下依日期命名檔案的 Markdown 任務清單，格式取自其參考文件。
適用情境: 適用於從競品產品截圖擷取功能、將介面設計轉為 PRD 或任務清單、批次分析多個應用程式畫面，或依據視覺素材進行競品分析。
執行需求: 需要具備截圖影像檔並能使用 Task 工具啟動子代理的代理環境。此技能未附帶指令碼；它引用隨附的輸出格式文件，並將結果寫入 docs/plans/。

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

                    ┌─────────────────┐                    │   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.

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.

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.

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

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.

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 [blocked]
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

來源與署名

來源：davila7/claude-code-templates位於cli-tool/components/skills/development/screenshot-feature-extractor提交8da17d6

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Screenshot Feature Extractor

Screenshot Analyzer (Multi-Agent)

Multi-Agent Architecture

Process

Phase 1: Screenshot Collection

Phase 2: Parallel Analysis

Phase 3: Synthesis

Phase 4: Review

Phase 5: Output

Key Guidelines

Benefits of Multi-Agent Approach

來源與署名

更多來自 davila7/claude-code-templates 的技能

React Best Practices

Web Performance Optimization

Find Bugs

Browser Automation

Code Review

Commit

更多Research & Analysis技能

Equity Research

Sector Overview

Idea Generation

Competitive Analysis

Notion Research Documentation

Notion Meeting Intelligence