neversight/learn-skills.dev/taste-design-review

taste-design-review

Audit like a design director: screenshot first, then list findings by severity, then fix only what earns it.

1. THE PROCESS (Audit → Rank → Fix → Verify)

Never fix while reviewing. The pass order:

1. Capture: full-page screenshots of every viewport (desktop 1440, tablet 768, mobile 390). Review what is, not what you think is.
2. First read (8 seconds): what does this page say it is? Can you name the product, audience, and primary action without scrolling?
3. Structured pass: apply the checks below, in order.
4. Rank findings: P0 (broken/legal/blocking) / P1 (seriously undermines quality) / P2 (polish) / P3 (preference).
5. Fix in ranked order with atomic changes; re-screenshot and verify each fix didn't break the design argument.
6. Report: findings table with screenshot references, severity, and the one-sentence fix for each.

2. THE TASTE PASS (Visual Quality)

• The kill question: could this page have been generated by a default agent (slop patterns: purple gradients, centered hero + 3 cards, emoji icons, Inter-only, rounded-2xl, browser-chrome screenshot)? Every "yes" is a P1.
• Hierarchy: one dominant element per viewport; does the eye land where the business wants it?
• Type: any text under 10px, more than 3 weights, no display contrast, body full-width, 6-line paragraphs, widows in headings.
• Color: more than ~3 meaningful colors, gradients doing decoration, accent used >4 times per viewport, white text on pale fills, contrast failures (exact: 4.5:1 body / 3:1 large / 3:1 UI).
• Alignment: elements sharing an edge line up (check visually); hairline grid vs. floating cards scattered; spacing scale integrity (any 7px or 13px paddings?).
• Depth: shadows as the only depth source; glass everywhere; cards inside cards inside cards.

3. THE HEURISTIC PASS (Usability — Nielsen's 10, Applied)

1. Visibility of system status (2–3s): every action produces feedback; no dead buttons; loading states exist.
2. Match with the real world: language is the user's, not the company's ("deploy instance" on a consumer site = fail).
3. User control & freedom: exit routes everywhere; undo exists for destructive acts.
4. Consistency: same action looks the same everywhere; one style of button; one way to reach the same destination.
5. Error prevention: destructive actions confirmed; submit buttons guarded; autocomplete on forms.
6. Recognition over recall: no invented jargon; navigation names are self-explanatory.
7. Flexibility: shortcuts for repeat users (search, keyboard) without cluttering the novice path.
8. Aesthetic & minimalist: anything that hides the primary action is noise. If an element doesn't serve a job, it's deleted in the report.
9. Errors communicated well: every error states what happened, why, and what to do — never just "Error".
10. Help & documentation: help exists where users get stuck, not in a help center nobody visits.

4. THE ACCESSIBILITY PASS (Short Version — See taste-accessibility)

• Tab through: focus visible at every stop; no traps; logical order.
• Every input labeled; every button/link has text; alt text is meaningful or empty.
• Contrast spot-check on every distinct surface (heading/body/button/placeholder).
• prefers-reduced-motion handled; anything autoplaying or auto-advancing paused.

5. THE CONVERSION PASS (If Asked to Improve, Not Just Audit)

• One primary CTA above the fold; secondary actions visually quieter or deferred.
• The value proposition lands in ≤ 8 seconds (headline does it, not the sub-sub-line).
• Friction inventory: fields, steps, and clicks between "interested" and "started" — each one justified.
• Trust signals exist where decisions happen (near CTA, in pricing): social proof, guarantees, no-fine-print.

6. REPORT FORMAT (Fixed)

## Audit — <page> (<viewport set>)
 
### P0 — Blocking
- [screenshot ref] finding + one-sentence fix
 
### P1 — Quality
...
 
### P2 — Polish
...
 
### P3 — Preference
...
 
### Verdict (one paragraph)
Is the design argument clear? What single change would improve the page most?

Severity discipline: P3 items are listed but never fixed in the same session as P1s. The verdict names ONE change — if you can't name one, the audit didn't find the real issue.

7. CHECKLIST (Fail the Audit If…)

• [ ] No screenshots were taken/reviewed (never audit from code alone).
• [ ] Findings lack severities or screenshot references.
• [ ] Slop patterns dismissed as "style preference" (they're P1).
• [ ] Anything on the page was fixed before the full audit pass completed.
• [ ] The verdict doesn't name a single most-important change.