SuperAPI AI Directory
Partner中文AI newsFavorites
Skillstaste-design-review

taste-design-review

Design & creation

View repository

Updated 10-18 16:13

About this skill

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.