dragoon0x Screenshot Surgery
Map the anatomy of a design like a surgeon studying an X-ray.
How to use
/screenshot-surgeryApply 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)