analyze screenshot

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).