Source: skill files (frontend-design, taste-skill, soft-skill, ui-ux-pro-max, critique, audit)
A consolidated reference of every banned pattern across all 23 design skills, with the specific alternative to use instead. AI-generated UI has recognizable fingerprints — predictable color choices, default fonts, symmetrical layouts, and decorative patterns that real designers do not use. This guide is the antidote. Pin it. Reference it before every UI review.
Visual and Color
Banned Pattern Why It Fails Do This Instead Purple-to-blue gradients The #1 AI aesthetic fingerprint Intentional palettes from ui-ux-pro-max database Cyan on dark backgrounds Instantly reads as “AI dashboard” Tinted neutrals with a single warm or cool accent Neon glows / neon accents Cheap sci-fi aesthetic, overused by AI Subtle accent colors at full opacity --- no glow Pure black (#000) Harsh, unnatural on screens Tinted near-black (#0a0a0a, 1a1a1a with warm/cool cast) Pure white (#fff) Flat, sterile feel Tinted near-white (#fafaf9, f8f8ff ) Gray on colored backgrounds Creates visual mud Use a shade of the background color (color-mix or oklch) Gradient text The most recognizable AI decorative choice Weight and size hierarchy for emphasis Dark mode with glowing accents as default This is the AI default --- not a deliberate choice Choose light or dark intentionally based on product context Glassmorphism everywhere AI uses glass as a default surface Reserve glass for one or two accent elements max
Typography
Banned Pattern Why It Fails Do This Instead Inter Default of defaults --- signals zero design thought Geist (technical), Outfit (friendly), Satoshi (modern) Roboto Google’s default, ubiquitous in AI output Cabinet Grotesk (editorial), Plus Jakarta Sans (clean) Arial / Open Sans System fallbacks, not design choices Any intentional font from the ui-ux-pro-max 57 pairings System defaults ”I did not think about fonts” Every project deserves a deliberate font choice Monospace as aesthetic shorthand Lazy “dev tool” signaling Use monospace only for actual code display All-caps subheaders everywhere A single trick repeated becomes monotonous Weight contrast, size contrast, color contrast Identical text sizes across levels No hierarchy, everything looks the same Modular type scale with clamp() fluid sizing
Layout
Banned Pattern Why It Fails Do This Instead Three equal-width cards in a row The single most common AI layout Asymmetric bento grid, masonry, or varied widths Hero metric template (big number + label + trend) Every AI dashboard starts with this Unique data presentations --- inline stats, contextual numbers, data narratives Everything centered Reads as timid, lacking confidence Left-aligned content with asymmetric negative space Cards wrapping everything Cards should group related info, not be universal containers Mix full-bleed sections, offset panels, inline content Nested cards (card inside card) Unnecessary visual depth Flatten hierarchy --- use spacing and borders Edge-to-edge navbar Generic, no personality Floating navbar with top-4 left-4 right-4 spacing Identical hero section Big heading + subtext + CTA + stock image Asymmetric split, offset media, integrated demo, editorial layout 4-column footer with newsletter Every AI-generated marketing page Focused footer with only what users actually need
Motion
Banned Pattern Why It Fails Do This Instead Bounce / elastic easing Looks playful in isolation, cheap in production ease-out-quart / ease-out-quint / ease-out-expoLayout property animation (width, height, top, left) Triggers layout recalculation, causes jank transform and opacity only (GPU-composited)Linear / ease-in-out as defaults Feels mechanical, lifeless Exponential easing curves feel natural Instant state changes (no transition) Jarring, feels broken 150-300ms for micro-interactions, 500-800ms for entrances Animation for decoration Distracting, adds no information Every animation must communicate state change or draw attention h-screen for full viewportBreaks on mobile (address bar), causes layout shifts min-h-[100dvh] for dynamic viewport height
Content and Placeholder Data
Banned Pattern Why It Fails Do This Instead John Doe / Jane Smith Instantly signals placeholder Real-sounding names: “Sarah Chen,” “Marcus Rivera” 99.99% / 10x / 500% improvement Unrealistic, no one believes these Realistic numbers: “23% faster,” “4.2 rating,” “$847/mo saved" "Elevate” / “Seamless” / “Unleash” / “Supercharge” AI copywriting cliches Specific value propositions tied to the actual product Lorem Ipsum Screams “not finished” Write real copy --- even rough copy beats placeholder Title Case On Everything AI defaults to title case for headings Sentence case for most headings, title case sparingly ”Getting Started is Easy” + 3-step process Every AI landing page has this Show the actual product experience, not a meta-description of it
Components
Banned Pattern Why It Fails Do This Instead Generic card with icon + title + description The AI default component Varied containers: inline stats, list items, media cards, data rows Pill badges on everything Overused, adds visual noise Subtle indicators: color dots, weight changes, position-based hierarchy Sun/moon dark mode toggle Unnecessary UI --- respect system preference Use prefers-color-scheme by default. Add manual toggle only if needed, with a less generic icon. Modal for everything Interrupts flow, annoying on mobile Inline expansion, slide-over sheets, bottom sheets, dropdown panels Identical testimonial cards in a row See “three equal-width cards” Staggered layouts, pull quotes, inline social proof Progress bars with rounded ends and gradients AI-generated progress indicator signature Simple bars with square ends, or use numbers/percentages directly
Icons
Banned Pattern Why It Fails Do This Instead Emoji as UI icons Not professional, inconsistent across platforms Phosphor Light, Heroicons, or Lucide SVG icons Using Lucide exclusively Creates visual monotony Mix one or two complementary icon sets Rocket emoji/icon for “launch” AI cliche Contextual icons tied to the actual action Inconsistent stroke widths Mixing thin and thick icons looks careless Pick one icon set and stick with it throughout the project Icons without labels (icon-only buttons) Ambiguous, fails accessibility Icon + text label, or icon with tooltip at minimum
Code and Technical
Banned Pattern Why It Fails Do This Instead div soup (divs for everything)No semantics, hurts accessibility and SEO <nav>, <main>, <section>, <article>, <aside>, <header>, <footer>h-screenBreaks on mobile browsers with address bar min-h-[100dvh]Arbitrary z-index (z-[9999]) Unmaintainable, z-index wars Defined scale: z-10 (base), z-20 (dropdown), z-30 (sticky), z-50 (modal) Broken Unsplash URLs source.unsplash.com is unreliablepicsum.photos/seed/{descriptive-name}/800/600 for consistent placeholdersInline styles everywhere Unmaintainable, overrides are painful Tailwind classes or CSS custom properties !important as a fixSpecificity problem, not a solution Fix the cascade --- more specific selectors or restructure
Key Takeaways
The “AI color palette” (cyan + purple + neon on dark) is the single biggest giveaway. Eliminate it.
Font choice matters more than any other single decision. Switching from Inter to an intentional font transforms the feel.
Three equal-width cards in a row is the most common AI layout. Use asymmetry.
Content quality kills AI slop faster than visual polish. Real names, realistic numbers, specific copy.
Every banned pattern has a specific alternative --- this is not about avoiding things, it is about choosing better things.
Print this list and check it before every UI review until the patterns become instinct.
Try It
Screenshot your most recent AI-generated UI
Walk through each table in this guide and tally how many banned patterns appear
For each match, note the “Do This Instead” column
Rebuild with explicit instructions to Claude: “Use Geist font, not Inter. Use asymmetric layout, not equal cards. Use warm neutrals, not gray. Use ease-out-quart, not bounce.”
Compare the before and after --- each eliminated pattern compounds into a dramatically different result