✕
Day 2

Port & Publish

Yesterday you designed a site in chat. Today we turn it into a real project with Claude Code, then put it live on the internet — with a web address you can share.

Today's plan

From Artifact to live site

  • Polish your content & copy with AI
  • Quick wins: accessibility & sharing
  • Open RemADE and meet Claude Code
  • Port your design into a real Astro project
  • Save it to GitHub
  • Publish to Cloudflare — then iterate
Why bother?

From chat to code

An Artifact is great for designing…
Fast to make, easy to change — but it lives inside the chat.
…a real project is for shipping
Your own files, a full history of changes, and a real web address. That's what we build today.
Your workshop

Meet RemADE

A free desktop app built for working with AI. Claude Code lives inside it.

⌨️
Terminals
Where you and Claude Code run commands.
🌳
Git tree
Every change, branch, and version at a glance.
👁️
Cmd-L preview
Pop open your site's live preview in one keystroke.
The big move

Port your design into Astro

In RemADE's terminal, ask Claude Code to recreate your Artifact as an Astro site. Hand it a screenshot and the text — it does the heavy lifting.

  • Claude Code scaffolds the project and builds your pages
  • Preview locally and refine together until it matches
  • You're now editing a real website
Polish

Refine content & copy with AI

Now make the words work as hard as the design. Ask Claude to tighten your headlines, fix the tone, cut the fluff, and proofread. Clear writing is part of good design.

Quick wins

Accessible & shareable

Accessibility
  • Alt text on every image
  • Readable color contrast
  • Real headings, in order
Sharing & search
  • A clear page title & description
  • A social preview image (so links look good)
Safety net

Save it to GitHub

GitHub is cloud backup with a memory. Every time you "commit," you save a snapshot you can return to. Claude Code can set this up and push your project for you.

Go live

Publish to Cloudflare

One command in the terminal puts your site on the internet, for free, with HTTPS:

$npx wrangler pages deploy dist

You'll get a live address like your-site.pages.dev to share with anyone.

The magic loop

Change → publish → repeat

✏️
Edit
Ask Claude Code for a change
📦
Build & deploy
Run the publish command
🔄
Refresh
See it live, then do it again
Optional

Your own domain name

Want yourname.com instead of pages.dev? You can buy a domain and connect it through Cloudflare. We'll show how if there's time — but a pages.dev address works perfectly.

You did it

You designed a site with AI, turned it into a real project, and published it to the world — and you can keep improving it any time. That's the whole loop. 🎉

1 / 1