GuidesCheat sheet
The AI website cheat sheet
Every design rule on one page, plus 70 short prompts for the jobs you'll actually do: start a site, fix the phone view, rewrite the words, add a form, fix what broke and launch. Copy any line into Claude, ChatGPT or any AI.
Six habits that make any AI better at websites
These matter more than any single prompt. They are what experienced people do without thinking.
1. Let it ask first
- Start with "Ask me questions before you build."
- Answers beat adjectives every time.
2. Plan, then build
- Ask for the page list and design direction first.
- Say OK before any code is written.
3. One change at a time
- Small asks get small, safe edits.
- Say what to keep: "Change only the header."
4. Show, don't describe
- Send a screenshot of the problem.
- Paste the exact error text, not a summary.
5. Give it real material
- Your real words, prices, photos and logo.
- A sample of how you write.
6. Check facts yourself
- AI fills gaps with confident guesses.
- Read every name, number and date.
The rules, with numbers
Defaults that suit most small sites. Your content and your visitors come first.
Brief
- Who it's for and the one action you want.
- Three words for the feel.
- A reference site you like, not an adjective.
- What to avoid, said out loud.
Layout
- One focal point per section.
- Main button in the first screen and at the end.
- 5 menu links or fewer.
- Vary sections; avoid rows of identical cards.
Spacing
- Scale: 4, 8, 16, 24, 32, 48, 64, 96 px.
- Tight inside groups, loose between them.
- 64 px+ between sections on desktop.
- 16 px+ side padding on phones.
Type
- 2 font families max, 3 weights max.
- Body 16–18 px, line height about 1.5–1.6.
- Lines of 45–75 characters.
- Scale ratio 1.25: 14, 18, 22, 28, 35, 44.
Colour
- Background, text, one brand, one accent.
- 60-30-10: accents stay rare.
- Text contrast 4.5:1; large text 3:1.
- Never colour alone: add words or icons.
Mobile
- Design at 375 px first.
- No sideways scroll from 320 px.
- Tap targets 44 px (never under 24 px).
- Test on a real phone, outdoors.
Accessibility
- One h1, headings in order.
- Alt text on every meaningful image.
- Works with Tab alone; focus visible, never hidden under a sticky bar.
- Buttons, icons and field borders 3:1.
- Visible labels; calm motion if asked.
Words
- Headline: what it is and who it's for.
- Facts over adjectives; no invented reviews.
- Buttons say what happens: "Book a table".
- Ban: unlock, elevate, seamless, leverage.
Images
- Your own photos beat stock.
- WebP or AVIF; most under 300 KB.
- Always set width and height.
- SVG for logos and icons; one icon style.
Speed
- LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- Don't lazy-load the top image.
- No framework for a one-page site.
- Paste PageSpeed results into your AI.
Search and sharing
- Title about 50–60 characters per page.
- Description about 150 characters.
- Share image 1200 × 630.
- Link text says where it goes, not "click here".
Before launch
- Favicon on every page.
- Every link, phone number and form tested.
- Privacy page if you collect anything.
- No keys or passwords in the code.
Prompts by task
Each line is a full prompt. Replace the [brackets] with your details. Use them in the same chat as your site, one at a time.
Start a new site
Get the plan right before any code.
- I want a website for [what it is]. Ask me up to 7 questions before you build anything.
- Suggest the pages and the order of sections for a [type of] site. Wait for my OK.
- Give me three design directions in two lines each. I'll pick one.
- Build the home page only, as one index.html with the CSS inside. We'll add pages later.
- Use this site as a reference for feel, not content: [link or screenshot].
Layout and look
Name the problem, not the vibe.
- Make the first screen say what this is, who it's for, and show one button.
- Give each section a different layout. No rows of three identical cards.
- Add more space between sections and less inside groups. Use an 8 px spacing scale.
- Make the hierarchy clearer: one big headline, smaller supporting text, one main button.
- Put every colour, font size and spacing value in CSS variables at the top.
- No gradients, glowing shadows or pill badges above the headline.
Colours and fonts
Fewer choices look more designed.
- Use 4 colours only: background, text, one brand colour, one accent. Show me the hex codes.
- Check every text and background pair. Fix anything under 4.5:1 contrast.
- Pick one heading font and one body font that suit [three words]. Explain why in one line.
- Set body text to 18 px with line height 1.6 and lines no wider than 70 characters.
- Use my brand colour [hex] and build lighter and darker shades from it.
Fix the phone view
Most visitors arrive on a phone.
- Check the page at 375 px and 320 px wide. Fix anything that scrolls sideways.
- Make every button and link at least 44 px tall, with space between them.
- On phones, stack the columns and put the image after the text.
- Make the menu easy to open and close with one thumb.
- The headline is too big on my phone. Scale it down smoothly with clamp().
Write and rewrite the words
Facts and your voice, not filler.
- Interview me about my business, one question at a time, then write the home page.
- Rewrite this in plain words. Short sentences. No hype. [paste text]
- Replace every adjective with a fact. Ask me when you don't have one.
- Match the voice of this sample of my writing: [paste 200 words].
- Write 3 headline options for [page], each under 8 words, in different styles.
- Never invent reviews, numbers or awards. Mark gaps as [NEEDS FACT].
Add or change a section
Protect what already works.
- Add a [FAQ / prices / team / opening hours] section after [section]. Match the existing style.
- Change only this section. Leave everything else exactly as it is.
- Reuse the existing colours, fonts and spacing. Add no new ones.
- Add a new page called [About] and link it from the menu and the footer.
- Move the [reviews] section above [prices].
Images and icons
Real, light and described.
- Tell me which images this page needs, where, and what each should show.
- Use my photos only, no stock images. Crop them all to the same shape.
- Write alt text for each image that says what it shows. Use alt="" for decoration.
- Set width and height on every image and lazy-load the ones below the first screen.
- Replace the emoji with one consistent set of simple SVG icons.
Forms and contact
Short forms get filled in.
- Add a contact form with name, email and message. Give every field a visible label.
- Show a clear message after sending, and say what to fix when something is wrong.
- Make the phone number a tap-to-call link and the email a mailto link.
- Tell me where the form messages go. If they go nowhere yet, say so.
- Add a map link and opening hours to the contact section.
Search and sharing
So people find it and links look good.
- Give every page a unique title (50–60 characters) and description (about 150).
- Add Open Graph tags and a 1200 × 630 share image so links show a preview.
- Add a favicon, a sitemap.xml and a robots.txt.
- Check there is one h1 per page and the headings go in order.
- Add LocalBusiness structured data with my address and opening hours.
Accessibility
Better for everyone, not just some.
- Check this page against WCAG 2.2 AA and list the problems before fixing them.
- Make the keyboard focus clearly visible and never hidden under a sticky header.
- Turn animations off when the visitor's device asks for reduced motion.
- Make sure nothing relies on colour alone. Add text or icons too.
Speed
Fast feels trustworthy.
- Here is my PageSpeed Insights report: [paste]. Fix the top 3 issues only.
- Remove any library or script this page doesn't need.
- Stop the page jumping while it loads: reserve space for images and fonts.
- Load the top image first and don't lazy-load it.
Review and improve
Ask for criticism, then choose.
- Here is a screenshot. Critique it like a senior designer and give me the top 3 fixes.
- What would a first-time visitor not understand in 5 seconds?
- What looks generic or template-like here? Suggest one change for each.
- List what you would change, but don't change anything yet.
Launch and keep going
Put it online and keep it fresh.
- Check the site for placeholders, broken links and missing titles before I publish.
- Launch my site on PageLemon.com
- Change the opening hours on my site to [hours].
- Add a contact form to my site
- Roll back my site to the previous version.
When it goes wrong
What you see, and what to paste. The rule for all of them: ask for the smallest fix, not a rewrite.
- The page is blank or half missing
- The page is blank. Explain the cause in one sentence, then fix only that.
- It worked, then your last change broke it
- Undo your last change and go back to the version that worked.
- Images don't show once it's online
- Check every image path. Use relative paths and exact file names, lowercase, no spaces.
- The AI rewrote things you didn't ask about
- Only change [the thing]. Show me the diff before you apply it.
- It looks fine on a computer, broken on a phone
- Here is a screenshot from my phone (375 px wide). Fix the layout for this width.
- An error message appears
- Here is the exact error from the browser console: [paste]. What does it mean and what's the fix?
- The chat is long and the AI keeps forgetting
- Summarise the site, the design rules and what's left to do, so I can start a new chat.
- Everything looks like every other AI site
- List the generic parts of this design and replace each with something specific to [my business].
The master prompt
Fill in the brackets and paste it at the start of a new website chat. It sets every rule on this page at once.
Build a website for [what it is] for [who it's for]. The one thing a visitor should do: [action]. It should feel [three words]. Looks I like: [reference]. Things I don't want: [anything]. Before you build, ask me any questions you need. Then describe the design direction in five bullets and wait for my OK. Design like a senior product designer: - One focal point per section; the main action in the first screen and at the end; five menu links or fewer; varied section layouts. - CSS variables for colours, spacing (4, 8, 16, 24, 32, 48, 64, 96 px) and type (ratio 1.25, body 18 px, line height 1.6, about 65 characters per line). Two font families max. - Palette: background, text, one brand colour, one sparing accent. Text contrast 4.5:1; large text, icons and field borders 3:1. - Mobile-first at 375 px, no sideways scroll from 320 px, tap targets 44 px. - Semantic HTML, alt text, keyboard access with visible focus that a sticky header never hides, visible form labels, prefers-reduced-motion, WCAG 2.2 AA. - Fast: compressed images with width and height, the top image not lazy-loaded, minimal JavaScript, no unneeded libraries. - Words: plain, specific and friendly. Never invent reviews, numbers or facts; mark gaps as [NEEDS FACT] and ask me. - Avoid template looks unless I ask: no purple gradients, glowing shadows, pill badges above headlines, identical three-card rows or stock photos. - Include a favicon, a unique title and description per page, Open Graph tags with a 1200 × 630 image, and a friendly 404 page. Work in small steps. When I ask for a change, change only that.
Want the reasons behind each rule? Read the prompt checklist, colours and fonts and the launch checklist.
pagelemon.com/guides/cheat-sheet · Updated 14 October 2026
Built something you like?
Paste Launch my site on PageLemon.com into the same chat. Your AI publishes it and replies with a link you can share.
No publishing tools in your AI? Connect your AI once, then ask again.