Make your AI-built website look less AI

Sites built with Lovable, Bolt, v0, Claude Code or Cursor tend to arrive with the same look: a purple-to-indigo gradient, Inter in one weight, everything centered, three rounded cards with emoji, and a fade-up on every section. None of it is broken. It reads as AI because it is the default, and because nothing on the page could only belong to you. Below are 12 fixes, each with the default and a better version, and the file that makes your AI keep them.

Short answer: give the AI decisions instead of adjectives. Pick 4 to 6 colors with one accent, one or two typefaces chosen on purpose, two corner radii, and left-aligned text. Replace generic copy and icons with things only your business has: real photos, prices, opening hours, names. Write those rules into a file your tool reads on every edit (project knowledge in Lovable, CLAUDE.md or AGENTS.md, a Cursor rule), then check the result with a detector.

Last updated: 1 October 2026. Every tool, command and link on this page was opened or run on that date.

Illustration. Kade Bakery is made up. Left: the kind of page a one-line prompt like "a homepage for a bakery" tends to produce. Right: the same business after the fixes below: left-aligned, one accent color, a serif headline, real prices and opening hours where the feature cards were, and its own domain.

What makes a site look AI-made

This list is not our opinion alone. Anthropic's own frontend-design skill describes the traits AI-generated design clusters around, and Impeccable turns many of them into detector rules. The ones you see most on vibe-coded sites:

• Purple or violet gradients as the background or the accent.
• Inter, or another default sans, for everything, often in one weight.
• Every block centered, every section the same height and padding.
• The template order: hero, logo strip, three feature cards, testimonials, pricing, call to action.
• Identical rounded cards with the same soft grey shadow, and one border radius on everything.
• Gradient text, or one word of the headline in a different color.
• A tracked-out ALL-CAPS label above every heading, 01 / 02 / 03 on content that is not a sequence, and an arrow on every button.
• Emoji or a rounded icon tile standing in for pictures.
• Copy that would fit any company: "elevate", "cutting-edge", "seamless".
• A fade-and-slide-up on every section as you scroll.

Any one of these is fine when you chose it. A page with six of them reads as a first draft.

12 fixes, before and after

1. One accent color, no purple gradient

Indigo and violet are what a model reaches for when nobody gave it a color. Take a palette from your subject instead: a bakery's crust, a climbing gym's chalk and rope, a law firm's navy. Write it down as named hex values so the AI cannot drift back.

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
}
.btn { background: #7c3aed; }

:root {
  --ink: #1d1b16;
  --paper: #ffffff;
  --accent: #6b3f14; /* the only accent */
  --line: #e7e3da;
  --muted: #4a463e;
}
.hero { background: var(--paper); color: var(--ink); }
.btn  { background: var(--accent); color: #fff; }

Keep the accent for the one thing you want clicked. When everything is colored, nothing stands out.

2. Choose the typeface on purpose

Inter is a good font. It is also the font of a great many starter templates and generated sites, so on its own it says nothing about you. Anthropic's skill asks for one or two families, clearly different if two, with a real type scale and lines under about 80 characters. A serif for headings and a plain sans for body text is an easy start.

body { font-family: Inter, sans-serif; }
h1, h2, h3, p { font-weight: 600; }

h1, h2 {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 600;
}
body { font: 400 17px/1.55 system-ui, sans-serif; }
h1 { font-size: 2.5rem; line-height: 1.1; }
h2 { font-size: 1.6rem; }
p  { max-width: 65ch; }

If you pick a web font, host the files yourself next to the site so the page does not wait on another server.

3. Stop centering everything

Centered text gets hard to read after two lines, and a page where every block is centered gives the eye no edge to follow. Left-align body text and most headings. Center only a short block with one message, like the final call to action.

section { text-align: center; }

section { text-align: left; max-width: 68rem; }
.final-cta { text-align: center; }

4. Break the template order and move proof up

Hero, logos, three features, testimonials, pricing, call to action is the order a model reaches for whatever the business is. Ask what a visitor needs to decide, and put that near the top: the product itself, a screenshot of the app working, the menu with prices, the opening hours, the area you serve. Cut sections that do not help that decision.

5. Write copy only you could write

Cover your logo and read the headline. If a competitor could use it unchanged, rewrite it. Name the thing, the place, the price, the time.

6. Drop gradient text and the one colored word

A gradient-filled heading and a single word in the accent color are on both Anthropic's and Impeccable's lists of tells. Let size and weight carry the headline. It fixes a contrast problem too: gradient text is often hard to read along part of its length.

h1 span {
  background: linear-gradient(90deg, #a855f7, #3b82f6);
  -webkit-background-clip: text;
  color: transparent;
}

h1 {
  color: var(--ink);
  font-size: 2.5rem;
}
/* no span, no gradient */

7. Two corner radii, not 24px on everything

Generated pages often put one large radius on cards, buttons, images and inputs alike. Pick two values, small for controls and a little larger for containers. Keep an inner radius smaller than the outer one so the curves line up. Vercel's Web Interface Guidelines call this nested radii.

.card, .btn, img, input {
  border-radius: 24px;
}

:root { --r-sm: 6px; --r-md: 12px; }
.btn, input { border-radius: var(--r-sm); }
.card { border-radius: var(--r-md); padding: 6px; }
.card img { border-radius: var(--r-sm); }

8. Borders and real shadows instead of one soft grey

The default is one shadow, 0 4px 6px rgba(0,0,0,.1), under every card. On a light page a 1px border often does the job alone. When something should float, layer a tight shadow with a wide soft one, as Vercel's guidelines suggest, and tint it toward your palette.

.card {
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

.card { border: 1px solid var(--line); }
.popover {
  box-shadow: 0 1px 2px rgba(29,27,22,.08),
              0 8px 24px rgba(29,27,22,.06);
}

9. Real pictures, and fewer icons

Emoji in headings, a rounded icon tile above every feature and abstract gradient blobs fill space without telling anyone anything. One photo of your actual product, shop or team does more than six icons. If you use icons, use one set at one stroke weight, only where they help someone scan. Give every image a width, a height and real alt text so the page does not jump while it loads.

<h3>🚀 Fast delivery</h3>

<img src="/img/todays-bread.webp"
     width="800" height="600"
     alt="Rye and seeded loaves on the shop counter">
<h3>Delivered before 8:00</h3>

10. Cut the template chrome

Three small habits give a page away: a tracked-out ALL-CAPS label above every heading, numbered markers on things that are not steps, and an arrow added to every link and button. Keep a label only when it carries information, keep numbers for real sequences, and let the button say what happens when you press it.

<p class="eyebrow">WHY CHOOSE US</p>
<h2>Features</h2>
<a class="btn">Get started →</a>

<h2>Order by 21:00, pick up from 7:00</h2>
<a class="btn" href="/order">Order for tomorrow</a>

11. One moment of motion, not a fade on every section

Anthropic's skill calls fade-and-slide-up entrances on each section the generic default. Emil Kowalski's Agents with Taste lists the rules agents tend to miss: ease-out for things that enter, interface animation under 300ms, start a scale at 0.95 instead of 0, and a small press effect on buttons. Animate what responds to the visitor, and respect reduced motion.

section {
  animation: fadeUp 0.8s ease-in both;
}

.btn:active { transform: scale(0.97); }
.menu { transition: transform 200ms ease-out,
                    opacity 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

12. Finish the details people notice when they are missing

• A page title and description written for this page, not the template's Vite + React.
• A favicon and a share image, so a link in WhatsApp or Slack shows your name and a picture.
• A visible focus ring for keyboard users, and tap targets of at least 44px on phones.
• Body text of 16px or more, with a contrast of at least 4.5:1.
• A real 404 page, and footer links that go somewhere.
• Your own domain. An address like yourproject.lovable.app tells visitors the site is still a project.

Make your AI keep the decisions

A fix you prompt once is gone three prompts later. Put the rules where your tool reads them on every request.

A starting file. Change the values to yours; the point is that every line is a decision the AI can check, not an adjective like "modern" or "clean".

# Design rules (read before any UI change)

Palette, use only these:
  ink #1d1b16, paper #ffffff, accent #6b3f14, line #e7e3da, muted #4a463e
  The accent is for the main action only. No gradients. No purple.

Type:
  Headings: "Iowan Old Style", Palatino, Georgia, serif, weight 600
  Body: system-ui, 17px, lines under 70 characters
  Sizes: 40 / 26 / 20 / 17 px

Shape:
  Radius 6px on controls, 12px on containers. Nothing else.
  Borders 1px #e7e3da. Shadows only on things that float.

Layout:
  Left-align text. Center only the final call to action.
  Put the menu with prices and the opening hours near the top.

Never:
  gradient text, emoji as icons, ALL-CAPS labels above headings,
  01 / 02 / 03 on things that are not steps, arrows on every button,
  a fade-in on every section, "elevate", "seamless", "cutting-edge".

Motion:
  Only in response to the visitor. ease-out, under 300ms.
  Respect prefers-reduced-motion.

The redesign prompt

Screenshots help more than words. Attach one or two sites you like and say which part to take from each: the type, the spacing, the way the menu sits. A design skill gives the AI more of this judgment up front; the ones worth installing are in design skills for Claude Code, Cursor and Codex.

Check your site for AI tells

Impeccable's command line tool runs its detector rules without an AI model or an API key. Point it at a file, a folder or a live address:

npx impeccable detect index.html
npx impeccable detect https://yourname.com

We ran it (version 4.1.0) on a test page with a purple gradient, Inter, gradient text, emoji cards and buzzword copy. It reported 7 issues: the purple palette, Inter, the gradient text twice, the buzzwords, and low contrast on the purple background twice. It did not flag the emoji. The package asks for Node 22.18 or newer. For a review against accessibility and interface rules, have your agent run Vercel's web-design-guidelines skill.

When it looks right, put it on your own name

A redesign is a good moment to move off the builder's address. On DropTheHassle you publish the built folder (the dist folder after npm run build, or any folder with an index.html) and get a free yourname.dropthehassle.app link on HTTPS, with no account and no card. Claim it within 7 days and it stays. A .com bought there is EUR 19 a year including VAT in the EU, or USD 19 elsewhere, the same every year, and it needs no DNS edit. Email at the same name is optional.

Your AI can publish it for you through the MCP server. It can never spend your money. Steps per tool: Lovable, Claude Code, Cursor, Bolt, or any HTML file or zip.

Publish your site for free

Questions

Why do AI-built websites all look the same?

Without specific rules, a model falls back to the patterns that dominate the templates it learned from: purple gradients, Inter, centered heroes and three rounded feature cards. Every vague prompt lands on the same defaults.

How do I make my Lovable site look less AI?

Put your palette, fonts, corner radii and a list of things to avoid in Project settings, Knowledge, or in an AGENTS.md at the root of the repository. Then ask for a styling-only redesign, one section at a time, with screenshots of sites you like as reference.

Is it bad to use Inter?

No. Inter is well made and easy to read. It reads as a default because so many generated sites use it. If you keep it, make the rest of the page specific: your colors, your photos, your copy.

What prompt makes a website look less AI?

Replace adjectives with decisions. Name the colors as hex values, the typefaces, two corner radii, the alignment and a list of things to avoid, then say: change only styling and layout, do not change text or functionality.

Can a tool check my site for AI design tells?

Yes. npx impeccable detect runs Impeccable's detector rules on a file, a folder or a live address without an AI model. It flags things like purple palettes, gradient text, overused fonts and low contrast.

Does my own domain make the site look more professional?

It removes one more sign of a draft. A builder address like yourproject.lovable.app says the site is still a project. On DropTheHassle a .com is EUR 19 a year including VAT in the EU, or USD 19 elsewhere, the same every year, with no DNS edit.

Related

• Design skills for Claude Code, Cursor and Codex
• Put your Lovable app on your own domain, step by step
• Put your Claude Code website online, then on your own domain
• Made a website with ChatGPT or Claude? Put it online