screenshot-surgery

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)