Shipping with Claude · Live Demo
2026
00 / Opening

Ship a website.
In one sitting.

Claude Code Web × GitHub × Cloudflare Pages.
A live demo, not a tools lecture.

Press → to begin
01 / 15
Shipping with Claude · Live Demo
The 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.

01 / Opening
02 / 15
Shipping with Claude · Live Demo
The 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.

02 / The Stack
03 / 15
Shipping with Claude · Live Demo
GitHub
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.
03 / GitHub
04 / 15
Shipping with Claude · Live Demo
Claude 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).

04 / Claude Code Web
05 / 15
Shipping with Claude · Live Demo
The Mental 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.

05 / The Shift
06 / 15
Shipping with Claude · Live Demo
Cloudflare Pages
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.

06 / Cloudflare
07 / 15
Shipping with Claude · Live Demo
The Loop
07 / The Loop

How they actually connect.

Youfile a task
Claudeopens a PR
Cloudflarebuilds a preview
Youiterate
Mergelive

One loop. Repeat as many times as you need.

07 / The Loop
08 / 15
Shipping with Claude · Live Demo
Live Demo
08 / Live

Now let's
actually build it.

~10Minutes
9Steps
$0Cost
08 / Live
09 / 15
Shipping with Claude · Live Demo
The 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."
09 / The Script
10 / 15
Shipping with Claude · Live Demo
The 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.
10 / The Prompt
11 / 15
Shipping with Claude · Live Demo
The 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.

11 / The Moment
12 / 15
Shipping with Claude · Live Demo
Iterate
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.

12 / Iterate
13 / 15
Shipping with Claude · Live Demo
So 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.

13 / Why This Matters
14 / 15
Shipping with Claude · Live Demo
Q&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.
14 / Q&A · Thank You
15 / 15
← → navigate · F fullscreen · ESC exit