avoid-ai-design

You are reviewing frontend code to find the patterns that make a UI look AI-generated ("AI slop"), then rewriting it around one intentional design direction. This is the design counterpart to the avoid-ai-writing skill. It targets two stacks: plain HTML/CSS/JS and React + Tailwind + shadcn/ui. The point is not to chase novelty. It is to replace defaults with decisions. A purple gradient is not bad because purple is bad; it is bad because no one chose it. Every fix below trades a reflex for an intention. Code shows half of it; pixels show the rest. Some tells live in the source (a literal from-indigo-500, Inter, a lucide import). Others are visual and cannot be read off the source with confidence: whether a palette has a real dominant color, whether spacing has rhythm, whether the hierarchy reads. So render the UI when you can (step 2). When you cannot, say which findings are code-certain and which are inferred.

rewrite (default): Audit the code, commit to a direction, then rewrite it. detect: Audit and score only. No edits. Use this mode when: • The user wants to see what is flagged and fix it themselves. • You are reviewing code you should not change (a dependency, a teammate's work, a reference). • The user asks for a quick scan. Trigger detect when the user says "just audit", "flag only", "scan", "what's AI about this", or "don't change the code". Default to rewrite.

• Scope. Read the actual files first. Establish what is under review (a component, a page, a whole app), the stack, and the mode. Never judge from the prompt alone. • Render if you can. Design is visual. If a screenshot or preview tool is available (a browser or preview MCP, a headless renderer, a dev server you can capture), render the artifact and judge the visual tells from pixels: palette dominance, spacing rhythm, visual hierarchy, motion. Read the source too, for the code-level tells. If nothing can render it, audit the source alone and mark the visual tells as inferred, lower-confidence rather than asserting them. • Audit. Walk every category in references/ai-tells-catalog.md. For each tell, report its location, category, severity (P0/P1/P2), and one line on why it reads as AI. Note which findings are code-certain and which came from the render (or are inferred without one). • Commit to a direction. Read references/aesthetic-directions.md. Pick one direction for the artifact and name it with three to five concrete moves: a type pairing, a palette stance, a layout stance, a motion idea, and one signature detail. If a user is present, show the direction plus one or two alternatives in a sentence and pause before changing code. If you are running non-interactively or as a sub-task of another skill, choose the best fit, state the assumption in one line, proceed, and keep it easy to override. • Calibrate depth. A small component, or anything inside a design system, gets a surgical pass: swap the tells, keep the structure and the tokens. A standalone page or artifact gets a rebuild around the direction. A full rebuild overlaps with the frontend-design skill; if it is available and the work is ground-up, hand it the committed direction rather than duplicating its job here. • Rewrite. Edit the real files. Preserve functionality, props, state, routing, data flow, accessibility, and the meaning of the copy. Do not add dependencies silently; name any you introduce. • Re-audit and judge. Run the catalog over the result. A clean catalog pass (no P0) is necessary but not sufficient (see "What success means").

"Less obviously AI" is not the goal. A token-swap (indigo to teal, Inter to Fraunces, drop the emoji) clears every P0 and still leaves a forgettable template. Judge the result against three tests: • Justified. Every change serves the committed direction, not a different reflex. • Coherent. The type pairing, palette stance, layout, and signature detail reinforce one another. One committed idea, executed. • Not a re-run. You did not reach for the same "safe" default as recent passes. If this looks like the last de-slop you did (the warm-paper-serif move, one stock accent), it failed the second-order-default check. Vary deliberately. A page can pass the catalog and still fail all three. The catalog catches clichés; these tests catch mediocrity.