Why AI websites all look the same, and how yours won't

Once you've seen a few websites an AI agent built without guidance, you recognize the pattern: a purple-to-blue gradient up top, a big centered headline, three cards with icons, four numbered steps, all with the same rounded corners. It isn't ugly, but it's interchangeable. This guide shows where it comes from and how to avoid it.

Where the AI look comes from

An agent without guidance reaches for the most likely result. That's the average of countless templates and sample pages: the framework's default font, the default corner radius, the usual sections in the usual order. The less you say, the more average you get.

How to spot it

• Gradients as decoration, especially purple and blue, plus glow effects and gradient-colored text
• the same rounded corner on everything, from buttons to images
• every section built the same way: headline centered, three or four cards below
• fonts that look like the system default
• emoji or 3D icons instead of real images
• animations that fade things in everywhere without showing anything

What helps

Give it an idea, not a style. "Modern and clean" leads to the average. Better is one sentence that describes your site: "Like a workshop portfolio: big photos, short text, lots of white space."

Bring your branding. Colors, fonts and a logo you already have beat any rule. If you don't have any, have your agent suggest a font pairing and a few colors first, before it builds.

One font pairing, chosen on purpose. One font for headings, one for body text. Tell your agent not to use the framework's default font.

Few colors, used consistently. One base color, one accent color, and muted rather than pure tones. No gradients as decoration.

One shape for corners. Square, slightly rounded or round, but the same across the whole project.

Build sections differently. Not every part needs cards. Sometimes a big image, sometimes a list, sometimes a quote.

Mobile first. Most visitors come on their phone. Large tap targets, nothing that only appears when you hover with a mouse.

Motion only with intent. An animation that shows something is good. Anyone who has set reduced motion on their system gets none.

Real images. Your workshop, your team, your work make more of an impression than any stock photo.

A prompt to copy

Built into VORREN

Since version 9 of the guidelines, every agent that builds with VORREN gets these rules. The starter templates follow them, and with the Seite gestalten briefing (design) your agent goes through them in detail. More in the update Guidelines version 9 (in German).