ホーム/UI/UX 设计/screenshot-feature-extractor
S

screenshot-feature-extractor

by @davila7v
4.6(26)

マルチエージェント分析プロセスにより、UIスクリーンショットから製品の機能特性を効率的に抽出し、デザインを支援します。

Image RecognitionComputer VisionUI Feature ExtractionScreenshot AnalysisAI Design ToolsGitHub
インストール方法
npx skills add davila7/claude-code-templates --skill screenshot-feature-extractor
compare_arrows

Before / After 効果比較

1
使用前

プロダクトマネージャーやデザイナーは、UIスクリーンショットを手動で分析し、製品機能とインタラクションを特定・記録する必要があります。これは時間がかかり、詳細を見落としやすく、特に大量のスクリーンショットを扱う際には非効率です。

使用後

`screenshot-feature-extractor` スキルを使用すると、多エージェント分析パイプラインを調整することで、UIスクリーンショットから製品機能を自動的に抽出できます。これにより、構造化された機能記述を迅速に生成でき、機能抽出の効率と精度が大幅に向上し、記述の完全性が保証されます。

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

forumユーザーレビュー (0)

レビューを書く

効果
使いやすさ
ドキュメント
互換性

レビューなし

統計データ

インストール数787
評価4.6 / 5.0
バージョン
更新日2026年3月17日
比較事例1 件

ユーザー評価

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

この Skill を評価

0.0

対応プラットフォーム

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

タイムライン

作成2026年3月17日
最終更新2026年3月17日