Screenshot UI Analyzer Guru

Extracts and catalogs UI components, layout structures, and design patterns from application screenshots.

When to Use This Agent

Choose this agent when you need to:

• Reverse-engineer component hierarchy and layout structure from application screenshots
• Generate structured JSON inventories of UI elements for migration planning
• Identify design system patterns and visual hierarchy without source code access

Consider alternatives when:

• You have direct DOM access and can inspect elements programmatically
• You need to generate functional code rather than an analytical inventory

Quick Start

Configuration

Copy
name: screenshot-ui-analyzer-guru
type: agent
category: ui-analysis

Example Invocation

Copy
claude agent:invoke screenshot-ui-analyzer-guru "Analyze the dashboard screenshot for all interactive components"

Example Output

{
  "page_type": "dashboard",
  "layout": {
    "structure": "sidebar-main",
    "sections": ["top-nav", "sidebar", "main-content"]
  },
  "components": [
    { "type": "sidebar-nav", "location": "sidebar", "state": "expanded" },
    { "type": "data-table", "location": "main-content", "state": "default" },
    { "type": "bar-chart", "location": "main-content", "state": "active" }
  ],
  "design_patterns": ["card-based-layout", "fixed-sidebar"],
  "visual_hierarchy": "sidebar-dominant with content cards"
}

Core Concepts

Visual Analysis Taxonomy

Aspect	Details
Component Identification	Navigation, forms, data display, feedback, and media elements cataloged by type
Layout Analysis	Page structure detection including grid systems, spacing rhythm, and breakpoints
Pattern Recognition	Component library fingerprinting (Material, Ant Design, Chakra) via styling cues
State Detection	Active, disabled, loading, error, empty, hover, and selected states per element
Visual Hierarchy	Reading order, focal points, typographic scale, and color weight distribution

Analysis Pipeline Architecture

+------------------+     +------------------+     +-------------------+
|  Screenshot      |---->|  Region          |---->|  Component        |
|  Ingestion       |     |  Segmentation    |     |  Classification   |
+------------------+     +------------------+     +-------------------+
                                                          |
         +-------------------+     +-------------------+  |
         |  Structured JSON  |<----|  Pattern & State   |<-+
         |  Output           |     |  Mapping          |
         +-------------------+     +-------------------+

Configuration

Parameter	Type	Default	Description
analysis_depth	string	"standard"	Detail level: "quick", "standard", or "exhaustive"
output_format	string	"json"	Output structure: "json", "markdown", or "csv"
include_states	boolean	true	Detect and report component interaction states
design_system_hint	string	null	Known design system for more accurate matching
responsive_analysis	boolean	false	Infer responsive breakpoint behavior from layout cues

Best Practices

1. Provide High-Resolution Screenshots - Higher resolution preserves fine details like icon glyphs, border radii, and subtle shadows that distinguish component libraries. Low-res images cause misclassification of small elements such as toggles and checkboxes.

2. Capture Full Viewport Context - Include the entire visible viewport rather than cropping to a single section. The agent uses surrounding context to determine grid structures, spacing patterns, and hierarchical relationships invisible in isolation.

3. Include Multiple States - Supplying screenshots of the same view in different states (loading, error, empty, populated) builds a comprehensive state map valuable for design system audits where state coverage is a key metric.

4. Annotate Ambiguous Regions - Provide brief notes for custom or non-standard components. The agent excels at standard patterns but benefits from hints when encountering bespoke widgets like domain-specific visualizations.

5. Use Consistent Dimensions - Maintain identical viewport dimensions across captures when analyzing multiple screens. This enables accurate comparison of layout shifts and spacing consistency across pages.

Common Issues

1. Overlapping Components Misidentified - Modals, dropdowns, or tooltips overlapping content may be merged into a single component. Capture separate screenshots with and without overlays to classify each layer independently.

2. Dark Mode Contrast Misread - Dark themes can cause boundary misidentification where background and border colors converge. Use the design_system_hint parameter to improve boundary detection accuracy.

3. Custom Icon Systems Unrecognized - Proprietary icon sets may be classified generically as "icon" without semantic meaning. Supply a reference legend or description of the icon system to improve classification.