AI Design Slop: 15 Patterns That Out Your App as Vibe-Coded

The visual fingerprint of a Claude-generated landing page

If you have been browsing Show HN for the past six months you have felt this without being able to name it. The pages look fine. They are coherent. They are polished. And they all somehow look like the same page.

Adrian Krebs gave the feeling a name and a measurement. His Scoring Show HN submissions for AI design patterns sits near the top of HN tonight at 277 points and 205 comments. He ran 500 of the latest Show HN landing pages through Playwright, scored each one against fifteen DOM and CSS patterns that designers he talked to described as tells, and binned the results.

The numbers:

• 21% of pages were heavy slop, triggering five or more of the fifteen patterns.
• 46% were mild, triggering two to four patterns.
• 33% were clean, zero or one pattern.

Two-thirds of what you see on Show HN right now has a visual fingerprint that says "generated by a chat interface without an opinion." That is a lot. It is also why the Show HN stream has started to feel samey. The generator is the same. The defaults leak through.

The 15 patterns

Krebs grouped the tells into four buckets. This is the full list, because if you are shipping with Claude Code or Cursor right now, this is the checklist you should be running your own landing page against.

Fonts

1. Inter used for everything, especially the centered hero headline
2. Space Grotesk, Instrument Serif, or Geist Serif italic used as the accent font for one hero word in an otherwise-Inter page

Inter is a wonderful typeface. It has also become the Helvetica of the LLM era. Every generated landing page defaults to it unless you specifically ask for something else. If you want to stand out, start by not using Inter.

Colors

3. "VibeCode Purple" - a specific shade of lavender-purple that leaks out of most image generation and a lot of text-to-landing-page prompts
4. Permanent dark mode with medium-grey body text and all-caps section labels
5. Barely-passing body-text contrast in dark themes
6. Gradients everywhere
7. Large colored glows and colored box-shadows

Dark mode with purple accents is the default aesthetic the LLMs reach for when you do not specify one. It feels "modern" in a way that is so universal it has become invisible. The contrast issue is the biggest functional problem - generated dark themes routinely ship body text that fails WCAG AA.

Layout quirks

8. Centered hero set in a generic sans
9. Badge positioned right above the hero H1
10. Colored borders on cards, usually on the top or left edge
11. Identical feature cards with an icon on top
12. Numbered "1, 2, 3" step sequences
13. Stat banner rows
14. Sidebar or nav with emoji icons
15. All-caps headings and section labels

The colored-left-border card is the most specific tell in the list. A designer Krebs quoted said "colored left borders are almost as reliable a sign of AI-generated design as em-dashes for text." Once you notice it you cannot stop noticing it.

CSS patterns

The two dominant CSS fingerprints are shadcn/ui defaults and glassmorphism. shadcn in particular is a library that is explicitly designed to be copy-pasted by AI agents, which means every AI-generated landing page without stylistic intervention converges on the shadcn visual. Glassmorphism is the frosted-glass card treatment that had a moment in 2022 and has been the LLM default ever since.

The method is worth stealing

The part of Krebs' write-up I want to highlight is the scoring method. It is cheap, reproducible, and something you could run against your own site this afternoon.

• Playwright loads each page in a headless browser.
• A small in-page script walks the DOM and reads computed styles.
• Every pattern is a deterministic CSS or DOM check. No LLM judge looking at screenshots.

The last point is important. Letting an LLM grade AI slop by eye would introduce the exact bias you are trying to measure. Deterministic checks against computed styles take the LLM out of the scoring loop. Krebs reports 5-10 percent false positives on manual QA, which is tolerable for bucketing.

If you want to adapt this for your own internal use, the checklist is small enough to implement in a few hours. Write fifteen functions that each answer "does this page trigger this pattern." Run them against your homepage, your pricing page, your docs. Bucket the result. Decide where you want to be. The AI coding tools pricing cluster is a good example because comparison pages need both clarity and restraint.

Why it matters when you are shipping

A few counter-arguments to head off before they come up.

"But my landing page works." Yes. That is Krebs' read too. He explicitly says AI design slop is not bad, just uninspired. Validating a business was never about fancy design. The pre-LLM equivalent was everyone using Bootstrap. The practical failure mode is not that slop pages do not convert, it is that they stop standing out in a sea of identical slop pages. Differentiation gets more expensive, not less, as the defaults improve.

"I care about shipping, not design." Then ship ugly on purpose rather than ship slop by accident. An ugly page with a clear point of view is more memorable than a generic page with no point of view. If you are resource-constrained, the cheapest way to stand out is to pick a single strong opinion (a loud color, a bold type choice, an uncommon layout) and commit to it. A slop page is the expensive option, because it uses up design budget without giving you distinctive assets at the end.

"This is just taste-gatekeeping." It is and it isn't. The patterns on Krebs' list are measurable. They are the output of a generator with known biases. Noticing them and making deliberate choices against them is not gatekeeping, it is taste calibration in an era where the default aesthetic is being mass-produced. You can still choose shadcn and a purple accent. Just do it because you want to, not because that is what the model gave you.

What the clean 33% are doing

Krebs does not go deep on what separates the clean third from the slop-heavy fifth, but the pattern is consistent across sites I have audited with the same checklist. Clean sites do three things.

They pick a color palette that is not the LLM default. Warm earth tones, or high-contrast black-and-a-single-bright, or a Gumroad-ish cream-and-pink, or a Stripe-ish grey-and-blue. Anything with a point of view. Explicitly not the default lavender.

They pick a type system that is not Inter. Geist, Haas Grotesk, Untitled Sans, Söhne, Inktrap, Migra, anything else. Pair it with a body font that is not also Inter. The contrast wakes the page up.

They use one strong layout primitive and repeat it. Not seven feature cards with seven different icon treatments. Not three stat banners and four step sequences and a sidebar with emojis. One primitive, repeated until it becomes the site's visual signature. This is the single highest-leverage discipline on the list.

The tool you can build this weekend

Krebs teased a potential open source of the scoring code and said "let me know if there is interest." This is worth asking for. A small CLI that runs a Playwright scoring pass over any URL and returns a slop score is a useful piece of infrastructure. It belongs next to Lighthouse in the pre-launch checklist.

If he ships it, great. If he does not, it is a weekend project for someone else to build. The primitives exist. The scoring rubric is public. The market is every single developer who just shipped a landing page this week with Cursor and is wondering if the reason their launch tweet fell flat is that they accidentally shipped slop.

Put differently: you can now measure the visual output of your AI stack against a fifteen-item checklist. The measurement is cheap. The fix is mostly just making deliberate choices. That is a better loop than hoping your design instincts have survived a year of chat-interface defaults.

Read the original

The full essay with screenshots is at adriankrebs.ch/blog/design-slop. It takes ten minutes and it will permanently change how you read a Show HN stream.

FAQ

What is AI design slop?

AI design slop refers to the visual patterns and aesthetic choices that AI tools like Claude, Cursor, and v0 default to when generating landing pages and web interfaces. These patterns are not bad individually, but they have become so common that they create a samey, uninspired look across AI-generated sites. The term comes from "vibe coding" culture where developers ship quickly without strong design opinions, letting the AI defaults leak through.

How do I know if my landing page has AI design slop?

Run your page against the 15-pattern checklist: Inter font everywhere, Space Grotesk or Geist Serif italics for accent words, lavender-purple accents, dark mode with low-contrast body text, gradients and glows, centered hero with badge above the H1, colored left borders on cards, identical feature cards with icons, numbered step sequences, stat banners, sidebar with emoji icons, and all-caps section labels. If you trigger five or more patterns, your page is in the heavy slop category.

Is AI design slop actually bad for conversions?

Not necessarily. Adrian Krebs' research explicitly notes that slop pages are not bad, just uninspired. They can still convert fine. The problem is differentiation - when two-thirds of Show HN pages look identical, standing out becomes harder. The practical failure mode is not that slop pages do not work, it is that they no longer create memorable brand impressions in a sea of similar pages.

How do I avoid AI design slop when using Claude Code or Cursor?

Make three deliberate choices before generating: pick a color palette that is not the default lavender (try earth tones, cream-and-pink, or high-contrast black-and-bright), use a typeface that is not Inter (Geist, Söhne, Untitled Sans), and commit to one strong layout primitive repeated throughout rather than multiple card styles and section types. Feed these constraints to your AI tool in your system prompt or CLAUDE.md file.

What fonts should I use instead of Inter?

For sans-serif alternatives that signal intentionality: Geist, Haas Grotesk, Untitled Sans, Söhne, or Inktrap. For serif options: Tiempos, GT Sectra, or Freight Text. The goal is not to avoid Inter because it is bad - it is an excellent typeface - but to make a deliberate choice rather than accepting the default. Pair your headline font with a distinct body font for additional differentiation.

What is the "colored left border" AI design pattern?

The colored left border card is one of the most reliable AI design tells. It appears as a card or blockquote with a 3-4px colored stripe on the left edge, usually in purple, blue, or a gradient. Designers have described it as "almost as reliable a sign of AI-generated design as em-dashes are for AI-generated text." Once you notice it, you will see it on nearly every AI-generated landing page.

Can I use shadcn/ui without creating AI design slop?

Yes, but it requires intentional customization. shadcn is explicitly designed to be copy-pasted by AI agents, which is why the library's defaults show up in so much AI-generated output. To avoid the samey look: customize the color tokens, adjust the border radius values, modify the shadow depths, and pick non-default variants for components. The library is meant to be a starting point for customization, not a finished design system.

How do I measure AI design slop programmatically?

Use Playwright to load your page in a headless browser, run in-page scripts that walk the DOM and read computed styles, and check against the 15 patterns with deterministic CSS and DOM queries. No LLM judge needed - that would introduce the bias you are trying to measure. Adrian Krebs reports 5-10% false positives with this method, which is acceptable for bucketing scores into clean, mild, or heavy slop categories.

Further reading

• Zed's Parallel Agents: The Editor Catches Up
• Over-Editing: Why Your AI Agent Rewrites What Isn't Broken
• Best AI Coding Tools in 2026

Related apps

• Subagent Studio - Visual designer for Claude Code subagent definitions. Build, test, and export configs.
• Agent Hub - One control panel for Claude Code, Codex, Gemini, Cursor, and 10+ AI coding harnesses. Desktop app for Mac.

Related

• Subscribe to DevDigest on YouTube for hands-on walkthroughs