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

Inter used for everything, especially the centered hero headline
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

"VibeCode Purple" - a specific shade of lavender-purple that leaks out of most image generation and a lot of text-to-landing-page prompts
Permanent dark mode with medium-grey body text and all-caps section labels
Barely-passing body-text contrast in dark themes
Gradients everywhere
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

Centered hero set in a generic sans
Badge positioned right above the hero H1
Colored borders on cards, usually on the top or left edge
Identical feature cards with an icon on top
Numbered "1, 2, 3" step sequences
Stat banner rows
Sidebar or nav with emoji icons
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.

Get the weekly deep dive

Tutorials on Claude Code, AI agents, and dev tools - delivered free every week.

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.

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.