How to Build a Website with AI, Step by Step

TL;DR - This is where the work you've done in the last seven units finally meets code. You'll set up your project folder, introduce yourself to an agentic coding tool, and build your site in three stages - structure first, pages next, design pass last. It won't be perfect. That's what Unit 9 is for.

Estimated time: 2-4 hours (highly variable depending on your site's complexity)

Outcomes & What you'll make

By the end of this unit you'll understand:

• How to set up a project folder your agentic coding tool can work within
• How to write effective opening prompts for each build session
• Why building in stages - structure, then pages, then design - keeps things manageable

What you'll make:

• A working first version of your website - imperfect, but real.

Unit 8: Making your website

You've done a lot of groundwork to get here. In the next chapter we'll cover refining and debugging - so don't worry if everything isn't to your liking yet. This chapter is about getting something real on the screen.

Setting up your site folder

If you've followed the guide up until this point, you should have all the parts you need. Let's get them in order.

Create a folder somewhere on your computer, away from other important files. Something like Documents > My Website works fine. This is your project folder - and it matters, because your AI coding tool will work entirely within it. It won't reach outside of it, so everything it needs has to live here.

Here's what should be in the folder before you start:

• Your SITE PLAN.md - the brief, tech stack, UX rules, page layouts, all of it
• Placeholder media - even rough placeholder images are better than nothing. The AI can't conjure your actual photos, but it can build the layout around a placeholder.
• Any reference files you want the AI to follow - design guidelines, component notes, anything you've written down

That's genuinely it. The AI will generate the rest.

One useful habit to build from day one: add an instruction to your SITE PLAN.md that tells the AI to keep it up to date as the site evolves. Something like "After making any significant change, update the relevant section of SITE PLAN.md to reflect the current state." It sounds small, but it means your brief stays accurate across multiple sessions - rather than drifting out of sync with the actual site.

Introducing yourself to the agent

Tools like Antigravity or Codex are what's known as agentic coding tools. Unlike a regular chatbot, they can read and write files directly in your project folder, run commands, and make changes to your site in real time. Think of them less like a conversation partner and more like a contractor who works inside the folder you hand them.

The catch - as with all AI - is that they start each session knowing nothing. Every new chat is a blank slate. That's exactly why your SITE PLAN.md exists.

A good opening message to your agent looks something like this:

Hi! We're building a website together. Please read @SITE-PLAN.md to understand the project - the purpose, tech stack, page structure, and design guidelines are all in there. Once you've read it, let me know if anything is unclear before we start.

That's it. Let the agent read, let it ask questions, and then move forward together. Resist the urge to throw everything at it in one go.

For any session after the first, the pattern is similar:

Today we're working on [specific task]. Please read @SITE-PLAN.md as a reminder of the project. I want to [change X on Y page]. Ask if anything is unclear.

Short, specific, and pointed at a real file. The more precise your task, the less likely the agent is to go off-piste.

Let's build - from the bottom up

AI coding tools get overwhelmed when you throw too much at them at once. So we're going to build in stages, using the page structure you already mapped out in your SITE PLAN.md.

Stage 1: The foundation

Start by asking the agent to set up the basic structure of the site - the tech stack, the folder layout, the shared elements like the header, footer, and navigation. Don't ask it to design anything yet. Just the skeleton.

Please set up the foundation of the site based on @SITE-PLAN.md. I'd like the basic folder structure, the shared header and footer, and the navigation in place. Don't worry about the visual design yet - just get the structure right and ask questions if anything is unclear.

Once that's done, open the site in your browser and check the skeleton is there. Does the header appear? Does the navigation work? Don't move on until it feels solid.

Stage 2: Page by page

Now go through your page list from SITE PLAN.md, one page at a time. Start with the homepage, then work through the rest in order of importance.

Let's work on the homepage. Please refer to the homepage layout section of @SITE-PLAN.md and build a first version. Use placeholder images where needed. Ask if anything is unclear.

Check it in the browser as you go - on desktop and on mobile. It won't be perfect. The goal right now is coverage, not polish.

Stage 3: Design pass

Once all your pages exist in some form, ask the agent to apply your design system across the site - colors, typography, spacing, and any visual details from your SITE PLAN.md. Doing this after the structure is in place means you're not trying to fix layout and design at the same time, which tends to get messy fast.

A few things to keep in mind

Preview as you go. Most static site generators include a local preview - a version of the site running on your own computer so you can see changes without publishing anything. Your agent can tell you how to start it.

One thing at a time. If something isn't working, resist asking for three other changes in the same message. Isolate the problem, fix it, then move on.

The agent will make mistakes. It will sometimes misread your instructions, introduce a bug while fixing another, or confidently do something you didn't ask for. This is normal. If something goes wrong, describe what you expected vs. what you got, and ask it to fix it. If it keeps going in circles - the next chapter covers exactly that.

By the end of this chapter you should have a real, working website - imperfect, but yours. Onwards to the polish.

Learning reflections

• You just handed your plan to an AI and watched it build something real. How did that feel compared to how you imagined it would go?
• The guide suggests being specific and staged in your prompts rather than throwing everything at the AI at once. Is there an analogy in how you work with other collaborators - human or otherwise?
• Something probably didn't go quite right in this unit. What was it, and what did you learn from fixing it?