The prompt checklist for a beautiful website

Why do so many AI sites look alike? A purple gradient, a centred headline with a little pill badge above it, three identical feature cards, a row of testimonials. That isn't the AI being lazy. You left every design decision open, so it picked the choices it has seen most often.

The prompts below work in Claude, ChatGPT, Gemini and any other AI that writes web pages.

How to use these prompts

1. Gather the ingredients. Real copy, your logo, your photos and a site you like (next section).
2. Fill in prompt 1 and paste it with your first request. It sets the direction for everything else.
3. Use prompts 2 to 9 one at a time. Paste one, look at the result, then move on. Ask for everything at once and the AI tends to do each thing halfway.
4. Finish with prompt 10, the critique pass. Most people skip it, and it makes the biggest difference.

Words in [square brackets] are yours to replace. The numbers in the prompts are good defaults, not rules. Change them if your content needs it.

Same AI, same effort. The second one gets you a site that looks like your bakery.

What to give the AI first

The more of the real thing you hand over, the less the AI has to invent. Before your first prompt, collect these four things.

• Real copy. Your actual headline, services, prices, opening hours and contact details, even as rough notes. Made-up text hides layout problems and ends up on the live site.
• Your logo. Along with its colours. A logo gives you a brand colour for free.
• Your own photos. Ten real photos of your shop, work or team beat any stock library. Photos of the place and the people are what visitors trust.
• A reference site. One or two sites you like, with a sentence on what you like about each. "The spacing and the big photos" is more useful than a link on its own.

• Here is my real copy, my logo and my photos. Use only these. If something is missing, leave a clear gap and tell me. Don't invent it.Copy

Name the dimensions, not the vibe

"Make it feel premium" gives the AI nothing to act on. Design is a handful of separate choices. Ask about each one by name.

Add two more things. Give references: "like a printed menu", "like a film poster". And list defaults to avoid, because those are what the AI reaches for when it's unsure.

• Decide type, colour, spacing, motion and background separately and tell me each choice. Avoid purple gradients, glassy cards, a pill badge above the headline and emoji icons.Copy

Ask for options first

Changing a finished page is slower than choosing between three sketches. Ask for directions in words before any code is written.

• Give me three design directions in two lines each, then build the one I pick.Copy

Pick one, then say what to change: "Direction 2, but with the colours of direction 1." You've made the big choice in thirty seconds.

Ten principles behind the prompts

Designers carry these in their heads. Your AI knows them too. It just applies them far more reliably when you say them. Treat the numbers (five links, 44 px, 65 characters) as sensible defaults, not laws.

UX (user experience) is whether the site is easy to use: can people find what they came for and do it? UI (user interface) is how it looks and feels: type, colour, spacing, buttons. A beautiful site that's confusing still fails, so you need both.

1. One page, one job

Every page should have a single main thing you want the visitor to do: book, call, buy, sign up. Everything else supports it.

• The main action on this page is [action]. Make it the most obvious button, show it in the first screen, and repeat it at the end.Copy

2. Visual hierarchy

People scan before they read. Size, weight, colour and position tell them what matters. If everything is bold, nothing is.

• Each section has one focal point. Step down clearly from headline to subheading to body text. Only one element per screen should shout.Copy

3. Consistency

The same thing should look and behave the same everywhere: one button style for main actions, one for secondary, the same link colour, the same spacing. Inconsistency reads as mistakes.

• Put colours, font sizes, spacing and corner radius in CSS variables and reuse them. No one-off styles.Copy

4. Group related things (proximity)

Things that are close together look related. A label far from its field, or a price floating between two products, confuses people even if they can't say why.

• Keep related items tight together and put clearly more space between groups than inside them.Copy

5. Use familiar patterns

People spend most of their time on other websites, so they expect yours to work the same way: logo top left goes home, navigation at the top, contact details in the footer. Designers call this Jakob's law. Surprise people with your content, not your menus.

• Use standard patterns for navigation, forms and footers. Be creative with layout and imagery, not with how things work.Copy

6. Fewer choices, faster decisions

The more options you show, the longer people take to choose (Hick's law), and the more likely they are to leave. Five menu links beat twelve. Three pricing options beat six.

• Keep the main navigation to five links or fewer. Cut anything that doesn't help the visitor do the main action.Copy

7. Big, easy targets

Small buttons far from the thumb are slow and frustrating to hit (Fitts's law). On phones this matters even more. The accessibility standard (WCAG 2.2) sets 24 × 24 px as the minimum. Aim for 44 px.

• Make buttons and tappable links at least 44 by 44 px, with space between them. Put the main action where a thumb can reach it.Copy

8. Show what's happening

Every interactive thing needs states: how it looks on hover, when focused with the keyboard, while loading, when something worked and when it failed. AI-made sites often skip these.

• Design hover, focus, active, disabled, loading, success and error states for every button, link and form. Keep the focus outline visible.Copy

9. Make text easy to read

Comfortable reading is about size, line length and contrast: body text of 16 to 18 px, lines of roughly 45 to 75 characters, and dark enough text on a light enough background. WCAG asks for at least 4.5:1 for normal text. Here is what that looks like on white.

• Body text at least 16 px with line height around 1.6, lines no wider than about 65 characters, and contrast of at least 4.5:1.Copy

10. Forgive mistakes

People mistype, tap the wrong thing and change their minds. Good forms keep what was typed, explain errors in plain words next to the field, and only ask for what's needed.

• Every field has a visible label. Ask only for what we need. Show errors next to the field in plain words, and never clear the form when there's an error.Copy

1. Start with a brief

Tell the AI who the site is for, what it should make them do, and how it should feel. References beat adjectives: "like a printed menu" says more than "elegant".

I want a website for [what it is, in one sentence].
Who it's for: [the people you want to reach].
The one thing a visitor should do: [book, call, buy, sign up, visit].
How it should feel: [three words, e.g. calm, confident, warm].
Looks I like: [a website, a magazine, a shop sign, a film poster], because [what you like about it].
Use only the copy, logo and photos I give you. Don't invent facts, reviews or numbers.
Avoid unless I ask for them: purple or blue gradients, glowing shadows, a pill badge above the headline, three identical feature cards, stock photos of people smiling at laptops, and emoji as icons.
Before writing code, describe the design direction in five bullet points (layout, colours, fonts, imagery, one memorable detail) and wait for my OK.

The last line matters. Agreeing the direction first is much cheaper than rebuilding a page you don't like.

2. Layout and hierarchy

Hierarchy is what the eye sees first, second and third. Good pages have one obvious starting point and one obvious next step.

Review the layout for visual hierarchy:
- Each section should have one clear focal point. The most important thing is the largest or boldest; everything else steps down.
- The main action ([your action]) appears in the first screen and again at the end. Use one primary button style only; other links are quieter.
- Vary the section layouts (split image and text, a full-width quote, a simple list) instead of repeating the same card grid.
- Keep text blocks left-aligned. Centre only short headlines.
- Limit body text to about 65 characters per line.
Show me what you changed and why.

3. Spacing

Cramped spacing is the quickest way to make a site look cheap. Generous, consistent space is the quickest way to make it look designed. The trick is to pick a few sizes and stick to them.

Use one spacing scale everywhere: 4, 8, 16, 24, 32, 48, 64, 96 px (as CSS variables). Rules:
- Related things sit close together; unrelated groups get clearly more space between them.
- Sections are separated by at least 64 px on desktop and 48 px on mobile.
- Buttons, cards and inputs use padding from the scale, never random values.
- Nothing touches the edge of the screen: at least 16 px side padding on phones.
Replace any one-off margins or paddings with values from the scale.

4. Type scale

A type scale is a small set of font sizes that relate to each other, so headings look like headings and nothing looks accidental. Each step is about 1.25 times the one before.

Set up a type scale and use only these sizes:
- Body text 18 px (never below 16 px), line height 1.6.
- A modular scale with ratio 1.25: 14, 18, 22, 28, 35, 44, 55 px. Use the largest sizes only for the main headline.
- Headings: tighter line height (1.1 to 1.25) and slightly tighter letter spacing.
- At most two font families and three weights in total.
- On phones, scale big headings down with clamp() so long words don't overflow.
List the sizes you used and where.

Fonts have their own guide: Pick colours and fonts that work.

5. Colour and contrast

Most good sites use far fewer colours than you'd think: a background, a text colour, one brand colour and one accent. Contrast is what makes it readable. See Pick colours and fonts that work for ready-made palettes.

Define the colours as CSS variables: background, surface, text, muted text, brand, accent, border, error, success.
- Use the brand colour for the main button and key links; use the accent sparingly (about 10% of the page).
- Body text must have a contrast ratio of at least 4.5:1 against its background; large text, icons and input borders at least 3:1. Check every text and background pair and list the ratios.
- Don't rely on colour alone to show meaning (add an icon or text to errors and links).
- No pure grey text on coloured backgrounds; tint greys toward the brand colour.

6. Imagery and icons

Photos and icons are where a page most often goes wrong. Mixed styles, random crops, emoji standing in for icons and slow pages full of huge files all give the game away.

Use my photos only. Consistent crop ratio (for example 3:2 for all card images, 16:9 for wide banners), alt text on every informative image, width and height set on every image, lazy-load images below the fold. One SVG icon set in one style and one stroke width, no emoji.
Compress the photos so most are under 300 KB. Don't add stock photos, and don't stretch or distort any image.

7. Motion

A little movement makes a page feel alive. A lot of it feels like a template and annoys people. Say how much you want.

Subtle only: 150-250 ms fades and hovers; one entrance effect max; respect prefers-reduced-motion.
No parallax, no auto-playing carousels, no bouncing or spinning elements, and nothing that moves while someone is trying to read.

8. Mobile first

More than half of visits to most small sites come from phones, and AI tools usually preview on a wide screen. Say it out loud.

Make the site mobile-first:
- Design for a 375 px wide screen first, then add layout for wider screens with min-width media queries.
- No horizontal scrolling at any width from 320 px up. Images, tables and code must shrink or scroll inside their own box.
- Tap targets (buttons, links in menus) at least 44 by 44 px with space between them.
- The navigation works on a phone without hover. Keep it to five links or fewer.
- Avoid fixed headers that cover content or jump when the browser bar hides.
- Phone numbers are tap-to-call links; addresses link to a map.
Then tell me how to check it on my own phone.

9. Accessibility

Accessible sites work for more people: people using a keyboard, a screen reader, a phone in bright sun or reading glasses they left at home. It also tends to help search engines understand your page. More checks in Make your AI site fast and accessible.

Make the site accessible to WCAG 2.2 AA:
- Use real HTML elements: one h1, headings in order, nav, main, footer, button for actions, a for links.
- Every image has useful alt text, or empty alt="" if it is decorative.
- Every form field has a visible label; errors say what went wrong next to the field.
- Everything works with the keyboard alone, in a logical order, with a clearly visible focus outline that isn't hidden behind sticky headers.
- Respect prefers-reduced-motion: no large animations for people who turn motion off.
- Set the page language and give the page a unique title.
List anything you couldn't fix.

10. The critique pass

AIs are better at reviewing than at getting everything right first time. Take a screenshot of your page on desktop and on your phone, attach both, and paste this.

Act as a senior product designer reviewing this page. Look at the attached screenshots.
List the 10 most important problems, ranked by impact, covering: hierarchy, spacing, alignment, typography, colour and contrast, mobile layout, clarity of the main action, and anything that looks generic or template-like.
For each, say what's wrong and the specific fix. Then fix the top three, and only those, so I can compare.

Repeat it two or three times. Each round gets you closer to a page that looks deliberate. Looking at a screenshot catches things the code doesn't show, like a headline that wraps badly or a button that disappears into its background.

Light or dark?

Decide this yourself, or the AI will pick for you. Most small business sites do best with a light theme: it's easiest to read and to get right. A dark theme can suit photography, nightlife, music and developer tools, but it takes more care with contrast.

• Use a light theme only. Don't add a dark mode.Copy
• Use a dark theme with an off-black background and off-white text. Check every contrast pair again.Copy
• Support light and dark with prefers-color-scheme, and recheck contrast in both.Copy

More on dark mode in the colours and fonts guide.

Fix a generic result

Already have a page that looks like everyone else's? Find the symptom, paste the one-line fix.

Everything is centred

Left-align body text and lists. Centre only short headlines and one call to action.

All the cards look identical

Vary the section layouts. Use a split image and text, a big quote and a plain list instead of one repeated card grid.

Purple or blue gradient everywhere

Remove all gradients. Use a flat background and the one brand colour [hex].

Too many fonts

Use two font families at most and three weights in total. Remove the rest.

It feels cramped

Double the space between sections and use the spacing scale 4, 8, 16, 24, 32, 48, 64, 96 px.

Nothing stands out

Give each section one focal point and make the main button the strongest element on screen.

Looks like a template

Replace stock images and placeholder text with my real photos and copy. Remove decorative emoji.

The grey text is hard to read

Darken all grey text to at least 4.5:1 contrast against its background.

Save it once, use it every time

You don't have to paste your brief and the rules into every chat. Put the master prompt from the cheat sheet, or your own brief, where your AI keeps standing instructions.

• Claude: create a Project for your website and put the brief in the project instructions.
• ChatGPT: add it to a Project's instructions, or to your custom instructions if you build sites often.
• Claude Code, Codex, Cursor and other coding tools: save it in the instructions file at the top of your project folder (CLAUDE.md for Claude Code, AGENTS.md for Codex and many others).
• Any other AI chat: paste it as your first message of each new conversation.

How to tell if it worked

Open your site and squint at it, or step back from the screen. Can you still tell what the most important thing is? Then hand your phone to someone who hasn't seen the site and ask them to do the main action without help. Watch, don't explain. Where they hesitate is where your next prompt should go.

Habits that beat any prompt

• Change one thing at a time. "Make the headline bigger and the buttons rounder and add a section" usually breaks something else.
• Show, don't describe. A screenshot of a site you like, or a photo of your shop, gets you closer than a paragraph of adjectives.
• Use your real content early. Real photos, your real menu, your real prices. Placeholder text hides layout problems.

Want everything on one page? The cheat sheet has every rule from these guides and one master prompt.

Launch it

When the page looks right on your phone and your laptop, run through the launch checklist. Then paste Launch my site on PageLemon.com into the same chat. Your AI publishes it and replies with a link you can share. If you change your mind about the colours next week, ask your AI to change them and publish again.