Build or Rebuild Your Website With an AI Coding Agent

🗂️ The agent works inside a folder

Your whole site lives in one project folder on your computer. The agent can see every file in it, edit them, and create new ones. You point the agent at the folder and start talking.

💾 Save points are your safety net

Use version control (a system that snapshots your project at each step). Every time something works, you save a checkpoint. If the agent ever breaks something, you roll back to the last good state in seconds. This removes all fear from experimenting, you can never permanently break anything.

⭐ The context file is your most important habit

Create a plain-text file in your project (a "project instructions" or "context" file) that tells the agent how your site works: your goals, your tone of voice, your page structure, your design rules, your dos and don'ts. The agent reads this every time. Without it, you repeat yourself constantly. With it, the agent stays consistent and on-brand. This one file is the difference between a frustrating experience and a great one.

📥 Bring what you already have

Give Claude your real materials before it plans anything. The more true context it has, the more on-brand and on-strategy the rebuild will be.

• Your old site: have Claude read and index every page so nothing important gets lost.
• A vision or strategy doc: point Claude to it so the new site reflects where you are going, not just where you have been.
• Brand guidelines: point to them or upload them so your voice, colors, and logo stay consistent.
• Connect your docs: turn on the Google Drive connector in the Claude app so Claude can read these directly, or just download the files into your project folder.

🔍 Audit what exists

Before replacing your site, understand it. What pages do you have? What's outdated, redundant, or unclear? What actually earns its place?

🎯 Define the job of the site

Every page should have one job and one main action you want a visitor to take. If you can't name the action, the page isn't ready.

✂️ Decide keep / rewrite / cut

Go through your existing content and sort every piece into one of three buckets. Most sites are improved more by cutting than by adding.

⚡ Pick a simple, fast foundation

For most sites, a personal site, a small business, a portfolio, a blog, a lightweight static setup is the right answer. It's fast, cheap to host, secure, and easy for the agent to work with. Let the agent recommend the simplest thing that meets your needs, and push back if it suggests something heavier than necessary.

🧱 Build the shell once, reuse it everywhere

Start with the parts every page shares: the header, the navigation, the footer, the overall layout. Get these right once and every page inherits them. Consistency comes for free.

📄 Build one page at a time

Homepage first, then the next most important page, and so on. After each one, look at it before moving on.

🔁 The review loop is the skill

This is the rhythm you'll use forever:

1. Ask for a specific, small change.
2. Read what the agent changed (it will show you).
3. Look at the result in your browser.
4. Say what's right and what's wrong.
5. Save a checkpoint when it's good.

🎨 Design with restraint

Good-looking sites usually do less: a couple of fonts, generous spacing, a small color palette, clear hierarchy. Tell the agent your taste and ask it to keep things clean rather than busy.

🏅 Credibility is content

Search engines and AI tools reward content that demonstrates real experience and expertise. Write like someone who has actually done the thing. Include who you are and why you're qualified. Add author/bio information on pages where it matters. First-hand experience, specifics, and a clear human behind the words all build trust.

📝 On-page basics, done right

Each page needs a clear title, a short description that summarizes it, sensible headings, descriptive text on images, and clean, readable web addresses. These are small and boring and they matter a lot. The agent can add them across the whole site quickly.

🧩 Structured data

This is hidden, machine-readable information that tells search engines and AI exactly what a page is, an article, a person, a business, a product, an event. It helps them display and cite your content correctly. Ask the agent to add the right type to each page.

🤖 The technical files that let crawlers in

A few small files do heavy lifting:

• A sitemap, a list of all your pages so crawlers find everything.
• A crawler-rules file, tells automated visitors what they may and may not access.
• An AI-instructions file, a newer, plain-text file that tells AI assistants what your site is, who's behind it, and how to understand your most important content. As people increasingly find businesses through AI assistants instead of search, this is becoming a real edge. Most sites don't have one yet.

🔗 Connect your pages

Link related pages to each other in the body text. It helps visitors, and it helps crawlers understand which pages are most important.

🚀 Publishing is its own step

"Working on my computer" and "live for the world" are different. You'll move your site to a hosting service (several good ones are free for small sites), connect your own web address, and confirm everything works in public.

✅ Check quality before and after launch

Two things to verify: performance (does it load fast?) and accessibility (can people using assistive technology, or just a phone in sunlight, actually use it?). The agent can test both and fix most issues it finds.

📊 See what's happening

Add a privacy-respecting analytics tool so you know what pages people visit and where they come from, including, increasingly, whether they arrived via an AI assistant.

🔁 The maintenance loop is the same loop

Updating your live site uses the exact rhythm from Lesson 3: describe the change, review it, preview it, save a checkpoint, publish. Once you've done it twice it's muscle memory. Your site stops being a frozen thing you're afraid to touch and becomes something you improve casually.