Part IV: Launching the Site in an Afternoon | John D. Saunders
← All insights

Part IV: Launching the Site in an Afternoon

Video coming soon

01The finale

We're on part four of building a restaurant brand with AI, and this is my favorite part. The preliminary work is done; now it's time to lock in. If you haven't yet, watch the first three: taking the concept into Claude Design, building the design system, writing the brand guidelines, designing the website.

Now we launch. Six steps, four prompts. You can get this done in one afternoon.

02Three tools

You need three things. GitHub, the repository that holds the truth, the files for your website. Vercel, which ships the site so it's live. And Claude Code, which does all the work in between.

Vercel has a free tier and GitHub's free plan is enough for a simple site like this. You'll also need Claude Code installed as a native app on your computer (I run it on a separate Mac mini; a clean install or virtual machine is a good idea) and the site export from Claude Design.

GitHub holds the truth. Vercel watches it. Every change ships itself.

03Why no CMS

A content management system is only worth it when a client must self-edit structured content at volume. I'll do a separate series on Sanity and headless platforms, but here we're keeping it to a one-pager.

Our change interface is already plain English to an agent, so a CMS adds machinery for nothing. Instead, one folder: the menu, prices, hours and copy, everything a client would ever change, lives in one place as plain files. The design code reads from it and is never touched for a content change.

A price change is one line, and it can't break the layout because the layout isn't in the file. That file is also the canonical menu, the document of record.

A CMS adds machinery for nothing.

04Export the code bundle

In Claude Design, open the final website file and paste the prompt below. Every menu item, every price, the hours, the address, the hero caption moves into that one file.

Download the bundle. Takes about fifteen seconds and it's the last manual step.

Prompt 1: export the code bundle (Claude Design)

Turn this into a deployable static site and initialize it as a Git repo. Keep it dependency light. Create content/site.json and move all editable content into it. Do not change any visual design or restructure anything. Show me site.json so I can verify every field.

05Repo, deploy, live URL

Open Claude Code, drop in the zip (no need to unzip) and paste the prompt below. While it runs, have your GitHub and Vercel accounts ready. Claude Code will ask questions along the way; answer with logins and access as needed.

It also handles the launch pass: favicon, Open Graph and Twitter cards, robots and sitemap, and a Lighthouse check so the site loads fast. In part three the reunion line had vanished from the site; the launch audit caught it and put it back.

Then buy the domain (I use GoDaddy; Namecheap works too) and let Claude Code walk you through pointing it. The whole thing took me about fifteen minutes. The site went live with SSL, no publish button, no deploy day.

Prompt 2: repo, deploy, live URL (Claude Code)

Create the GitHub repo and push, then deploy to Vercel, link the project to the repo so every push to main auto-deploys, and give me the live URL. Add favicon, Open Graph and Twitter card, robots.txt and sitemap, and run a Lighthouse pass.

No publish button. No deploy day.

06Verification checklist

Paste this in as a prompt and check every item.

Prompt: verification checklist

Verify the live site: loads on mobile, Lighthouse score is high, the OG card renders with the reunion line, the favicon shows, the 404 page is on brand. Report anything failing and fix it.

07A change in two minutes

Once it's live, changes happen in Claude Code too. Here's a real one.

It updates the JSON, commits, and the change is live in under two minutes. Friday hours, 42 seconds. A new 404 page, 51 seconds.

Prompt 3: a content change

In content/site.json, change the Iru Oxtail Jollof to $48 and add the tag Zero Proof to the Zobo-Sorrel drink. Commit and push.

One sentence to live site in under two minutes.

08The two-lane system

Every future change is one of two things. Lane one is content: anything in site.json goes straight to main, live in minutes, zero design risk because the design is locked.

Lane two is visual: it goes to a branch with its own preview link. The client reviews on the private link while the live site stays untouched; approve, merge, live. Anything big enough to be a redesign goes back through the full pipeline, and any approved change that changes the rules gets written into the guidelines addendum.

Here's what a lane two request looks like.

Prompt 4: a new section on a branch

Add a private dining section between Visit and the footer. Follow brand guidelines v1.1, bone surface. Build it from the design system components. Put it on a branch called private-dining and give me the preview link.

The site and the law state one truth. That's what makes it maintainable a year from now.

09What it means for retainers

The client promise: any change live in minutes through one email. The agency reality: near-zero cost per change. Same retainer, better margin, faster client. It doesn't go obsolete.

To recap the whole series: the voice note (Whisper works), discovery and research, foundation and mood board, the identity system, the guidelines, the website and audit, and now the live site. Everything on this slide exists, and you watched all of it get made.

FAQs

Do I need a CMS for a site like this?+

No. For a one-pager, all editable content lives in one JSON file and Claude Code is the change interface. A CMS only earns its place when a client must self-edit structured content at volume.

What tools do I need to launch?+

GitHub to hold the files, Vercel to ship them (free tier works), Claude Code installed on your machine, and the code export from Claude Design.

How long does a content change take once live?+

Under two minutes. One sentence in Claude Code updates the JSON, commits, pushes, and Vercel deploys it automatically.

How do design changes get reviewed?+

They go to a branch with its own preview link. The client reviews privately while the live site stays untouched, then you merge. Anything redesign-sized goes back through the full pipeline.

More in this series

All insights →
Part I

Building a Restaurant Brand With AI

Part II

Writing the Law for an AI Brand

Part III

Designing the Website in Claude