design-critique

Design critique

A structured audit pass run AFTER the design is generated, BEFORE declaring the work done. The goal: catch the recognizable AI-default patterns (purple gradients, Tailwind indigo, emoji-as-icons, container soup) before the user has to call them out.

When to use

Run this skill at the end of any non-trivial design generation:

• After frontend-design produces a new page or component
• After applying an aesthetic preset and before showing the result
• When the user says "audit this", "is this slop?", "make it less generic"
• Before any final export from the canvas

Skip when:

• The design is a tiny tweak (single property, copy edit) — not worth the audit overhead
• The user explicitly asked for a generic / template look — they're consciously opting in

How the audit runs

The critique is a structured walk through three buckets, in order:

1. P0 — cardinal sins. These are the patterns most-cited by reviewers as "this is AI slop." Any P0 hit fails the audit; fix before declaring done.
2. P1 — soft tells. Patterns that aren't fatal alone but compound. Two or more P1 hits should be addressed.
3. P2 — polish opportunities. Nice-to-fix; flag in the response without blocking.

For each bucket, list every hit with the specific file/line and a fix. Don't say "looks good" without enumerating what was checked.

P0 — cardinal sins (must fix)

1. Tailwind indigo as accent. Exactly #6366f1, #4f46e5, #4338ca, #3730a3, #8b5cf6, #7c3aed, #a855f7. The textbook machine tell. Fix: pick a single intentional accent that fits the chosen aesthetic; if no aesthetic was committed, run design-aesthetic-presets first.
2. Two-stop "trust" gradient on the hero. Purple→blue, blue→cyan, indigo→pink. Fix: flat surface + intentional type beats it every time. If a gradient is genuinely required, use a mesh (3+ stops) or a single-hue ramp.
3. Emoji as feature icons. ✨, 🚀, 🎯, ⚡, 🔥, 💡 inside <h*>, <button>, <li>, or class*="icon". Fix: monoline SVG icons (1.4–1.8px stroke) using currentColor. Or no icon — labels alone often beat emoji.
4. Generic display fonts. A page-level hero in Inter / Roboto / Arial / system-ui / Space Grotesk. Fix: pick a display face that fits the aesthetic. The aesthetic-presets skill names canonical pairings.
5. Rounded card with a colored left-border accent. The canonical generated dashboard tile. Fix: drop the radius OR drop the left border, never both together. Better: replace with a different elevation move (top border, no border, full-tint background, top-left corner cut).
6. Invented metrics. "10× faster", "99.9% uptime", "3× more productive" with no source. Fix: pull from real data, or use a labelled placeholder (<span data-placeholder>10×</span>).
7. Filler copy. lorem ipsum, feature one / two / three, placeholder text, sample content. Fix: an empty section is a design problem, not a copy problem — solve with composition, not invented words. Or ask the user for real copy.