avoid-ai-design

A Claude Code skill that audits AI-generated frontend code and rewrites it so it stops looking AI-generated, including the "tasteful" defaults that replaced the purple gradient.

One real page, run through the skill. Same product, same sections, same copy; only the design changed. The scanner finds 23 tells before and no design tells after. Pages and the full audit: examples/demo/.

Ask Claude, Codex, or any model to "build a landing page" and you get the same page every time: a purple-to-blue gradient, Inter for every word, a centered hero over three rounded feature cards, a glassy navbar. Ask it to make that look less AI and you get the next same page: warm cream with a terracotta accent, or near-black with one acid-green signal, all-caps monospace labels, one colored word in the headline, features numbered 01 / 02 / 03.

avoid-ai-design catches both. It scans the frontend an AI just produced, flags the patterns that give it away, and rewrites the interface around a direction drawn from your product rather than from a list of looks. On multi-page work it writes that direction down once, in a DESIGN.md, so page two cannot drift from page one.

It is the design counterpart to avoid-ai-writing: same idea, applied to UI instead of prose.

The problem: AI design converges, twice

Models are trained toward the average, so their UI clusters around safe defaults you can recognize on sight:

• Type that is always Inter, Roboto, or the system stack, with no pairing and no display face.
• Color that is a purple or indigo gradient fading into blue.
• Layout that centers everything: hero, subhead, two buttons, then a three-card feature grid.
• Components wrapped in rounded-2xl, shadow-lg, and backdrop-blur, straight from the shadcn defaults.
• Copy that opens with "Elevate your workflow" and ends with a "Get Started" button.

Then the fix converged too. Anthropic's own frontend-design skill now lists the clusters AI design gathers around once it avoids the purple: cream with a terracotta accent (Claude's own interface color), near-black with one acid-green or vermilion signal, broadsheet hairlines, the SaaS card kit, and template chrome like tracked all-caps eyebrows and A · B · C meta strings. These second-order defaults read as AI to anyone who has seen a few hundred generated pages. This skill's own first demo landed in them, which is how v0.4 came to check for them by name.

What it catches

The full catalog lives in references/ai-tells-catalog.md: 67 tells, each with a detection signal, why it reads as AI, a fix for plain HTML/CSS and for React + Tailwind + shadcn, and its sources.