Build the site with Claude

This is the moment the last three guides have been building toward. You’ve got your brief, and a Project set up to keep everything together. Now you paste the brief, Claude builds, and a real, clickable draft of your website appears right beside the chat. From there it’s a conversation: you describe what to change, Claude changes it, and you repeat until it’s right. No code. No design software. Just talking to Claude the way you’d talk to a designer.

How does Claude show me the website?

When Claude builds your site, it opens in a live preview panel beside the chat — a feature called Artifacts. It isn’t a screenshot; it’s the working page, and you can scroll and click through it just like a real website. Artifacts is available on every plan, including free.

The chat stays on the left and the preview opens on the right. (On a phone, it opens over the chat and you flip between them.) Stay on the Preview tab — there’s a “Code” tab too, but you never need to touch it. And if for some reason a preview doesn’t open on its own, you can switch Artifacts on under Settings → Capabilities, or simply ask Claude to “show it as a live preview.”

How do I start the build?

Open the chat inside your Project, paste your brief, attach your logo and photos in the same message, and send. Claude builds a first draft and opens it in the preview.

Give that first draft a real read — scroll through it, click between the pages, notice what’s close and what’s off. It will not be final, and that’s exactly as it should be: this is a starting point, not a finished product. Almost nobody gets their site in one shot. The good part is what comes next.

How do I change the things I don’t like?

Describe each change in plain words, the way you’d tell a person — “make the headline smaller,” “use a warmer background,” “move the Call button to the top.” Claude updates the same preview in place, in real time.

This back-and-forth is the whole craft, and you’re already equipped for it. A few habits make it go smoothly:

• Ask for one or two changes at a time, not a long list. It’s far easier to see what worked.
• Be concrete, not polite-but-vague. “The text is too big — make it about half the size” beats “could you make it look a bit nicer?”
• If a change makes things worse, just say so. Ask Claude to put it back, or use the small version arrows at the bottom of the preview to step back to an earlier version.

Here’s what a round of changes might look like:

How do I make sure it looks good on a phone?

Most of your visitors will arrive on phones, so ask for it up front: tell Claude to make the site mobile-friendly and describe how it should behave on a small screen. The definitive check happens on your own phone once the site is live.

A good instruction sounds like: “Make sure this works well on a phone — one column, large tap-friendly buttons, readable text, and nothing cut off at the edges.” Claude builds responsively when you ask it to. You won’t get a perfect phone simulation inside the preview, so treat the real test as a step for after you publish (a later guide covers that): open the live site on your actual phone and walk through it the way a customer would. Anything that’s off, come back and describe the fix.

When is the website “done enough” to move on?

When the main action is obvious, the words sound like you, and it reads well on a phone. Don’t chase perfect — chase clear and honest. You can always come back and edit later.

Perfectionism is the single biggest reason small-business websites never go live. A clear, accurate, decent-looking site that’s actually on the internet beats a flawless one that sits unfinished forever. Get it to the point where you’d be glad for a customer to see it — then stop, and move on to publishing. You’re not carving this in stone; editing later is easy, and a whole later guide is about exactly that.

You’ve got a website you’re happy with, living in the preview panel. The next move is getting it out of Claude and onto your own computer as real files — the first concrete step toward putting it online. That’s Get your files out and organized, the next guide in this series.