| name | screenshot-surgery |
| description | Annotate and map the anatomy of any design. Identify visual hierarchy, spacing systems, color roles, and tension points through clinical analysis. Use when doing formal design audits, teaching design analysis, or building structured observation skills. |
Screenshot Surgery
Map the anatomy of a design like a surgeon studying an X-ray.
How to use
/screenshot-surgery Apply clinical analysis constraints to any design in this conversation.
Constraints
Hierarchy Mapping
- MUST number visible elements 1-5 by visual weight (what demands attention first, second, third)
- MUST note whether the hierarchy matches the content priority
- MUST identify competing elements (two things at the same visual weight fighting for attention)
- SHOULD note what creates the hierarchy: scale, weight, contrast, color, position, or space
Spacing Analysis
- MUST identify whether a consistent spacing unit exists
- MUST note the relationship between element grouping and proximity
- SHOULD check vertical rhythm (are baselines and section spacing predictable?)
Color Mapping
- MUST identify each color's role: structural, semantic, accent, or decorative
- MUST note if any color serves multiple conflicting roles
Tension Points
- MUST identify where visual tension exists (elements competing, almost-alignment, conflicting signals)
- MUST distinguish between intentional tension (creates energy) and accidental tension (creates confusion)
Anti-Patterns
- Adding opinions during the observation phase
- Skipping annotation and jumping to recommendations
- Missing the forest for the trees (cataloging every pixel but missing the big hierarchy problem)
