How to build a website with AI.

Go to claude.com/download and install the desktop app (not just the browser tab). You need a paid plan to use Cowork.

Open the app, click the Cowork tab, and select a folder on your computer. That folder is where Claude saves everything it builds for you.

In the Claude app, click Customize in the left sidebar, then open Connectors. Under Desktop, find Claude in Chrome and connect it. Now Claude can open and look at web pages with you, which you'll use to show it sites you like.

When Claude builds a page it gives you a preview link. Click it to open the page in Chrome and watch your site come together.

Drop these into your folder: any design deck you have, your old website, and your fonts and colors. A starting point beats a blank page every time.

Paste this prompt. Answer the questions out loud. You'll get a short brief you reuse on every page.

I'm building a website and I'm not a designer. Before we design anything, interview me about how I want it to FEEL.

Ask me one question at a time using AskUserQuestion. Cover: 3 words for the vibe, brands or sites I admire, what a visitor should feel in the first 5 seconds, premium vs. playful, and anything I hate.

Then write me a one-page "design brief" I can paste at the start of every page we build.

Point Claude at your folder and your new brief: "Here's my deck, my old site, my colors and fonts, and my design brief. Use these as the source of truth for everything we build."

Don't write "prompts." Talk. The way you'd explain a task to a sharp person at the next desk, half-formed thoughts and all. Mine are a mess, run-on, vague, full of "kind of" and "not exactly," and it did not matter one bit.

When a section won't land, stop nudging the same one. Ask for options that go in genuinely different directions, then point at the one that's closest.

This section isn't it. Give me 3 versions that look and feel completely different from each other, and from what's here. I'll pick the closest.

You have to believe Claude can get there, because it can. Sometimes that means getting creative about how you help it. If words aren't working, show it a picture. If a picture isn't working, show it a video. Keep changing the input until it clicks.

ChatGPT's image generation is more advanced than Claude's at visuals. So I'd use it to generate different visual ideas, then feed those to Claude as a starting point. That was a huge unlock.

Gemini Omni (Google's video tool) is great for generating example animations. I wanted animated versions of my dashboards but didn't want to edit the video myself. So I uploaded a Loom of the dashboards to Gemini Omni and asked it to make an animated video of them. That gave Claude the direction it needed. In the end I had Claude build the final video from my raw assets, using Gemini Omni's version as the example to match.

My real dashboard (the Loom I recorded)

→

Gemini Omni's rough example (just for inspiration)

For the parts that matter most, headlines, key phrases, the core messaging, open a different chat inside the same project and go deep. Other parts, I'd read what it wrote back from my long-winded rambling, think "yep, that's great," and move on.

I use Wispr (voice-to-text) right inside Claude. For the fuzzy stuff, how I wanted a section to feel, I'd talk for a few minutes and upload the voice notes. Talking pulls more out of my brain than typing ever does.

Don't aim for polished. Get the sections and layout down first. Not sure what sections you need? Give Claude two or three sites you like and have it copy the structure.

Build a rough V1 of my [HOME] page as a single HTML file. Just the sections and layout, super rough, no polish yet.

Here are 2-3 sites I like: [paste links]. Copy how they STRUCTURE a page, not their words.

Use my colors, fonts, and design brief. Give me a preview link I can open in Chrome.

This is the trick most people miss: Claude reads screenshots better than its own design. When a section looks wrong, screenshot it and show it, plus a screenshot of what you want it to look like.

Here's a screenshot of my [section]. It looks [too plain / cluttered / off].

Make it look more like this: [paste a screenshot you like]. Keep my colors and fonts.

Polish one section at a time. Then close it. Come back the next day with fresh eyes, you'll catch things you couldn't see while you were in it.

The substance comes from you, but a first draft beats a blank page. Get Claude to write something you can react to and fix.

Draft the copy for the [X] section in my voice. I'll edit it.

My rules: no [words I hate], short sentences, specific numbers, lead with the result. Here's what this section needs to say: [bullet the points].

Ask for a mobile version and open the preview link on your phone. Most fixes happen here. Fitting on the screen isn't the goal, being absorbable on a small one is.

Give me a mobile version of this page and a preview link I can open on my phone.

Optimize for readability on a small screen, not just fitting: bigger text, fewer columns, most important point first.

Claude's designs can be pretty but quiet. Assume your reader scans, they will not read. Push the key points to jump out.

Assume my reader will NOT read, they scan. Make the important parts pop: bigger, bolder, higher contrast.

Fix anything small, greyed out, or hard to read. Show me a before and after.

You'll get stuck. Don't try to sound technical. Say exactly this:

I'm stuck. This isn't right but I don't know how to fix it. Can you help me figure out what's wrong with this?

Paste your real goals. This one decision shapes the whole technical setup.

Before we turn this into a real, hostable website, here are my long-term goals so the structure and hosting won't need a rebuild later:

1) Load time matters most. I'll have videos and interactive sections (some videos auto-play above the fold).
2) I'll add a blog and publish a lot of content.
3) I'll eventually sell a SaaS tool or courses on the site.
4) I'll add a custom tool/agent (e.g. one that lets visitors diagnose their own performance).

Recommend a setup (framework + hosting) that fits all of this, and explain it to me simply. Then set it up.

Claude will likely recommend Vercel for hosting. Go to vercel.com and create a free account. Easy part.

Claude will have you set up GitHub (where your code lives). Download it and follow the steps it gives you. You don't need to understand how they connect, Claude handles it.

If your code won't go live (a missing tool, a stuck push, whatever), don't fight it. Show Claude exactly what you see and let it find another way, like pushing live straight from your Terminal.

We're trying to push the site live and it's not working. Here's exactly what I see: [paste the error or a screenshot].

Walk me through getting it live another way, one plain step at a time. Assume I don't know how to code.

In your domain registrar (GoDaddy, Namecheap, etc.), update the DNS records Vercel gives you. Screenshot the settings page for Claude if you're unsure where to click.

When the deploy goes green, your site is live within seconds. Open your URL in an incognito window to see it without old cached versions.

Check changes in an incognito window and hard-refresh after every push. A hard refresh is Cmd + Shift + R on a Mac (Ctrl + Shift + R on Windows), it forces the page to reload from scratch instead of showing a cached old version. Normal windows hold onto the old version and fool you.

Sometimes the change is live but your screen isn't showing it. Screenshot what you see and send it to Claude.

A few times I kept saying "more, More, MORE," when really the change was already made, I just couldn't see it because the refresh wasn't working. Move in small steps, do your hard refresh, and remember Claude saves your work, so you can always revert to the last good version.

Once it's legible and passing, show it to two or three honest people and fold in their notes. You don't need a committee.