AI slop in design

40 recurring web design patterns with examples. browse them individually or explore four demonstration sites.

save pdf
in this article

a gradient, font or grid does not make a design bad on its own. consider what it explains to the visitor and why it belongs in the project.

appearance alone cannot tell you who made a site or whether they used ai. all companies, figures and testimonials in these examples are fictional.

download the sites (zip)

html, styles and instructions. open the sites from a folder without installing anything.

Patterns

The purple gradient

a familiar gradient instantly suggests a tech product. choosing it for that reason alone can erase the character of the project.

where did these colors come from, and what do they mean here?

Gradient-filled type

a gradient can highlight a sentence that says very little. we notice its coloring before its message.

does the headline communicate without the fill?

Glass over glowing blobs

a translucent card can look striking over a busy background. blur, borders and reflections can also compete with its content.

does transparency explain the layers of the interface?

A pill above the headline

a small badge announces novelty before introducing the product. often it repeats the same promise as the headline below.

does the badge add useful information?

The familiar font pairing

space grotesk and instrument serif can work well together. the same pairing across unrelated projects starts to feel like an answer chosen before the question.

do these letterforms suit the content and language?

An important word in italics

a serif italic promises a distinctive voice. if any word could take its place, the emphasis is mostly decoration.

why is this particular word emphasized?

The colored card edge

a colored edge appears to assign a category. when every edge is the same and no system exists, it adds an arbitrary signal.

what does the stripe encode besides a desire for color?

Three steps to anything

a complex process is squeezed into three equal blocks. the conditions, choices and real work may disappear in the process.

can someone follow the process from these steps?

Impressive numbers

large metrics promise scale. without a time period, method or source, they remain decoration.

can each number be verified?

An emoji on every line

rockets and sparkles quickly set a mood. when every line has one, the emphasis stops distinguishing what matters.

what changes if half the icons are removed?

A testimonial without a person

a name, a job title and an initial avatar resemble a familiar trust block. a fictional review still provides no evidence.

is there a real author and permission to publish?

A wall of borrowed trust

a logo strip implies a relationship with known companies. without context, we cannot tell whether they are clients, partners or decoration.

what is the actual relationship with each company?

A button with a vague action

get started sounds convenient but says little about what happens next. a useful button supports a specific decision.

is the result of clicking clear?

Blurry glowing orbs

blobs fill empty space and add depth. they are easy to add even when the background needs no attention.

can the background be explained through the page’s purpose?

Neon in the dark

glowing buttons look convincing in a preview. nearby gray text can become difficult to read on a real screen.

is supporting text readable without effort?

A dramatic pause in every sentence

constant dashes create the same solemn rhythm. the punctuation is fine; the problem begins when rhythm replaces a thought.

can the sentence name the action directly?

Tiles instead of hierarchy

a mosaic arranges varied content into a neat screen. arbitrary tile sizes can make primary and secondary information indistinguishable.

what justifies the size of each tile?

Every card lifts on hover

lifting provides visible feedback. when the card leads nowhere, the movement promises an interaction that does not exist.

can the element that looks clickable actually be clicked?

A ready-made premium typeface

playfair display gives large type a strong voice. repeating it for every expensive product is easier than finding a voice of its own.

what connects the typography to the product?

The highlighted important word

a colored stripe makes emphasis resemble a handwritten mark. too many marks leave the eye without a clear starting point.

is the main idea highlighted, or just a pleasing word?

The endlessly glowing border

a moving border repeatedly draws attention back to one object. first decide whether that object deserves it.

what event does this animation communicate?

Checkmarks on every benefit

a familiar checklist is easy to scan. checkmarks do not verify anything when every item is a vague promise.

can each claim be checked in practice?

The permanently live dot

a pulse usually indicates a current state. without changing data behind it, the interface is simulating activity.

what real status does the dot represent?

The cursor spotlight

a light follows the mouse and turns a card into a toy. the experience often disappears on touchscreens and keyboards.

what does someone without a mouse get?

The technical grid background

a grid suggests precision and engineering. that suggestion may have little connection to the product.

does the background need to communicate this idea?

Glow and scale on hover

the border glows, the card grows, the shadow expands. several effects at once can make neighboring items harder to compare.

would one feedback signal be enough?

The middle plan wins

a highlighted plan steers the choice in advance. people still need clear differences and a reason for the recommendation.

who exactly is this plan suitable for?

The enormous quotation mark

the quotation mark becomes the largest object in a testimonial. presentation can become more persuasive than the evidence.

what matters here: the person’s words or their presentation?

A best-seller badge in every corner

a corner label can help people navigate a catalog. if every item has one, it no longer distinguishes anything.

what rule determines the label?

The never-ending marquee

a marquee adds movement even to practical information. reading at your own pace becomes harder.

can the movement be paused to finish reading?

The obvious scroll prompt

a moving line explains a familiar action. sometimes it occupies space where useful content could already begin.

does this screen actually need that instruction?

Icon, headline, promise

three columns are easy to build and fill with generic promises. the structure repeats before the content has been understood.

why exactly three benefits, and what do they explain?

A metric over a photograph

a dark card adds a business-like message to an image. if the metric is unrelated, the two elements compete for attention.

what connects the photo to that metric?

Gold as ready-made luxury

a dark background with a warm metallic accent quickly signals luxury. the identity of the actual object can remain out of sight.

could this brand be recognized without its logo?

Social circles that float

matching circles look tidy but flatten the identity of different services. bouncing adds another effect to a small utility link.

are the services recognizable and clearly labeled?

Letter spacing to the limit

widely spaced capitals suggest a restrained premium style. a short label becomes a long strip that is harder to read.

would normal spacing make the label easier to read?

The terminal that runs nothing

a drawn code window can resemble evidence of working technology. it can be useful as an illustration when clearly labeled as one.

is it clear that this is a demonstration?

The universal blob person

an abstract figure can fit almost any service. that versatility often comes with very little information about the actual product.

does the illustration show anything specific?

The wave between sections

a curved divider adds liveliness to two ordinary blocks. sometimes the decorative boundary becomes the page’s main event.

does the shape help explain the transition between topics?

Design for your project

send your website or personal media and tell me what you want to change. we can start with the task it needs to serve.

write to me in telegram what I can help with
A grid does not make a composition good choose the arrangement to fit the content.