# screenshot-ui-analyzer

A subagent that turns a UI screenshot into a component list, layout map and design patterns. Handy when you have an image but no mockup or source.

- subagent · `type=agent` · Claude Code · 1018 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/ui-analysis/screenshot-ui-analyzer.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/agents/screenshot-ui-analyzer

## What it does

This subagent acts as a UI/UX analyst. It looks at a screenshot and writes down everything visible: navigation, forms, tables, cards, modals, toasts, icons, avatars. Each item gets a type, a location and a short description of what it shows. Page structure is covered too — header, sidebar, main area, footer, plus grid and spacing patterns and what the visual hierarchy puts first.

The result is a JSON object with `page_type`, `layout`, `components`, `design_patterns` and `visual_hierarchy`. Component entries include state: active, disabled, loading, error, empty. It also flags signs of a known component library such as Material or Ant Design, and notes colour, typography and icon usage.

Its toolset is small: `Read` and `TodoWrite`. So it reads the image and writes nothing back into your project — you get an analysis, not a patch. For inspecting a running interface rather than a picture, look elsewhere.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --agent ui-analysis/screenshot-ui-analyzer
```

2. **Manually: put the files in place**
- File: `.claude/agents/screenshot-ui-analyzer.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Codex

**Manually: put the files in place**
- File: `.codex/agents/screenshot-ui-analyzer.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/screenshot-ui-analyzer.md` — Cursor also reads .claude/agents/

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/ui-analysis/screenshot-ui-analyzer.md

## When to use it
- break down a third-party interface from a screenshot when the code is out of reach
- list the components on a page before writing markup
- guess which component library a UI was built with
- document element states: loading, error, empty list
- compare the visual hierarchy of two screens

## Example prompts
- analyze `dashboard.png` and return the JSON with components and layout
- look at this form screenshot and list every field and button with its state
- break down `settings-page.png`: which component library, and how is the grid built

## Similar
- [screenshot](https://affpapa.org/en/nevibecode/skills/nexu-io-screenshot.md) — skill · 2700 installs
- [full-page-screenshot](https://affpapa.org/en/nevibecode/skills/nexu-io-full-page-screenshot.md) — skill · 2800 installs
- [argent-screenshot-diff](https://affpapa.org/en/nevibecode/skills/argent-screenshot-diff.md) — skill · 25000 installs
- [browser-screenshot-diff](https://affpapa.org/en/nevibecode/skills/browser-screenshot-diff.md) — skill · 696 installs
- [browser-screenshot](https://affpapa.org/en/nevibecode/skills/browser-screenshot.md) — skill · 4100 installs
- [image-to-ui](https://affpapa.org/en/nevibecode/skills/image-to-ui.md) — skill · 63500 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 224 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md