How to make an AI-generated website look professionally designed

1. Write a brief before you prompt

A one-sentence brief beats a long prompt full of “don'ts”. Before you generate anything, write down four things:

The subject. Not “a business” but “a two-chair barbershop on Leith Walk that takes walk-ins before 11am”.
The single job of the page. Book a slot, buy a product, join a waitlist. One primary action.
One detail only this subject has. The wood-fired oven, the hand-thrown glaze, the three resident artists. Build the page around it.
A reference. One site you admire, and what specifically you admire about it: the type, the spacing, the photography.

2. Pick one type family and a scale

Use one family. Make hierarchy with size and weight, not with a second font.
Define a short scale, for example five sizes from captions to the hero headline, and use only those sizes.
Set body text at 16px or larger, with line-height around 1.5 and lines of roughly 60 to 75 characters.
Tighten letter-spacing slightly on large headlines and leave body text at its default.

3. Use one action colour

Build the palette from tones: a ground, a surface, a line colour, text and muted text.
Choose one action colour for buttons and links, taken from the subject rather than from a gradient generator.
Check text contrast. WCAG 2.2 level AA asks for at least 4.5:1 for body text and 3:1 for large text.
Design dark and light themes from the same tokens rather than inverting colours at the end.

4. Let content shape the layout

Size the hero to its content. Let a price, a time or a product appear without scrolling.
Left-align paragraphs. Centre only short headlines and single lines.
Vary sections by what they hold: a price list is a list, a team is a row of names, opening hours are a small table.
Use one spacing scale (for example 4, 8, 12, 16, 24, 32, 48, 72) and nothing in between.

5. Give shape and depth a role

Assign radius by component type: controls, cards, panels and images each get their own value, used consistently.
Prefer hairline borders and tone changes to drop shadows for separating content.
Keep hover effects for things that respond to a click.

6. Make motion deliberate

Replace the default ease curve with one or two custom curves and reuse them.
Keep interface feedback quick, around 150 to 250 milliseconds, and keep larger reveals under about 700 milliseconds.
Turn non-essential motion off when the visitor has prefers-reduced-motion set.

7. Rewrite the copy line by line

Read each sentence and ask whether a competitor could use it unchanged. If they could, replace it with a fact: a price, a duration, a place, a name, a number of years. Remove the stock phrases listed in why so many AI websites look the same, and make every button say what happens next, such as “Book a cut” instead of “Get started”.

8. Use real images, described properly

Use photographs of the real place, product or people wherever you can. Generic stock and generated images undo the work above.
Give every image a text alternative that says what it shows, and leave purely decorative images with an empty alt.
Serve images at the size they're shown, in a modern format, with width and height set so the layout doesn't jump while they load.

9. Make it work for everyone

Every form field has a visible label, a type and a sensible maximum length.
Every control can be reached and used with a keyboard, and focus is always visible.
Touch targets are at least 44 by 44 pixels on phones.
The page has one h1, and headings follow in order without skipping levels.

The most common gaps, and a 15-minute test for them, are in making an AI-generated website accessible.

10. Review at two widths before you ship

Open the page at a phone width of about 375 pixels and a desktop width of about 1280 pixels, and look at it as a customer would. Check that the primary action is visible early at both sizes, that nothing overflows sideways and that the type scale still reads as a hierarchy on the small screen. Then run the AI website security checklist on the final HTML.