LAB 01 · BUILD● READY

Launch a website from one conversation

OUTCOME / WEBSITE LIVE TODAY

STACK
Granola · Codex · Sites
LEVEL
Intermediate
TIME
58 minutes
PLATFORMWhich product’s names this page uses — BOTH shows every name.

PULLS OFF THE SHELFLoading the window Source of truth The command line Context window

What you'll walk away with: a real website, live on the internet at a URL you can text to someone — built from nothing but a conversation. This is the full stack of the library in one afternoon: signal in, source of truth in the middle, hands at the end.

You need: a claude.ai account, Claude Code installed, free GitHub and Vercel accounts, and a person or small outfit that wants a simple site — a friend's band, a church, a café, your own project. First time through takes an afternoon; the second one takes an hour.

● VIDEO WALKTHROUGH

Watch, follow, or move the work to your desktop.

OPEN VIDEO

Play the full walkthrough here, pause at each handoff, then continue into Step 1 below.

Step 1 — Have the conversation, keep the transcript

Talk to your "client" for a half hour to an hour. What do they do, who shows up, what should a visitor feel, what's the one action the site exists to produce (call, booking, visit)? Record it or take running notes — the transcript is the raw material. If they have photos or a logo, collect them in one folder.

This is Loading the Window in the wild: the transcript as plain text is nearly pure signal about what this site should be — better than any brief you'd write from memory. If the word signal isn't doing much for you yet, spend half an hour on What AI actually is first; everything below is that lesson with a client attached.

Step 2 — Turn the transcript into a plan

Fresh claude.ai chat. Paste the whole transcript:

This is a transcript of a conversation with [name] about a website for [their thing]. Extract what the site must accomplish, who it's for, the one action it should drive, and the tone. Then propose a one-page site plan: sections in order, what each says, which photos go where. Ask me anything that's ambiguous before finalizing.

Argue with it until the plan reads true to the conversation. This plan — not the chat — is your first artifact. Save it as a file: plan.md.

Step 3 — Give it hands

Make a folder on your computer for the project. Put plan.md and the photos folder inside. Open a terminal in that folder and start Claude Code:

Read plan.md and the photos folder. Build this as a simple, fast, beautiful one-page site. Set up a git repository, commit as you go, and tell me how to see it locally before anything goes online.

You don't need to understand the code it writes — you need to recognize whether the site matches the plan. That's the command line: the same window you've been using all along, now able to make files, run tools, and show you results.

Step 4 — Make the repo the source of truth

Have it push the project to GitHub:

Create a private GitHub repository for this and push it. Explain what a commit is in one paragraph, and show me how to revert one.

Now the project lives somewhere that isn't a chat: versioned, revertible, readable by any future window. This is also your safety net — from here on, nothing you or the AI does is unfixable, because revert exists.

Step 5 — Ship it

Deploy this to Vercel and give me the live URL.

It will walk you through connecting the accounts the first time. A few minutes later you have a URL. Open it on your phone. Text it to the client.

When it goes sideways (it will, once)

Wrong photo, weird layout, a build error you don't understand: don't debug — describe. "The header photo is stretched on mobile" is a perfect instruction. If a session gets long and confused, that's the window filling up: start a fresh session in the same folder and say "read this repo and plan.md, then continue." The repo is the memory; the chat never was.


Check your understanding: where does this project actually live, and what would a brand-new chat need in its window to keep working on it?

Use this process for future changes: they ask for changes next month. Open the folder, start a fresh session, describe the change. That loop — conversation to plan to repo to URL — is a service people happily pay for, and now you own every layer of it.

← All labs