designers-eye

What this skill does

# Designers Eye — Professional Design Critique

A critical eye for design. Share a screenshot, image, or website URL and get honest, theory-backed feedback prioritized by impact.

## How It Works

**Input:** Any visual file — UI design (app & web), logos, photos, graphics, PDFs (as images), anything visual. Share directly in chat.

**Analysis:** Examined through 11 rigorous frameworks covering visual fundamentals, information hierarchy, usability, and platform expectations.

**Output:** Priority-ordered action list (critical → important → polish) with specific fixes linked to violated principles.

## How to Use

Share any image. That's it. UI design, logos, graphics, photos, PDFs exported as images, Figma frames — anything you can see gets the same treatment: theory-backed critique ranked by severity and actionability.

---

## Analysis Framework

Every critique examines 11 dimensions:

**1. Gestalt Principles** — How elements group and relate (proximity, similarity, continuity, closure, figure/ground, common fate, prägnanz, uniform connectedness).

**2. Visual Hierarchy** — What's the focal point? Are reading paths clear? Do size, weight, colour, position, and whitespace align?

**3. Colour Science (Itten)** — Colour contrast types (hue, saturation, value, temperature, simultaneous). Harmony systems (complementary, triadic, analogous). Emotional temperature. Colour interaction and optical mixing. WCAG contrast (4.5:1 text, 3:1 UI). Colourblind accessibility.

**4. Typography** — Type scale coherence. Font pairings. Readability (16px+ body). Line length (45–75 chars). Line height (1.5+). Weight and style choices. Hierarchy through type.

**5. Grid Structure & Alignment (Müller-Brockmann)** — Underlying grid present? Alignment consistency. Modulation (repetition with variation). Spacing relationships and rhythm. Margins and gutters logical.

**6. Composition & Moment (Freeman)** — Viewpoint and perspective. Framing (what's included/excluded). Depth relationships (foreground, middle, background). Focus and blur (selective attention). Scale and proportion. Moment/timing (if applicable).

**7. Information Design (Tufte)** — Data-ink ratio (signal vs noise). Information density. Layering and progressive disclosure. Clarity of intent. Reducing cognitive load.

**8. Reduction & Honesty (Rams/Bauhaus)** — Nothing superfluous. Form follows function. Reduction to essentials. Timelessness and coherence. Honest representation.

**9. Visual Balance & Weight** — Symmetrical vs asymmetrical balance. Visual weight of elements. Tension and composition stability.

**10. Usability Heuristics (Nielsen/Norman)** — System visibility and status. Match between system and real world. User control and freedom. Consistency and standards. Error prevention and recovery. Recognition vs recall. Flexibility and efficiency. Aesthetic and minimalist design. Error messages. Help and documentation.

**11. Platform Conventions** — Web, mobile, social, print, email norms. Safe zones. Thumb-friendliness. Expected patterns.

---

## Framework Deep Dive: Nielsen/Norman 10 Usability Heuristics

The 10 usability heuristics (also called Nielsen's Heuristics) are industry-standard principles for evaluating interactive design. Every critique checks these:

1. **System visibility and status** — Users always know where they are and what's happening
2. **Match between system and real world** — Language and concepts users understand
3. **User control and freedom** — Undo, redo, exit emergency exits
4. **Consistency and standards** — Follow platform and design conventions
5. **Error prevention and recovery** — Prevent problems before they happen; help users recover gracefully
6. **Recognition vs recall** — Minimize cognitive load; make options visible
7. **Flexibility and efficiency** — Shortcuts for experts; simplicity for beginners
8. **Aesthetic and minimalist design** — Remove clutter; focus on essentials
9. **Error messages** — Plain language, specific problems, constructive solutions
10. **Help and documentation** — Easy to search, task-focused, concrete steps

**Why this matters:** These heuristics have guided UX design for 30+ years. They're universal across platforms and contexts. A design that violates one of them typically creates friction or confusion for users.

---

## Output Format — Priority-Ordered Action List

Findings are grouped by severity. Fix critical issues first.

**Hard rule:** Every finding — regardless of severity level — must include a `Fix:` line. A critique without a fix is incomplete. Never omit it.

### 🔴 Critical
Issues that break usability, accessibility, or core functionality. Fix immediately.

Example:
```
🔴 Critical — Text contrast fails WCAG AA
The white text on your light blue background achieves 3.2:1 contrast (need 4.5:1 for AA).
This violates: Accessibility / WCAG contrast requirement
Fix: Darken the blue to #0052CC or lighten the text to #F5F5F5. Verify contrast with a checker.
```

### 🟡 Important
Issues that hurt the experience or violate design principles without breaking core function. Fix soon.

Example:
```
🟡 Important — Hierarchy collapse in the heading area
Your H1 (28px) and H2 (24px) sizes violate the type scale ratio (need ~1.25× gap = 35px vs 28px).
This violates: Visual hierarchy / Type scale consistency
Fix: Increase H1 to 35px or decrease H2 to 22px to create a clear scale.
```

### 🟢 Polish
Issues that elevate the design or address missed opportunities. Fix when time allows.

Example:
```
🟢 Polish — Spacing rhythm could be tightened
Your card padding is 20px but section margins are 40px, creating an inconsistent rhythm.
This violates: Gestalt proximity / Visual rhythm consistency
Fix: Use an 8px or 16px grid consistently. Stick to multiples: 8px, 16px, 24px, 32px, 40px, 48px.
```

---

## Workflow

1. **Share the image** — any visual file you want feedback on
2. **Optional:** specify focus — "Critique this" or "What needs fixing?"
3. **Get critique** — ranked by severity, theory-backed, actionable

---

## What This Skill Does NOT Do

- **Doesn't redesign** — You get critique and fixes, not new mockups
- **Doesn't make subjective calls** — "Pink is better than blue" isn't critique; principle-based feedback is
- **Doesn't analyze branding alone** — Focuses on usability, hierarchy, and principles, not "does this feel on-brand?"
- **Doesn't inspect code** — Visual critique only

---

## Tips for Getting Better Critiques

1. **Be specific about platform** — "This is a web app" vs. "This is a mobile app" changes the critique.
2. **Share context** — Is this a v1 rough draft or polished production? Critiques adjust.
3. **Ask a specific question if helpful** — "Does the CTA stand out?" focuses the analysis.
4. **Don't defend your choices** — Critique is feedback, not attack.
5. **Test fixes** — Once you implement, share again if you want confirmation.

---

# Reference: Gestalt Principles

## 1. Proximity
Elements close together are perceived as a group.

**What to look for:**
- Buttons equidistant from two unrelated labels — ambiguity about which label applies
- Form fields with labels too far from their inputs
- Cards where internal spacing equals external spacing — no clear boundary
- Action buttons orphaned from the content they act on

**Common violations:**
- "Floating" headings closer to the section above than the section below
- Navigation items with equal gap to logo and page edge — no clear grouping
- Icon + label pairs with too much internal gap — reads as two separate elements

**Fix pattern:** Tighten spacing within groups; increase spacing between groups. Internal gap should be ≤50% of external gap.

---

## 2. Similarity
Elements that look alike are perceived as related.

**What to look for:**
- Inconsistent button styles for actions of the same hierarchy level
- Links that look like body text (or body text that looks like links)
- Icons with inconsistent weight/style in the same context

**Common violations:**
- Primary CTA