How do I make my website look less AI-generated?

The tells

A site looks AI-generated when every decision is the default one. Each of these is fine alone; together they read as “nobody chose this”.

• Colour: a purple-to-blue gradient, or a dark background with a neon accent, glowing for no reason.
• Layout: a centred headline, two buttons, then three cards with icons, then three more.
• Shape and space: the same radius on everything, the same gap between everything, cards inside cards.
• Icons: emoji as icons, or a generic icon set doing the work a photograph should.
• Type: one default sans everywhere, at sizes that don't come from any scale.
• Copy: “Elevate your workflow”, “seamless”, “unlock”, “in today's fast-paced world”, three adjectives where one fact would do.

The fix, pass by pass

Don't rewrite the site. Rewrites lose what was working and introduce new defaults. Go through it in passes, each with one concern, in this order (the cheap, high-impact ones first):

1. SpacingOne scale. Generous where a section needs room, tight where things belong together.
2. ColourA ground, an ink and at most one accent, chosen for the business. Gradients out unless they mean something.
3. IconsEmoji out. Real photographs, a real mark, or plain words.
4. CopyTheir words, specific and short. One fact beats three adjectives.
5. TypeOne pairing, on a real scale, with a display size that has some nerve.
6. LayoutAt least one section that isn't a centred stack: an asymmetric split, a full-bleed photograph, a list instead of cards.
7. DetailsContrast, focus states, phone width, no sideways scroll.
8. MotionFewer, calmer movements, each one with a reason.

Deslopify with Sonder

Sonder, the website MCP for designers, has a deslopify step that works on any website or project. It starts with a triage from a slop report of the page as it renders:

• Heavy slop (the tells of a generated page) on a public website: Sonder reads the whole site, keeps its words, pages, photographs and brand colours and type, redesigns it in the look that fits, checks it, and gives you a before and after with the slop score of each.
• Your own project (a codebase in Claude Code or Cursor, or a localhost address): no rewrite. Sonder returns each finding with where it is and the fix, an ordered pass plan (spacing, colour, icons, copy, type, layout, details, visuals, motion) with values from the best-fitting look, and a few library pieces to add. Your agent edits your code in place, pass by pass, then runs it again to see the score before beside the score after.
• Light or no slop: a designed site with craft to fix gets refinements; a site without slop is told so plainly, with at most three small suggestions.

Use Sonder to deslopify this project.

What it doesn't do: it doesn't decide your brand for you, and it won't change words you've written unless you ask. It finds what reads as default, and gives your agent the values to replace it.

Questions