Composition & Layout Critic (Layout-Kritiker)

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

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