How to Build a Website With AI: A Step-by-Step Guide

00 · The real example

A spa site, rebuilt with AI

I'll use a real client project the whole way through: a massage, post-op and body contouring spa in Boston.

What the old site had

Eight WordPress pages. No prices anywhere. No business info for Google. Hours with a day missing. A different contact email on one page. Service descriptions cut off mid-sentence.

What it had going for it

Real reviews. A strong post-op niche. Online booking already set up. Payment plans already in place. Good bones, badly organized.

An earlier AI draft looked great but had problems. It dropped real services, added a star rating and "years in business" claims nobody could verify, showed a financing option that wasn't live, and included a fake booking demo. The next version restored every original service word for word, used real photos and real reviews, and removed anything we couldn't prove.

AI will happily make your site look amazing with things that aren't true. Your job is to feed it real content and check it.

Gather real content into a folder
Write a one-page brief and rules
Have Claude build it, starting from an existing site
Give it the route and what not to do
Preview it on your computer
Run the launch checklist
Deploy free on Cloudflare
Add automations

Step 1 · Gather real content

Content first. Design second.

"Build me a spa website" gets you a generic spa website with made-up words. Give it the real material instead.

my-website/
├── old-site/      (saved pages or pasted text from the current site)
├── services.txt   (every service, description, price, duration)
├── reviews.txt    (real reviews, copied exactly, with permission)
├── links.txt      (booking, payment plan, Google review, maps)
├── business.txt   (name, address, phone, hours, email: ONE of each)
├── photos/        (real photos of you, the space, the work)
└── BRIEF.md       (step 2)

For the spa, prices weren't on the old site at all. They came from the business's own booking page, and every price on the new site got a note saying where it came from and that it may change.

Pull content from your old siteBefore anything else.

Here is my current website: {URL}. Read every page and save the text into my-website/old-site/, one file per page. Copy the words exactly. Then list anything that looks broken: cut-off sentences, missing hours, conflicting emails or phone numbers, dead links. Don't rewrite anything yet.

Step 2 · One-page brief

One page that tells the AI what to build

Keep the brief to one page: who the site is for, what it has to do, and the rules it can't break.

Price is a filter, not a secret Show prices

Hiding prices doesn't make people call. It makes the wrong people call and the right people leave. Show real prices, or "from" prices.

Email capture is launch-critical Not later

If the contact form doesn't deliver to someone, the site isn't ready. A form that goes nowhere is worse than no form.

Real content only No made-up claims

No invented ratings, stats, reviews or features. If you can't point to where it came from, it doesn't go on the site.

One action everywhere Book now

Every button goes to the same real booking link. Test it.

Write my briefAfter step 1.

Read the files in my-website/. Write BRIEF.md, one page max: who the site is for, the 3 things a visitor must be able to do (e.g. see services and prices, book, contact), the sections in order, and these rules: prices shown with their source, a contact form that really delivers, real content only (no invented ratings, stats or features), every Book button uses {booking link}. List missing info as questions for me.

Step 3 · Build it

Let Claude build it. Start from something.

You don't need a framework. A simple static site (one HTML file, one CSS file, a small JavaScript file and an images folder) is fast, cheap to host and easy for any AI to edit later.

Reuse, don't start from scratch

If you have a site you like (yours, a past project, a draft), give it to Claude as the starting point. For the spa we kept the earlier draft's look and section order and fixed the content.

Strong model plans, cheaper model cleans

Use the strongest model for the plan, structure and design. Use a cheaper model or another AI for small edits, typos and polish.

Claude or Claude Code? The Claude app works if you want to paste files in and download the result. Claude Code works directly in your folder on your computer. That's what I use, because it can read the files, build the site and preview it without copy and paste.

Build from the folderThe main build.

Build a simple static website in my-website/site/ (index.html, styles.css, app.js, images/). Follow BRIEF.md exactly. Use only content from the files in my-website/. Use {existing site folder or URL} as the starting design: keep its look, change the content. Mobile first. Plan first and show me the section list before you write code.

Cleanup passCheaper model.

Read site/index.html. Fix only: typos, broken anchors, missing alt text, and phone/email/hours that don't match business.txt. Don't change the design or rewrite copy. List every change.

Step 4 · Give it the route

Tell it where to go, and what not to do

AI wastes the most time (and your usage) when it wanders: reading every file, rebuilding things that work, "improving" copy you already approved.

Tell it

Which files to read. Which file to change. What "done" looks like. To back up before big changes.

Tell it not to

Read the whole project. Rebuild from scratch. Rewrite approved copy. Add features or claims you didn't ask for. Deploy anything.

The route promptUse for every change.

Task: {one clear change, e.g. add the Hot Stone service to the Massage section}.
Read only: site/index.html, services.txt.
Change only: site/index.html.
Don't read the rest of the project, don't rebuild anything, don't rewrite other sections, don't deploy. Keep it short so we don't burn usage. When done, tell me exactly what changed.

Check against the originalBefore every launch.

Compare site/index.html with old-site/. List every service, review, link and hour that was on the old site but is missing or changed on the new one. Don't fix anything yet. Just give me the list.

That last prompt is exactly how we caught the spa's dropped services. Always compare the new site to the old one before launch.

Steps 5 + 6 · Preview and check

See it before anyone else does

Ask Claude Code to preview it on your computer. Under the hood that's usually one command, like python3 -m http.server, and then you open the address it gives you. Check it on your phone too.

Preview and testBefore launch.

Start a local preview of site/ and give me the link. Then check: every link and button works, no broken images, no console errors, and it looks right at phone width. Send me screenshots of desktop and mobile.

Launch checklist

Real content only: every price, review, claim and photo has a source
Every service from the old site is there, or removed on purpose
One email, one phone, hours for every day of the week
Every Book, Pay, Review and Map link clicked and working
Looks right on a phone
SEO basics: title, description, business info for Google, sitemap
Contact form delivers to an inbox someone reads (test it)
Analytics on so you can see visits and clicks
Any "noindex" or staging settings removed for launch

Step 7 · Deploy

Go live on Cloudflare

I host simple sites like this on Cloudflare. A small static site fits on their free plan; check their current plans yourself.

Make a free Cloudflare account
Sign up yourself. Never paste your password or API keys into an AI chat.
Deploy to a test address first
Have Claude set up the project and deploy to a test URL. Look at it live before touching your real domain.
Review, then point your domain
Once the test version passes the checklist, connect your domain in Cloudflare.

Set up the deployReview before it runs.

Set up site/ to deploy as a static site on Cloudflare with wrangler. Show me the config file and the exact command before running anything. Do a dry run first. Deploy to a test address only, not my real domain. I'll log in to Cloudflare myself when it asks.

Nothing goes live without me reviewing it first. AI builds, I approve, then it deploys.

Step 8 · Automations

Make the site work for you

A site that just sits there is a brochure. Add the practical automations that generate revenue and save hours. Use what your booking tool already has before building anything custom.

Booking reminders

Reminders 24 and 48 hours ahead cut no-shows. Most booking tools have this built in. Write the message: address, parking, what to bring, cancellation policy.

Review asks

One short message after the visit with a clean Google review link. Send it once, only to people who opted in.

Lead capture

The contact form goes to one inbox you read, plus a list you own. Ask consent before email or text marketing.

Follow-up series

Three to five short emails for people who asked but didn't book: what to expect, timing, payment plans, booking link. Health claims come from the owner, not the AI.

Plan my automationsPlan only.

Read BRIEF.md and links.txt. I use {booking tool}. Plan booking reminders, a review ask, contact form lead capture and a short follow-up email series. For each: use the booking tool's built-in feature first if it has one, what I need to decide, and the order to set them up. Plan only. Don't sign up for anything or change any account.

Everything here is from my own experience building sites with AI. Tools, plans and menus change, so check current details before you rely on them.

By Ron Pascal

Ron Pascal has 12+ years in marketing and sales and has worked with more than 500 clients. He publishes the playbooks he uses with clients.

Contact Ron More about me →

Next guideHow to Get Your Business on Google Search and MapsSet up Search Console, Analytics and your Business Profile, confirm they work, and know what actually moves rankings.

Newsletter

Get new guides by email.

New guides and articles when they’re published. No spam, and you can unsubscribe anytime.