---
title: "analyze screenshot"
description: "Analyze a screenshot or UI image to identify elements, layout issues, and implementation details."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/analyze-screenshot
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:07:31.978Z
license: CC-BY-4.0
attribution: "analyze screenshot — Claudary (https://claudary.paisolsolutions.com/skills/analyze-screenshot)"
---

# analyze screenshot
Analyze a screenshot or UI image to identify elements, layout issues, and implementation details.

## Overview

Analyze a screenshot or UI image to identify elements, layout issues, and implementation details.

## Steps


1. Load and examine the screenshot:
2. Catalog visual elements:
3. Analyze the layout:
4. Identify design details:
5. Detect potential issues:
6. Generate implementation notes:

## Format


```
Screenshot Analysis:
Type: <web|mobile|desktop>
Elements: <count by category>
Layout: <grid|flex|absolute> structure
```


## Rules

- Be specific about colors, sizes, and spacing (estimate values).
- Note any accessibility concerns immediately.
- Describe layout in terms that map to CSS (flexbox, grid).

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/analyze-screenshot) · https://claudary.paisolsolutions.com