Leila Fielding
WHAT YOU'LL LEAVE WITH
- A one-page site brief: who it's for, what visitors should do and which pages you need.
- A style sheet you reuse in every prompt, so the whole site looks consistent.
- A build prompt with ground rules that stop the builder changing things you didn't ask for.
- A checklist for every build and another for launch, saved together as one PDF pack.
BEFORE YOU START
Have these ready:
- An idea of who the site is for, even a rough one.
- Optional: an account with an AI website builder, if you want to build your homepage today. You can do everything else without one.
Best done on a computer, as you'll be copying between this page and your builder.
There are three kinds of tool you might use, often together:
- Website builders with templates and AI help: the quickest route to a standard site with a few pages, but with less control over custom features.
- AI app builders that write the code for you from your prompts: the most flexible, including interactive tools and your own design, but you have to review their work carefully. This playbook is written mainly for these.
- A general In plain EnglishAn AI assistant is an application that helps people complete tasks using artificial intelligence. It may answer questions, create content, analyse information or interact with other tools.Practical takeawayCheck what an assistant can actually access and do before relying on it to complete a task.Read the full entry alongside either: useful for planning, writing copy and creating image prompts.
Products, features and prices change quickly, so check each one's current plans before you choose.
Not sure which AI tool suits the job? Which AI Tool Should I Use?Step 1 of 6
The quickest site is the one you don't over-build. Decide what it's for first, then pick the simplest tool that does the job.
FROM THE FIELD
Write your running-cost limit into the very first prompt. Builders will happily add a database or a paid service to solve a problem a simpler page would have solved for free.
A builder can only build what you describe. A one-page brief stops you re-explaining the site in every prompt.
Ask AI to suggest your pages
I'm building a website for [my visitors]. I want visitors to [find out about me and get in touch]. Suggest the fewest pages that would do this, with one sentence on what each page is for. Don't add pages I don't need.
YOUR SITE BRIEF
SITE: [name] WHAT I OFFER: [what I offer] WHY TRUST ME: [what makes me credible] WHO IT'S FOR: [who it's for] VISITORS SHOULD: [action 1]; [action 2]; [action 3] PAGES:
FROM THE FIELD
Every page you add needs copy, images, a phone layout, sharing settings and checking. Launch with the pages that do your three things, and add the rest later.
FROM THE FIELD
It ends up in your builder's history.
Without a written style, every prompt drifts: a new shade here, a different font there. One page of rules, reused every time, keeps the whole site consistent.
Enter a valid colour in #RRGGBB format.
Enter a valid colour in #RRGGBB format.
Text contrast: 13.44:1 · Good for reading
All of these are free to use on websites.
YOUR STYLE SHEET
COLOURS - Main: [main colour] - [what it's for] - Accent: [accent colour] - [what it's for] - Background: #0F1B2D · Text: #F3F5F8 FONTS - Headings: [heading font] · Body: [body font] IMAGES - [style]: [describe the look] WRITING - British English · Plain English · No jargon · Short paragraphs · Avoid em dashes and other common AI phrasing RULES - Never put words inside images. Headings and text are always real text on the page. - Every image has a desktop version and a phone version, or a crop that works on both. - Buttons and links always use the accent colour, so visitors know what's clickable.
Image prompt template
Create a [image style] image, wide 16:9 for computers. [Describe the scene]. Style: [look]. Colours: a #0F1B2D background, with [main colour hex] as the main colour and [accent hex] for small highlights. Leave the left third calm and simple so text can sit next to it on the page. No text, letters, logos or icons in the image. Keep the main subject in the centre so it can be cropped.
FROM THE FIELD
Write down what each colour is for, not just its code. When 'lime means click' is a rule, every new page follows it without you having to say so.
FROM THE FIELD
In plain EnglishGuardrails are rules, technical controls and safeguards designed to keep an AI system operating within acceptable boundaries. They can restrict what information the system accesses, which actions it performs and how certain requests are handled.Practical takeawayFor AI systems that take actions, enforce permissions in the connected systems rather than relying solely on written instructions to the AI.Read the full entry stop AI builders changing things you didn't ask for, adding costs or publishing before you're ready.
This is your limit, not a price for any product.
YOUR BUILD PROMPT
GROUND RULES - Build in a preview only. Don't publish or deploy. - Change only what this prompt asks for. Don't change any other pages, styles or settings. - No paid services, databases, AI features or new add-ons without asking me first. My running-cost limit is: [limit]. - Use my style sheet below for every colour, font and image decision. - Put all headings and text on the page as real text, never inside images. - When you've finished, list the files you changed and the result of each check at the end. MY SITE SITE: [name] WHAT I OFFER: [what I offer] WHY TRUST ME: [what makes me credible] WHO IT'S FOR: [who it's for] VISITORS SHOULD: [action 1]; [action 2]; [action 3] PAGES: MY STYLE COLOURS - Main: [main colour] - [what it's for] - Accent: [accent colour] - [what it's for] - Background: #0F1B2D · Text: #F3F5F8 FONTS - Headings: [heading font] · Body: [body font] IMAGES - [style]: [describe the look] WRITING - British English · Plain English · No jargon · Short paragraphs · Avoid em dashes and other common AI phrasing RULES - Never put words inside images. Headings and text are always real text on the page. - Every image has a desktop version and a phone version, or a crop that works on both. - Buttons and links always use the accent colour, so visitors know what's clickable. THIS TASK Build the [first page] page only. It should [what this page should do] and help visitors [the three actions]. CHECKS TO RUN AND REPORT - [ ] Works on a phone (360px wide) with no sideways scrolling - [ ] Exactly one main heading, as real text - [ ] Colours and fonts match my style sheet - [ ] Every link and button works - [ ] The page has its own title and description for search and sharing - [ ] Nothing published; no paid services added
Use the same ground rules at the top of every prompt, not just the first.
FROM THE FIELD
Asking for six changes at once makes it hard to see what broke. Small prompts, each with its own checks, are quicker in the end.
FROM THE FIELD
Before changing something big, ask the builder for a read-only export of the page: every piece of text, field and setting, with nothing changed. Read it first. It catches problems you'd never spot by clicking around.
Why checks at the end? Builders often say 'done' when something isn't. A list of checks to run and report turns 'done' into something you can see.
A build prompt is just a detailed, reusable In plain EnglishA prompt is the instruction, question or information you give an AI system to guide its response.Practical takeawayTell AI what you want to achieve, provide relevant context and explain what a useful answer should look like.Read the full entry.
AI Prompt BuilderYou'll learn more from your first real page than from any amount of planning.
No builder yet? Skip to Step 06. Everything you need is in your pack.
- Open your builder and start a new project.
- Paste your build prompt and send it.
- When it says it's finished, don't take its word for it. Open the preview on your computer and on your phone, and work through this checklist.
BUILD CHECKLIST
0 of 8 checked
If something's wrong, copy a fix
It changed things I didn't ask for
Undo every change outside this task. Only the [first page → 'requested'] page should have changed. List what you've reverted.
Text is inside an image
Remove the text from the image and put it on the page as real text, using my heading font ([heading font → 'from my style sheet']) and body font ([body font → 'from my style sheet']).
It looks wrong on a phone
Fix the layout at 360px and 390px wide. No sideways scrolling, and the main heading visible on the first screen. Send me screenshots.
It says it's In plain EnglishAn AI hallucination happens when an AI system generates information that is incorrect, fabricated or unsupported, but presents it as though it were accurate.Practical takeawayCheck important claims against reliable sources, particularly names, dates, statistics and references.Read the full entry, but it isn't
Run every check at the end of my prompt and report each result. If any check fails, fix it before reporting.
It added something that might cost money
Remove [the service] and explain what it was for. My running-cost limit is: [limit]. Do this without paid services, or stop and tell me what it would cost first.
It forgot an earlier decision
Here are the decisions we've made so far: [paste your decisions list]. Follow them for this change and every future change.
FROM THE FIELD
Builders don't reliably remember what you agreed three prompts ago. Keep a short list of decisions, such as colours, page names and rules, and paste it in whenever something drifts. Your pack has space for it.
FROM THE FIELD
A builder checking In plain EnglishAI output is the result produced by an AI system in response to an input or task. It might be text, an image, code, a classification, a summary or a recommendation.Practical takeawayCheck the output against your brief and original sources, then edit or verify it before sharing or acting on it.Read the full entry isn't a real In plain EnglishHuman-in-the-loop means involving a person in an AI-supported process to review, guide, approve or correct an action or decision.Practical takeawayPut human review where it can genuinely influence the outcome.Read the full entry. Open the page yourself.
Most problems show up after launch, when real people visit and share your pages. A few checks before you publish save a lot of fixing later.
0 of 15 launch checks done
FROM THE FIELD
In many builders, pressing publish makes every page in the project live at once, including the ones you're still working on. Check what will become visible before you press the button.
FROM THE FIELD
YOUR WEBSITE PACK
Your website plan so far
Save it as a PDF and keep it next to your builder. It has everything you need for every page you build.
This fills in as you go.
1. NEXT STEPS
- Paste your build prompt into your builder to build the [first page] page, if you haven't yet.
- For every page after that, keep the ground rules and style sheet, and change only the task and the checks.
- Keep your decisions list up to date, and paste it in whenever the builder drifts.
- Run the build checklist after every change, and the launch checklist before you publish.
2. YOUR SITE BRIEF
SITE: [name] WHAT I OFFER: [what I offer] WHY TRUST ME: [what makes me credible] WHO IT'S FOR: [who it's for] VISITORS SHOULD: [action 1]; [action 2]; [action 3] PAGES:
3. YOUR STYLE SHEET
COLOURS - Main: [main colour] - [what it's for] - Accent: [accent colour] - [what it's for] - Background: #0F1B2D · Text: #F3F5F8 FONTS - Headings: [heading font] · Body: [body font] IMAGES - [style]: [describe the look] WRITING - British English · Plain English · No jargon · Short paragraphs · Avoid em dashes and other common AI phrasing RULES - Never put words inside images. Headings and text are always real text on the page. - Every image has a desktop version and a phone version, or a crop that works on both. - Buttons and links always use the accent colour, so visitors know what's clickable.
4. YOUR BUILD PROMPT
GROUND RULES - Build in a preview only. Don't publish or deploy. - Change only what this prompt asks for. Don't change any other pages, styles or settings. - No paid services, databases, AI features or new add-ons without asking me first. My running-cost limit is: [limit]. - Use my style sheet below for every colour, font and image decision. - Put all headings and text on the page as real text, never inside images. - When you've finished, list the files you changed and the result of each check at the end. MY SITE SITE: [name] WHAT I OFFER: [what I offer] WHY TRUST ME: [what makes me credible] WHO IT'S FOR: [who it's for] VISITORS SHOULD: [action 1]; [action 2]; [action 3] PAGES: MY STYLE COLOURS - Main: [main colour] - [what it's for] - Accent: [accent colour] - [what it's for] - Background: #0F1B2D · Text: #F3F5F8 FONTS - Headings: [heading font] · Body: [body font] IMAGES - [style]: [describe the look] WRITING - British English · Plain English · No jargon · Short paragraphs · Avoid em dashes and other common AI phrasing RULES - Never put words inside images. Headings and text are always real text on the page. - Every image has a desktop version and a phone version, or a crop that works on both. - Buttons and links always use the accent colour, so visitors know what's clickable. THIS TASK Build the [first page] page only. It should [what this page should do] and help visitors [the three actions]. CHECKS TO RUN AND REPORT - [ ] Works on a phone (360px wide) with no sideways scrolling - [ ] Exactly one main heading, as real text - [ ] Colours and fonts match my style sheet - [ ] Every link and button works - [ ] The page has its own title and description for search and sharing - [ ] Nothing published; no paid services added
5. YOUR IMAGE PROMPT TEMPLATE
Create a [image style] image, wide 16:9 for computers. [Describe the scene]. Style: [look]. Colours: a #0F1B2D background, with [main colour hex] as the main colour and [accent hex] for small highlights. Leave the left third calm and simple so text can sit next to it on the page. No text, letters, logos or icons in the image. Keep the main subject in the centre so it can be cropped. Create a [image style] image, upright 9:16 for phones. [Describe the scene]. Style: [look]. Colours: a #0F1B2D background, with [main colour hex] as the main colour and [accent hex] for small highlights. Leave the top third calm and simple so text can sit next to it on the page. No text, letters, logos or icons in the image. Keep the main subject in the centre so it can be cropped.
6. FIXES TO KEEP HANDY
It changed things I didn't ask for
Undo every change outside this task. Only the [first page → 'requested'] page should have changed. List what you've reverted.
Text is inside an image
Remove the text from the image and put it on the page as real text, using my heading font ([heading font → 'from my style sheet']) and body font ([body font → 'from my style sheet']).
It looks wrong on a phone
Fix the layout at 360px and 390px wide. No sideways scrolling, and the main heading visible on the first screen. Send me screenshots.
It says it's done, but it isn't
Run every check at the end of my prompt and report each result. If any check fails, fix it before reporting.
It added something that might cost money
Remove [the service] and explain what it was for. My running-cost limit is: [limit]. Do this without paid services, or stop and tell me what it would cost first.
It forgot an earlier decision
Here are the decisions we've made so far: [paste your decisions list]. Follow them for this change and every future change.
7. YOUR BUILD CHECKLIST
- □Looks right on a phone and on a computer
- □No words inside images
- □One main heading, and headings in a sensible order
- □Colours and fonts match the style sheet
- □Every link and button goes where it should
- □Images load quickly (each under about 200 KB)
- □The page has its own title and description
- □Nothing changed that you didn't ask for
8. YOUR LAUNCH CHECKLIST
COSTS
- □I know what I'll pay each month for hosting, the domain and any add-ons
- □No AI features or services that charge every time a visitor uses them
PRIVACY AND LEGAL
- □A privacy page explains what the site collects and why
- □Contact and sign-up forms ask only for what's needed, with clear consent for emails
- □Cookies and analytics checked against the ICO's current guidance
- □I have the rights to every image, font and logo I use
- □If I'm employed, I've checked my employer's policy on personal websites and social media
SEARCH AND SHARING
- □Every page has its own title, description and share image
- □Share buttons use my real web address, not the builder's preview address
- □After publishing, I'll test share previews with LinkedIn's Post Inspector and Facebook's Sharing Debugger
- □If I rename or move a page that's already live, the old address will still work
- □After launch, I'll submit my sitemap in Google Search Console
QUALITY
- □Checked on at least one phone and one computer
- □Every page works with a keyboard, and images that carry meaning have alt text
- □Nothing still in progress will go live by accident when I publish
9. YOUR DECISIONS LIST
Write down decisions as you make them: colours, page names, rules.
Opens your browser's print window. Choose 'Save as PDF' as the destination.
Answers are stored in this browser when local storage is available; they are not sent to us. Save the PDF to keep a copy.
LEILA FIELDING · AI PLAYBOOKS12 November 2026
My website plan
[name]: [offer]
1. NEXT STEPS
- Paste your build prompt into your builder to build the [first page] page, if you haven't yet.
- For every page after that, keep the ground rules and style sheet, and change only the task and the checks.
- Keep your decisions list up to date, and paste it in whenever the builder drifts.
- Run the build checklist after every change, and the launch checklist before you publish.
2. YOUR SITE BRIEF
SITE: [name] WHAT I OFFER: [what I offer] WHY TRUST ME: [what makes me credible] WHO IT'S FOR: [who it's for] VISITORS SHOULD: [action 1]; [action 2]; [action 3] PAGES:
3. YOUR STYLE SHEET
[main colour][accent colour]#0F1B2D#F3F5F8
COLOURS - Main: [main colour] - [what it's for] - Accent: [accent colour] - [what it's for] - Background: #0F1B2D · Text: #F3F5F8 FONTS - Headings: [heading font] · Body: [body font] IMAGES - [style]: [describe the look] WRITING - British English · Plain English · No jargon · Short paragraphs · Avoid em dashes and other common AI phrasing RULES - Never put words inside images. Headings and text are always real text on the page. - Every image has a desktop version and a phone version, or a crop that works on both. - Buttons and links always use the accent colour, so visitors know what's clickable.
4. YOUR BUILD PROMPT
GROUND RULES - Build in a preview only. Don't publish or deploy. - Change only what this prompt asks for. Don't change any other pages, styles or settings. - No paid services, databases, AI features or new add-ons without asking me first. My running-cost limit is: [limit]. - Use my style sheet below for every colour, font and image decision. - Put all headings and text on the page as real text, never inside images. - When you've finished, list the files you changed and the result of each check at the end. MY SITE SITE: [name] WHAT I OFFER: [what I offer] WHY TRUST ME: [what makes me credible] WHO IT'S FOR: [who it's for] VISITORS SHOULD: [action 1]; [action 2]; [action 3] PAGES: MY STYLE COLOURS - Main: [main colour] - [what it's for] - Accent: [accent colour] - [what it's for] - Background: #0F1B2D · Text: #F3F5F8 FONTS - Headings: [heading font] · Body: [body font] IMAGES - [style]: [describe the look] WRITING - British English · Plain English · No jargon · Short paragraphs · Avoid em dashes and other common AI phrasing RULES - Never put words inside images. Headings and text are always real text on the page. - Every image has a desktop version and a phone version, or a crop that works on both. - Buttons and links always use the accent colour, so visitors know what's clickable. THIS TASK Build the [first page] page only. It should [what this page should do] and help visitors [the three actions]. CHECKS TO RUN AND REPORT - [ ] Works on a phone (360px wide) with no sideways scrolling - [ ] Exactly one main heading, as real text - [ ] Colours and fonts match my style sheet - [ ] Every link and button works - [ ] The page has its own title and description for search and sharing - [ ] Nothing published; no paid services added
5. YOUR IMAGE PROMPT TEMPLATE
Create a [image style] image, wide 16:9 for computers. [Describe the scene]. Style: [look]. Colours: a #0F1B2D background, with [main colour hex] as the main colour and [accent hex] for small highlights. Leave the left third calm and simple so text can sit next to it on the page. No text, letters, logos or icons in the image. Keep the main subject in the centre so it can be cropped. Create a [image style] image, upright 9:16 for phones. [Describe the scene]. Style: [look]. Colours: a #0F1B2D background, with [main colour hex] as the main colour and [accent hex] for small highlights. Leave the top third calm and simple so text can sit next to it on the page. No text, letters, logos or icons in the image. Keep the main subject in the centre so it can be cropped.
6. FIXES TO KEEP HANDY
It changed things I didn't ask for
Undo every change outside this task. Only the [first page → 'requested'] page should have changed. List what you've reverted.
Text is inside an image
Remove the text from the image and put it on the page as real text, using my heading font ([heading font → 'from my style sheet']) and body font ([body font → 'from my style sheet']).
It looks wrong on a phone
Fix the layout at 360px and 390px wide. No sideways scrolling, and the main heading visible on the first screen. Send me screenshots.
It says it's done, but it isn't
Run every check at the end of my prompt and report each result. If any check fails, fix it before reporting.
It added something that might cost money
Remove [the service] and explain what it was for. My running-cost limit is: [limit]. Do this without paid services, or stop and tell me what it would cost first.
It forgot an earlier decision
Here are the decisions we've made so far: [paste your decisions list]. Follow them for this change and every future change.
7. YOUR BUILD CHECKLIST
- □ Looks right on a phone and on a computer
- □ No words inside images
- □ One main heading, and headings in a sensible order
- □ Colours and fonts match the style sheet
- □ Every link and button goes where it should
- □ Images load quickly (each under about 200 KB)
- □ The page has its own title and description
- □ Nothing changed that you didn't ask for
8. YOUR LAUNCH CHECKLIST
COSTS
- □ I know what I'll pay each month for hosting, the domain and any add-ons
- □ No AI features or services that charge every time a visitor uses them
PRIVACY AND LEGAL
- □ A privacy page explains what the site collects and why
- □ Contact and sign-up forms ask only for what's needed, with clear consent for emails
- □ Cookies and analytics checked against the ICO's current guidance
- □ I have the rights to every image, font and logo I use
- □ If I'm employed, I've checked my employer's policy on personal websites and social media
SEARCH AND SHARING
- □ Every page has its own title, description and share image
- □ Share buttons use my real web address, not the builder's preview address
- □ After publishing, I'll test share previews with LinkedIn's Post Inspector and Facebook's Sharing Debugger
- □ If I rename or move a page that's already live, the old address will still work
- □ After launch, I'll submit my sitemap in Google Search Console
QUALITY
- □ Checked on at least one phone and one computer
- □ Every page works with a keyboard, and images that carry meaning have alt text
- □ Nothing still in progress will go live by accident when I publish
9. YOUR DECISIONS LIST
Write down decisions as you make them: colours, page names, rules.
- Build page by page. Same ground rules, same style sheet, one page per prompt, then the build checklist.
- Write your copy first. Builders fill gaps with filler text that sounds fine and says nothing. Give them your words. Review AI-Assisted Content Before Publishing
- Keep private details out of prompts. No passwords, client names or personal data in anything you paste. What Can You Safely Share With AI?
- Review before you publish, every time. Run the launch checklist again whenever you add a page or a form.
Website builders, prices and privacy rules change. Check each tool's current plans and the ICO's current guidance before you launch. The example uses a fictional person; your results will depend on your site and your tools.