screenshot-ui-analyzer — Claude Code subagent: read UI
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.
npx claude-code-templates@latest --agent ui-analysis/screenshot-ui-analyzerWhat screenshot-ui-analyzer 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.
What it helps with
- 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 for the agent
- analyze
dashboard.pngand 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
How to install screenshot-ui-analyzer
1claude-code-templates
npx claude-code-templates@latest --agent ui-analysis/screenshot-ui-analyzer2Manually: put the files in place
.claude/agents/screenshot-ui-analyzer.mdFor all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention
Manually: put the files in place
.codex/agents/screenshot-ui-analyzer.tomlCodex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/
Manually: put the files in place
.cursor/agents/screenshot-ui-analyzer.mdCursor also reads .claude/agents/
Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean
Questions about screenshot-ui-analyzer
How do I install screenshot-ui-analyzer in Claude?
Through the templates CLI: npx claude-code-templates@latest --agent ui-analysis/screenshot-ui-analyzer. The subagent file lands at .claude/agents/screenshot-ui-analyzer.md.
What does screenshot-ui-analyzer do?
It reads a UI screenshot and returns JSON: page type, section structure, visible components with their states, component-library hints and a description of the visual hierarchy.
Can it change my code based on the analysis?
No. Its tools are Read and TodoWrite, so it produces a JSON report and leaves the project untouched.
