How to Build a Website With AI: From Brief to Live Site

To build a website with AI, you describe the site in plain English, let an AI tool produce the pages, then review, correct and publish them. You can do that inside an AI website builder that hosts the site for you, or with an AI agent like Claude Code that writes real files you own and can put on any host, such as Vercel.

Three ways to build a website with AI

The tools differ less in how clever the AI is and more in where your site ends up living. That decides what you pay every month and how easily you can leave.

Wix can now draft a site from a single prompt, and Squarespace and Framer offer similar AI builders, but the site lives on their platform for as long as you pay. Browser app builders write real code and host it for you, usually billing in credits.

The detailed trade-offs are in our Claude Code vs Lovable comparison, and current prices for each tool are in the best vibe coding tools.

A quick way to decide

• Pick a website builder if you want one bill and a drag-and-drop editor, and you will rarely change the site.
• Pick a browser app builder if you want something working within the hour and don't mind paying in credits.
• Pick an AI agent if you want a custom design, full ownership, and room to add pages, a blog or small tools later.

When I build sites for clients, I default to the agent route, because the client ends up with files they can take anywhere. The rest of this guide follows that route from an empty folder to a live site.

What you need before you start

Step 1: write a one-page brief

The brief decides most of the quality. AI is very good at turning clear instructions into pages, and very bad at guessing what makes your business different.

Fill this in and save it as brief.md inside an empty project folder:

BUSINESS: [NAME], [WHAT YOU SELL], [AREA YOU SERVE]
AUDIENCE: [WHO BUYS AND WHAT THEY WORRY ABOUT BEFORE BUYING]
MAIN ACTION: [BOOK A CALL, REQUEST A QUOTE, CALL OR BUY]
PAGES: Home, Services, About, Contact
PROOF: [REAL REVIEWS, YEARS IN BUSINESS, CERTIFICATIONS]
FACTS THAT MUST BE EXACT: [PHONE, ADDRESS, HOURS, PRICES]
TONE: [THREE WORDS, FOR EXAMPLE WARM, EXPERT, PLAIN]
LOOK: [BRAND COLORS AS HEX CODES, FONTS IF YOU HAVE THEM]
SITES I LIKE: [2 OR 3 LINKS, AND WHAT YOU LIKE IN EACH]
NEVER: Invent reviews, numbers or awards. No stock-photo clichés.

Step 2: set up the folder and a safety net

1. Open the project. In the Claude desktop app, click the Code tab, choose Local, click Select folder and pick your project folder.
2. Turn on version history. Ask Claude to set up Git and commit after every version that works. Git is a free tool that saves snapshots of your project, so you can return to any earlier version.
3. Save your rules. Ask it to create a CLAUDE.md file from the tone, look, exact facts and "never" list in your brief. Claude Code reads that file at the start of every session, and our CLAUDE.md guide has ready-made templates.

Claude Code also keeps its own checkpoints, which you can roll back with /rewind. Git is the permanent safety net, so keep both.

Step 3: generate the first version

Pick the simplest technology that fits. For one to five pages, plain HTML and CSS is enough: there is no build step and no framework to keep patched. If you plan a blog with many articles, ask for Next.js instead, and Claude Code will tell you if it needs to install anything first.

Start in plan mode so Claude proposes before it writes. In the desktop app, choose Plan in the mode selector next to the send button; in the terminal, press Shift+Tab until you see plan mode.

Read brief.md and CLAUDE.md. Plan a [NUMBER]-page website for this
business in plain HTML and CSS, mobile first. For each page, list the
sections, a draft headline for each section, and anything you need
from me. Do not write code until I approve the plan.

Answer its questions and approve the plan. Then switch to Manual mode to approve each change, or Accept edits to review afterwards, so it can build.

To see the result, open the Browser pane with Cmd+Shift+B on Mac or Ctrl+Shift+B on Windows, and ask Claude to open index.html there.

Step 4: refine it one section at a time

This is where the site becomes yours. Short, specific messages work far better than long essays, and each one is easy to undo.

• One change per message. Small steps keep mistakes small and easy to undo.
• Show, don't describe. Drag a screenshot into the prompt box and say what to change.
• Check phone width often. Many of your visitors will arrive on a phone.
• Use real content only. Never publish AI-invented reviews, client logos or statistics; it misleads customers and can break consumer protection rules.
• Undo, then shrink the request. If a change breaks something, ask Claude to undo it or run /rewind, then try a smaller step.

Step 5: publish it on Vercel

Vercel is a hosting service: it keeps your site online and gives every deployment a free vercel.app address you can share before you own a domain.

Netlify and Cloudflare Pages also host static sites and have free plans. Read each one's terms on commercial use before you rely on it for a business.

Option A: drag and drop, no terminal

1. Open Vercel Drop. Go to vercel.com/drop while logged in (how Vercel Drop works).
2. Drop the folder. Drag your project folder onto the page.
3. Deploy. Choose your team, name the project and click Deploy. You get a live URL when it finishes.
4. Update later. Drop the folder onto the project in your Vercel dashboard, and Vercel publishes a new production version.

Option B: let Claude Code deploy it

Ask: "Deploy this site to Vercel production with the Vercel CLI and walk me through logging in." The CLI (command-line tool) needs Node.js, and Claude will tell you if it's missing. These are the commands it runs, and on Windows they are the same in PowerShell:

# Install the Vercel command-line tool (needs Node.js)
$ npm i -g vercel
# Sign in: a browser window opens
$ vercel login
# Create a preview deployment to check first
$ vercel
# Publish to production
$ vercel deploy --prod
$ 

Once you edit the site often, connect the project to a GitHub repository instead. Vercel then deploys every push automatically, with previews for side branches and production for your main branch.

Step 6: connect your domain

1. Add the domain. In your Vercel project, open Settings > Domains and click Add Domain.
2. Accept the www version. If you add example.com, Vercel suggests adding www.example.com too and recommends www as the main address.
3. Add the DNS records that Vercel shows, at your registrar (the company you bought the domain from).
4. Wait for the check mark. DNS changes can take a while to spread, and the HTTPS certificate (the padlock) is set up for you.

Step 7: SEO basics so Google can find you

SEO (search engine optimization) means making pages easy for search engines to understand and worth showing. Google's own SEO Starter Guide is short and readable, and these are the parts that matter most for a small site.

Two things you can skip: Google says it doesn't use the meta keywords tag, and length alone doesn't help a page rank.

Do an SEO pass on the whole site:
1. Write a unique title (under 60 characters) and meta description
   (under 155 characters) for every page, with the business name and area.
2. Add descriptive alt text to every meaningful image.
3. Create sitemap.xml and robots.txt for https://www.[YOUR DOMAIN].com
4. Add LocalBusiness JSON-LD using only facts from brief.md.
   If a value is missing, ask me instead of inventing it.
5. List anything you could not do and why.

Tell Google the site exists

1. Add a property. In Google Search Console, add a Domain property. Google verifies it with a DNS record at your registrar, and it covers both the www and non-www versions.
2. Submit the sitemap. In the Sitemaps report, enter your sitemap URL.
3. Request indexing. Inspect your homepage URL and click Request indexing.

Google treats a sitemap as a hint, and requesting indexing doesn't guarantee a page gets indexed. It often takes a day or so, and sometimes a week or two.

Can you build an app with AI the same way?

Yes, for simple apps. A booking tool, a quote calculator or a small client portal follow the same steps, but the risk changes once there are user accounts, payments or stored customer data.

Use established services for logins and payments rather than custom code, keep test data separate from live data, and have a developer review the app before launch. Read is vibe coding bad for the real risks and a safety checklist.

What to do next

Write your brief tonight with the template above, even if you won't build until the weekend, because it is the step that most decides quality. Then build only the home page, publish it with Vercel Drop to a free vercel.app address, and look at it on your phone before adding more pages.

If you'd rather start with a single landing page, follow how to vibe code a website prompt by prompt. The Builders course goes deeper on planning, customer psychology and the SEO setup behind a site that brings in enquiries.