Antipattern codex

antipattern-codex: the forbidden patterns

Scan every draft for every item in this codex before responding. Rewrite anything that matches. Each pattern here is a tell of low-effort AI output. If your draft contains one, it is not done.

---

Why this matters

AI-generated frontend output has a fingerprint. The fingerprint is not a single pattern; it is a constellation: the purple-to-blue gradient, the centered hero, the three identical cards, the em dash as stylistic tic, the filler phrase, the unmodified component library default. Each of these is a tell. Together, they announce "a model generated this without making a single design decision."

The codex is the catalog of tells. You scan your draft against it before shipping. If a pattern matches, you rewrite. This is not a style preference; it is a quality gate. The ship-validation checklist enforces the codex at the end; this skill is the detailed reference for what each forbidden pattern is, why it fails, and what to do instead.

The self-scan protocol

1. Before shipping, walk every category below (2.1 through 2.5).
2. For each item, check your draft. Does it match the "Bad" pattern?
3. If yes, rewrite using the "Good" pattern or a better alternative.
4. If no, move to the next item.
5. When all items are clear, proceed to ship-validation for the 15-item gate.

No item is skipped. No pattern is "close enough." The codex is binary: the pattern is present or it is not.

2.1 Copy and language antipatterns

Em dash overuse

The em dash has become an AI fingerprint. Use commas, periods, parentheses, or colons. An em dash is permissible only when no other punctuation carries the exact meaning, and never more than once per medium-length document.

Bad: Fast, secure — and built for teams — that ship daily. Good: Fast and secure. Built for teams that ship daily.

Filler and vapor phrases

Banned outright: honestly, in all honesty, to be honest, in today's fast-paced world, delve into, realm of, tapestry of, navigate the landscape, unlock the power of, seamlessly, effortlessly, revolutionize, leverage, robust solution, cutting-edge, game-changer, at the end of the day, it's worth noting that.

Bad: Seamlessly leverage our robust platform to unlock the power of your data. Good: Query 40M rows in under 200ms. Export as CSV or Parquet.

Three-adjective stacking

fast, secure, and scalable is noise. Pick one specific claim and prove it with a number or verb.

Bad: Fast, secure, and scalable. Good: Handles 10,000 concurrent connections with sub-100ms p99 latency.

Hedge padding

might, could potentially, may help you before capabilities the product actually has. State what it does.

Bad: This feature may help you reduce load times. Good: Reduces initial page load by 1.2 seconds on average.

2.2 Visual and color antipatterns

The AI gradient

Purple-to-blue, indigo-to-violet, cyan-on-black-neon. Instantly recognizable, universally overused.

Bad: bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 on a hero or CTA. Good: One considered brand color derived from the product's meaning, applied to approximately 5% of the surface, supported by a neutral scale of 8 to 12 steps.

Default cyan, blue, or indigo primary

If the accent color was not chosen for a semantic reason (heritage, industry, emotional register, contrast target), it is wrong. Derive color from the product, not the framework.

Decorative glassmorphism

backdrop-blur stacked on translucent panels stacked on gradients. Blur is a tool for depth separation over busy content, not a texture.

Ambient glow and colored box-shadows without cause

A glow implies emission (a focused input, a live indicator). It is not decoration.

Low-contrast aesthetic text

text-gray-400 on bg-gray-900 for body copy fails WCAG and signals style over substance. Body text hits 7:1 where possible, 4.5:1 minimum.

2.3 Layout and component antipatterns

The predictable hero

Centered eyebrow tag, 60px headline, one-line subhead, primary and secondary CTA, gradient blob behind. Every AI-built landing page.

Bad: centered eyebrow, large heading, one-line subhead, two buttons, abstract gradient blob. Good: asymmetric composition, editorial typography, a real product artifact instead of an abstract illustration, or a headline that is a specific claim rather than a value proposition.

The 3 or 4 identical card grid

Three feature cards with an icon, a title, and two lines of body copy, all the same size. No hierarchy, no rhythm.

Bad: three or four identical cards in a row. Good: vary card sizes (bento), lead with one dominant card, or replace the grid with a scrollable narrative.

Uniform giant rounded corners

rounded-2xl on cards, buttons, inputs, images, avatars, and the page container. Radius is a hierarchy tool.

Bad: one radius value on everything. Good: a radius scale with assigned roles (e.g., 4px inputs, 8px cards, 999px pills) applied with intent.

Lazy typography

Inter, Geist, or system-ui as the sole typeface with no pairing, no scale discipline, no attention to optical size or tracking.

Bad: one sans-serif at every size. Good: pair a display face with a text face. Set a modular scale. Tune tracking on large sizes. Consider a mono for numeric and tabular data.

Padding as a substitute for design

p-24 everywhere because "clean equals whitespace." Whitespace is a system with rhythm (4/8/12/16/24/32/48/64), not a single large value.

Symmetrical safe centering

Everything centered because it feels balanced. Deliberate asymmetry, off-grid placement, and directional tension create interfaces with character.

Unmodified shadcn/ui or equivalent

Shipping default Button, Card, Dialog with zero customization to color, radius, spacing, motion, or composition. A component library is a starting substrate, not a design system. Customize the tokens; make the system yours.

2.4 Motion antipatterns

Spring bounce on everything

Elastic overshoot on menu opens, card hovers, tab switches. Bounce implies playfulness or physical weight; use it once, intentionally.

Long durations

Anything over 300ms for UI feedback feels sluggish. Micro-interactions live in 120 to 220ms with a considered easing curve (a custom cubic-bezier, not ease-in-out).

Animation as decoration

Elements sliding in on scroll for no reason. Motion communicates change, hierarchy, or causality. If it does none of those, cut it.

Ignoring prefers-reduced-motion

Every animation ships with a reduced-motion fallback or it does not ship.

2.5 Engineering antipatterns

Div soup

Buttons made of divs, headings made of styled spans, lists made of stacked divs. Semantic HTML first: button, nav, main, article, h1 through h6, ul, dl.

Missing ARIA and keyboard support

Custom components without role, aria-label, focus management, or keyboard handlers. Every interactive element is reachable and operable by keyboard.

Hardcoded color literals in components

text-white, bg-[#0a0a0a], text-gray-400 scattered across files. All color, spacing, radius, and shadow values live in tokens.

Client components for static content

"use client" at the top of a marketing page. Server-render by default; opt into interactivity only at interactive leaves, as low in the tree as possible.

The codex quick-scan table

Before shipping, confirm none of these are present in your draft:

Category	Pattern	Present?
Copy	Em dash as stylistic tic	No
Copy	Any banned filler phrase	No
Copy	Three-adjective stacking	No
Copy	Hedge padding before real capabilities	No
Color	Purple-to-blue or indigo-to-violet gradient	No
Color	Default cyan, blue, indigo primary without semantic reason	No
Color	Decorative glassmorphism (blur as texture)	No
Color	Ambient glow without emission cause	No
Color	Body text below 4.5:1 contrast	No
Layout	Predictable centered hero with eyebrow, headline, subhead, two CTAs	No
Layout	3 or 4 identical card grid	No
Layout	Uniform rounded corners on everything	No
Layout	Single sans-serif at every size, no pairing	No
Layout	One large padding value instead of a spacing scale	No
Layout	Everything centered with no asymmetry	No
Layout	Unmodified component library defaults	No
Motion	Spring bounce on everything	No
Motion	Durations over 300ms for UI feedback	No
Motion	Animation as scroll decoration	No
Motion	No prefers-reduced-motion fallback	No
Engineering	Div soup instead of semantic HTML	No
Engineering	Missing ARIA and keyboard support	No
Engineering	Hardcoded color literals in components	No
Engineering	Client components for static content	No

If any row is "Yes," rewrite until it is "No."

Common failure modes

Failure	Fix
Skipping the scan because "it looks fine"	The scan is the gate. Looking is not scanning. Walk every row.
Keeping one antipattern because "it is just one"	One tell announces AI generation. Zero is the bar.
Rewriting the pattern but introducing a new one	Re-scan after every rewrite. The codex is iterative.
Using em dashes in the rewrite	The rewrite must also pass the codex. No em dashes in your prose.
Keeping hardcoded colors in "good" code	All values are tokens. No raw hex in components.

Red flags: stop and rewrite

• Your draft contains a purple-to-blue gradient. Rewrite with a considered brand color.
• Your hero is centered with an eyebrow, headline, subhead, and two CTAs. Rewrite with asymmetry or a real artifact.
• Your draft has three identical cards. Rewrite with hierarchy or a narrative.
• Your copy contains "seamlessly," "leverage," or any banned phrase. Rewrite with a specific claim.
• Your code has rounded-2xl on every element. Rewrite with a radius scale.
• Your animation has no reduced-motion fallback. Add one or cut the animation.

Definition of done for this skill

• Every category (2.1 through 2.5) has been walked.
• The quick-scan table has zero "Yes" rows.
• No em dashes in any prose you originated.
• No banned phrases in any copy you originated.
• No hardcoded color literals in any code you wrote.
• Every rewrite was re-scanned for new antipatterns.

See also

• design-mastery, the orchestrator that gates every output through this codex.
• designer-identity, the stance that refuses these patterns by default.
• ship-validation, the 15-item checklist that enforces this codex at the gate.
• worked-examples, five before/after references that show these patterns rewritten.