You asked a few agencies for a new website. The mockups came back, and something felt off. A purple-to-blue gradient. A big centered headline with a button under it. Three feature cards in a row. Different agencies, same website.
That's not a coincidence. A lot of websites today start life in an AI tool, and AI tools have habits. Left alone, they take the safest path every time.
I'm Andre, the frontend developer at Jupitr. AI is part of my workday. I use it to brainstorm, fix bugs, and write reports, and on some projects I design and build with Claude Design and Claude Code. I wrote about that build workflow in From Design to Live Site. So I'm not writing this as someone who is against AI. I'm writing it as someone who sees the raw output up close, and knows where it goes generic.
The good news: generic is predictable. Once you know the patterns, you can spot them, and you can fix them.
Why do so many AI-built websites look the same?
AI design tools give you the most likely answer, not the most fitting one. Ask for "a modern website for a consulting firm" and you get something close to the average of every modern consulting website it has learned from. Average is safe. Safe is easy to forget.
The second reason is human. The first output usually looks fine. Clean, tidy, nothing broken. So it gets approved, shipped, and copied. Nobody stops to ask whether it looks like this business.
That's the real issue. The tool didn't fail. Nobody made the decisions the tool can't make on its own.
What does a generic AI website actually look like?
Most generic sites share the same handful of patterns. None of them is wrong on its own. The problem is when they show up together, chosen by default instead of on purpose.
| The pattern | Why it shows up | What I do instead |
|---|---|---|
| Purple-to-blue gradient | It reads as "tech" and "modern" for almost any brief | One primary color, one accent, and a neutral gray scale, chosen for the brand |
| Inter, Roboto, or a plain system font | They are safe and readable everywhere | A display font for headings paired with a body font that fits the brand's mood, two families at most |
| Centered headline, button underneath | It's the most common hero layout on the web | Varied grids, deliberate asymmetry, and whitespace that does a job |
| Emoji used as icons | Quick to generate, no assets needed | One consistent icon set, like Lucide or Phosphor, or custom SVG |
| Everything bold | Bold feels important, so it gets used everywhere | Hierarchy built from size, weight, color, and spacing |
| Every element fades in | Motion is easy to add and looks "premium" in isolation | Motion that follows the story of the page, and only where it helps |
| Copy like "Empower your business" | Vague phrases fit any company | Specific words about what this business actually does |
If your homepage ticks three or more of these, it probably looks like a lot of other homepages. That's fixable, and usually without starting over.
Is AI the problem, or is it how AI gets used?
It's how it gets used. AI speeds up execution. It doesn't replace the decisions that make a website belong to one brand and not another.
Here's how that plays out in my own work. Our own site, Jupitr Tech, was designed in Claude Design and developed in Claude Code with Next.js. For Bali Trekking Exploration, I designed the brand logo myself, designed the site in Claude Design, and then built it end to end in Claude Code with Next.js.
On both projects, the thinking came first, and it came from us. We brainstormed the direction, did the research, and selected the references. Then Claude Design did the heavy lifting of turning those decisions into layouts. The logo, the type, and the feel of each page were still ours to shape. We work with AI collaboratively. It isn't a case of AI doing the work while we just approve it.
AI helps us brainstorm and think better, but it can still make mistakes, and it needs guidance. That's where a technical background and design taste matter. When you know what good looks like, Claude Design becomes much easier to direct. In the end, the result depends on how well, and how efficiently, you use the tool.
What do I check before a design leaves my hands?
I keep a written standard that I check every project against, including the ones built with AI. It started as my own notes and is now a set of rules I give Claude at the start of a project. Here's a short version.
- Color with discipline. One primary, one accent, and a neutral scale. A bold palette is fine if the brand calls for it, but it still needs rules.
- Type with character. No plain Inter or Roboto by default. I pick a heading and body pairing that fits the brand's mood, editorial, playful, or premium, and stop at two font families.
- Layouts that aren't on autopilot. If every section is a centered container, something is missing. I vary the grid and use whitespace on purpose.
- Real icons. A consistent icon set or custom SVG. Never emoji on a serious product.
- Hierarchy through contrast. Size, weight, color, and spacing do the work. Making everything bold makes nothing stand out.
- Design tokens first. Colors, spacing, type scale, and corner radius get defined before any component is built. This is what keeps a 20-page site consistent.
- Accessibility as a baseline, not an extra. Text contrast of at least 4.5:1 (the WCAG AA standard), touch targets at least 44 by 44 pixels on mobile, and focus states you can actually see.
None of this is exotic. It's just the set of decisions an AI tool won't make for you unless someone asks.
When does motion help, and when does it make a site feel cheap?
A website with no movement at all can feel flat. But a website where everything moves is one of the clearest signs nobody was steering. Motion should guide the reader, not decorate the page.
These are the rules I follow:
- Tell a story with the scroll. The hero comes in first, features appear as you reach them, and the call to action lands at the end. Not everything at once.
- Keep timing short. Hover and click effects take 150 to 300 milliseconds. Elements entering the screen take 400 to 800. Anything longer feels slow.
- Ease out, never linear. Real objects slow down as they stop. Linear motion feels robotic.
- Animate the cheap properties. Moving and fading elements (transform and opacity, in developer terms) stays smooth on most phones. Animating width or position directly can make a page stutter.
- Respect people who turn motion off. Some visitors set their device to reduce motion, often because animation makes them feel unwell. The site should honor that setting.
- Use the lightest tool that works. I don't load a heavy animation library for one fade effect.
Done well, visitors don't notice the motion. They just notice the site feels good to use.
What can't AI decide for you?
Taste. AI can produce a dozen layouts in a minute. It can't tell you which one fits a trekking company in Bali versus a real estate agency in the same town. It doesn't know your customers, your history, or what you want people to feel when they land on your homepage.
Before I wrote frontend code, I worked as a freelance graphic designer. That habit stayed with me. I still look at a page the way I'd look at a poster: what does the eye hit first, what's competing for attention, what can be removed.
That's the part of the job I don't hand to AI. Choosing the typeface. Deciding how much empty space a section needs. Knowing when to cut an animation. Those small calls add up to a site that looks like it belongs to you.
AI makes building faster. The decisions are still the designer's job.
Frequently asked questions
My website was built with AI. Does that mean it's bad?
No. How a site was built matters less than whether someone made real decisions about it. A site built with AI and shaped by a designer can be just as distinctive as one built by hand.
How can I tell if my site looks generic?
Compare your homepage against the patterns table above. Then try a simple test: cover your logo and ask a friend whose website it is. If they can't guess the industry, let alone the brand, that's a sign.
Can I fix a generic site without rebuilding it?
Often, yes. Typography, color, hierarchy, and motion can usually be changed on an existing build. A full rebuild only makes sense when the structure itself is the problem.
Will animations slow my website down?
They don't have to. Short animations that move and fade elements are light on most devices. The trouble starts when a page loads a heavy library for small effects, or animates everything at once.
Does design affect how Google and AI tools see my site?
Indirectly, yes. Clean, semantic page structure and a clear heading hierarchy help search engines and AI tools understand your content. You can check the technical side with our free audit tool.
Do you use AI on client projects?
Yes, where it helps. I use AI every day for brainstorming, debugging, and reporting, and on some projects for design and build with Claude Design and Claude Code. Every design and build output is checked against the standard I described above before it goes live.
If I can only fix one thing, what should it be?
Start with typography and color. They shape the first impression more than almost anything else, and they're usually the quickest to change.
Next steps
You don't need to redesign everything this week. Start small.
- Check your homepage against the patterns table. Count how many show up. That tells you how far from generic you are.
- Run a free technical check. Our audit tool shows how your site holds up on the technical side, the part visitors don't see but search engines do.
- Look at work built with this approach. Visit Jupitr Tech and Bali Trekking Exploration to see the two sites from this post live, or browse our portfolio for more of our work.
- Talk to us if you want a second opinion. If your site feels like everyone else's and you're not sure why, get in touch with Jupitr Tech. We'll tell you what we see, honestly, even if the answer is that you only need a few changes.
