Shipping with Claude · Live Demo
SECTOR 012026
00 · Opening Sequence

Ship a website.
In one sitting.

Claude Code Web · GitHub · Cloudflare Pages.
A live demo. Not a tools lecture.

▸ Press → to begin transmission
TITLE · 01
Context Engine
01 / 15
Shipping with Claude · Live Demo
SECTOR 02THE PROMISE
01 · The Promise

In the next 20 minutes, we go from an empty folder to a live website on the internet.

No agency. No developer waiting list. No FTP.
Then we change it on the fly — from a phone — and watch it redeploy.

OPENING · 02
Context Engine
02 / 15
Shipping with Claude · Live Demo
SECTOR 03THE STACK
02 · Three Pieces

Three tools.
One workflow.

01 · Storage

GitHub

Holds every version of your project. The coordination layer.

02 · Builder

Claude Code Web

An AI engineer with its own cloud workstation. You file tasks; it ships code.

03 · Publisher

Cloudflare Pages

Watches GitHub. Turns every change into a live URL — production or preview.

THE STACK · 03
Context Engine
03 / 15
Shipping with Claude · Live Demo
SECTOR 04GITHUB
03 · GitHub

Google Drive for code,
with superpowers.

  • Stores the project's files in one place.
  • Remembers every version — like Docs history, but stronger. Roll back anything.
  • The coordination layer. Claude reads & writes here. Cloudflare watches here.
GITHUB · 04
Context Engine
04 / 15
Shipping with Claude · Live Demo
SECTOR 05CLAUDE CODE WEB
04 · Claude Code Web

An AI engineer
with its own cloud workstation.

  • Lives at claude.ai/code — browser & Claude mobile app. No install.
  • Connect GitHub once. From then on, you file tasks: "build me X."
  • Each task spins up a fresh sandbox, works on a branch, opens a Pull Request.
  • Sessions persist. Start on your laptop, check in from your phone.

Currently in research preview · requires a paid Claude plan (Pro, Max or Team).

CLAUDE CODE WEB · 05
Context Engine
05 / 15
Shipping with Claude · Live Demo
SECTOR 06MENTAL MODEL
05 · The Shift

You're not opening a code editor.
You're filing a ticket with an engineer who works in the cloud — and shows you the result via a link.

THE SHIFT · 06
Context Engine
06 / 15
Shipping with Claude · Live Demo
SECTOR 07CLOUDFLARE
06 · Cloudflare

The publish button
plus a unique URL for every change.

  • Connects to a GitHub repo. Every push to main → production update.
  • Every PR gets its own preview URL. Stays updated as new commits land.
  • Free tier: unlimited bandwidth, HTTPS, custom domains.

This is the bridge that makes the whole loop real — your audience can open the preview URL on their own phones, in real time.

CLOUDFLARE · 07
Context Engine
07 / 15
Shipping with Claude · Live Demo
SECTOR 08THE LOOP
07 · The Loop

How they actually connect.

Youfile a task
─▶
Claudeopens a PR
─▶
Cloudflarebuilds preview
─▶
Youiterate
─▶
Mergelive

One loop. Repeat as many times as you need.

THE LOOP · 08
Context Engine
08 / 15
Shipping with Claude · Live Demo
SECTOR 09LIVE
08 · Live

Now let's
actually build it.

~10Minutes
9Steps
$0Cost
LIVE · 09
Context Engine
09 / 15
Shipping with Claude · Live Demo
SECTOR 10THE SCRIPT
09 · The Script

The 9 steps, in order.

01Create GitHub repo cohort-landing. Tick "Add a README".
02Cloudflare → Pages tab → Connect to Git → preset None, output /.
03Open claude.ai/code, pick the repo.
04Paste the prompt. (Next slide.)
05Talk while it runs — point at the task log and new branch.
06PR opens. Cloudflare posts a preview URL within ~60 seconds.
07Audience opens preview URL on their phones.
08Iterate in the same task — change headline, darker buttons, add a fourth service.
09Merge. Production updates in ~30s. "That's it. You just shipped."
THE SCRIPT · 10
Context Engine
10 / 15
Shipping with Claude · Live Demo
SECTOR 11THE PROMPT
10 · Paste This

Paste this into Claude Code Web ─▶

Build a landing page for "Founder Cohort", a 6-week
cohort-based coaching program for early-stage founders.
Single index.html, Tailwind via CDN.

Sections: hero with cohort dates and "Apply" CTA,
who this is for (3 personas), 6-week curriculum breakdown,
instructor bio placeholder, 3 testimonial placeholders,
FAQ (5 items), application form (mailto), footer.
THE PROMPT · 11
Context Engine
11 / 15
Shipping with Claude · Live Demo
SECTOR 12THE MOMENT

Open this URL
on your phone.

The preview is live. It's on the real internet.
Every change we make from here on, you'll see refresh — on your own device.

▸ Live preview · synchronizing
THE MOMENT · 12
Context Engine
12 / 15
Shipping with Claude · Live Demo
SECTOR 13ITERATE
12 · The Iteration

Same task. New request.
Watch the preview refresh.

  • "Change the hero headline to: Scale your business without scaling your hours."
  • "Make the buttons darker and add more rounding."
  • "Add a fourth service called Strategic Planning."

Same branch. Same preview URL. The PR updates in place — and the room watches it happen on their phones. This is the moment they actually get it.

ITERATE · 13
Context Engine
13 / 15
Shipping with Claude · Live Demo
SECTOR 14SO WHAT
13 · Why This Matters

For most teams,
this changes the math.

  • Marketing landing pages, in an afternoon.
  • A/B variants without booking a developer.
  • Event pages, lead magnets, microsites — same loop.
  • Cost: ~$0 for everything you saw today (Claude plan aside).

This won't replace a developer for complex apps. But for 80% of marketing-site work, the ROI of waiting on someone else doesn't make sense anymore.

SO WHAT · 14
Context Engine
14 / 15
Shipping with Claude · Live Demo
SECTOR 15Q&A
14 · Questions

Questions?

Custom domains?
Cloudflare Pages → add domain in dashboard, DNS auto-routes.
Can I edit it later?
Yes — anyone with GitHub access can. New task, new PR.
More complex sites — bookings, member portals?
Same loop, plus tools like Cal.com & Stripe. Bigger conversation.
Cost?
Cloudflare free. GitHub free. Claude paid (Pro & up).
Production-ready?
For marketing sites: yes. For client-data apps: needs more care.
Privacy of preview URLs?
Public by default. Cloudflare Access can lock them down.
Q&A · THANK YOU
Context Engine
15 / 15
← → navigate · F fullscreen · ESC exit