majiayu000 Composition & Layout Critic (Layout-Kritiker)
Critique UI layouts and provide specific, actionable fixes.
When to Use
- Something feels "off" but can't articulate why
- Before finalizing a design
- After adding new components
- Quick design review needed
Process
1. Analyze Core Principles
Visual Hierarchy
- Is there a clear focal point?
- Can you identify primary, secondary, tertiary elements?
- Does the eye flow naturally?
Spacing & Rhythm
- Is whitespace consistent?
- Are related elements grouped?
- Is there breathing room?
Alignment
- Are elements on a grid?
- Do edges align vertically/horizontally?
- Are there orphaned elements?
Color Balance
- Is there a dominant color?
- Are accents used sparingly?
- Do colors compete for attention?
Contrast & Legibility
- Is text readable on backgrounds?
- Are interactive elements obvious?
- Is there enough visual contrast?
2. Diagnose Issues
| Symptom | Likely Cause |
|---|---|
| "Too busy" | Too many focal points, not enough whitespace |
| "Boring" | No visual hierarchy, monotone colors |
| "Muddy" | Low contrast, competing colors |
| "Cluttered" | Insufficient spacing |
| "Unfinished" | Inconsistent spacing, misaligned elements |
3. Prescribe Specific Fixes
❌ Instead of: "Add more whitespace"
✅ Say: "Increase padding from 16px to 32px on the main card"
❌ Instead of: "Fix the colors"
✅ Say: "Desaturate the blue (#3498db → #5d7a8c) so it doesn't compete with the orange CTA"
❌ Instead of: "Improve hierarchy"
✅ Say: "Make the title 24px→32px, reduce subtitle opacity to 70%"
4. Provide Code
Show the actual CSS/Tailwind changes:
/* Before */
.card { padding: 16px; }
.title { font-size: 18px; }
/* After */
.card { padding: 32px; }
.title { font-size: 24px; font-weight: 600; }
Critique Template
## Layout Critique: [Screen Name]
### What's Working
- [positive 1]
- [positive 2]
### Issues Found
**1. [Issue Name]**
- Problem: [specific description]
- Impact: [why it matters]
- Fix: [exact change]
### Priority Fixes
1. [Most impactful]
2. [Second priority]
### Code Changes
[Tailwind/CSS snippets]
Red Flags Checklist
Immediate fixes if:
- Text on image with no overlay
- More than 3 competing colors at same saturation
- Elements touching edges with no padding
- Inconsistent border-radius
- Mixed spacing units (8px, 10px, 15px)
- No distinction between interactive and static elements