Why I'm not touching Claude Code for this
Here's the thing that surprised me, and it's the whole reason this tutorial exists. Two websites, built from the exact same brief, using the exact same tool. One looks like a template. The other looks like a brand. The only difference between them was how the prompt was written — not the tool, not the code, not a plugin stack.
Most "build a website with Claude" tutorials point you straight at Claude Code, or bury you in third-party plugins before you've even written a sentence. I want to show you the opposite: Claude Design, used directly, with a handful of deliberate habits layered on top. If you've got a Claude subscription, this costs you nothing extra, and it's genuinely the simplest path I've found to a website that doesn't scream "AI made this."
"If you just learn three or four simple tricks, you can easily create beautiful websites directly inside of Claude Design."
That's the promise of this tutorial, and I'm going to break every one of those tricks down step by step, the way I'd teach it if you were sitting next to me.
STEP 01Get into Claude Design
Navigate to claude.ai/design
This is included in your existing Claude subscription — there's no separate paywall to worry about. When you land there, you'll see a prompt box up top where you describe what you want built, and (usually) a row of starter templates below it.
Skip the template if it doesn't fit
I always reach for a template first when one's available — it gives Claude Design a head start. But at the time of this recording there wasn't a website template, so we go in with a blank prompt box instead. Don't force a template that doesn't match your brief; a clean prompt beats a bad-fit starting point every time.
This is exactly the point where most beginners freeze — staring at an empty prompt box, unsure what information Claude actually needs. That's what the next step fixes.
The 3-part prompt formula that actually works
A lot of people will tell you to warm up your prompt in regular Claude chat first, then paste the polished version into Claude Design. I don't do this, and I'd actively tell you not to either. Claude Design is exceptionally good at design work specifically — routing your prompt through a generic chat model first frequently makes the result worse, not better. Let the design-specialised model do what it's built for.
Instead, go straight to the Claude Design prompt box and always include these three things, every single time, no matter what you're building:
| What to tell it | Why it matters |
|---|---|
| What you want it to look like | Even a loose vibe — "fun, colourful, interactive" — gives Claude Design a direction. You don't need designer vocabulary. |
| Who the target audience is | Be specific about the real people who'll land on this page. "Residents of Boulder, Colorado who go to the farmers market each week" is far more useful than "customers." |
| What your goal is | The action you want the visitor to take — visit a table, book a call, sign up. This is what the layout and CTAs get built around. |
LOOK: fun, colourful, interactive website.
AUDIENCE: residents of Boulder, Colorado who come to the farmers market each week.
GOAL: get people to visit my table at the market.
Don't pretend to be a designer if you're not one. Describe the look in whatever language feels natural to you — "fun and colourful" is a completely valid brief. You don't need a fully formed vision before you start; Claude Design fills in the gaps.
Attach context files before you submit
Click the + icon → Attach file
If you have anything that describes your product or business — a price list, a menu, a one-pager — attach it. In the bakery example, a price list and a product menu both went in.
Tell Claude Design to actually use them
Attaching a file isn't enough on its own — add a line at the end of your prompt explicitly pointing to it, e.g. "Check the attached files for more context on what I sell." That one sentence is what turns a static attachment into real context.
Pick your model and submit
Two more settings live at the bottom of the prompt box before you hit submit:
- Design system — leave this unset for your very first pass, so you can see the baseline output before comparing it to a version with a design system applied. We'll build one properly later in this tutorial.
- Model — I always select Opus. It's the strongest option available for design-quality output.
Submit it. Sometimes Claude Design asks a couple of clarifying questions first; other times it goes straight to work. Either is normal.
STEP 05Judge your first draft honestly
The first result is usually... fine. In the bakery example, the output was colourful, on-brief, had the right "fun" energy — and still didn't wow anyone. That's normal, and it's not a failure of the tool. It's missing two specific things:
What a generic first draft looks like
Placeholder images where photos should be. Could belong to literally any brand. Fonts and colours feel like defaults rather than choices. Nothing about it says "this is my business."
What's missing
1. Personalisation — no real photos or brand-specific imagery.
2. A design system — no deliberate colour, type, or layout language guiding decisions.
The rest of this tutorial is just fixing those two gaps, one at a time.
STEP 06Personalise it with real (or AI-made) images
If you have genuine photos of your product, yourself, or your business — use them, every time. That's always going to beat anything generated. But if you don't have a photo library yet, here's the workaround I use:
Generate product images in ChatGPT
Feed it your menu or product list and ask it to create images of each item, plus any scene shots you need (e.g. your market stall). Download everything.
Re-run the same prompt in Claude Design — with images attached
Use the identical prompt from Step 2, but this time attach the menu file and every generated image. Add one line: "Use the attached images throughout the website."
This one change alone takes the site from "could belong to anyone" to something that visibly represents a specific business. It's the fastest personalisation win available.
Build a custom design system from inspiration
A design system tells Claude Design your colours, your fonts, and the overall feel you're going for — and it's the single highest-leverage thing you can add. Here's exactly how I build one, without touching Claude Code.
Open Design Systems → Create Design System
Give it a name up front — for the bakery example, "Blue Bakery."
Go find visual inspiration, not text descriptions
The easiest path I've found is browsing sites full of real, polished web design and screenshotting what resonates. My go-to galleries:
Search by category (I tried "bakery," found nothing, broadened to "food") and give yourself a few minutes to actually browse until two or three sites genuinely match the vibe you're after — not just the first thing you click.
Screenshot your favourites
Take at least one screenshot per site — scroll and capture a second if there's more worth showing. Two solid reference sites is usually enough.
Upload under "Fonts, logos and assets" and label your intent
Upload the screenshots, then in the notes field say clearly that these are inspiration only — not a site you own, and not something to copy outright.
Don't copy the layout or brand exactly — I just want the overall
colour palette, type feel, and mood carried into a new system.
Click Continue to Generate, then wait
Give it a few minutes. What comes back is a full breakdown — colours it extracted, fonts it selected, sample visuals showing the system in use.
Claude Design is genuinely strong at assembling coherent design systems. If the colour/font choices don't immediately make sense to you, that's fine — leave it as-is for now. You can always request changes later, once you see it applied to a real page.
Apply the design system and re-generate
Go back to your original prompt, open the Design System selector, and pick the one you just built ("Blue Bakery" in this case). Submit again.
The difference is immediate. Where the first pass felt generic, this version reads as intentional — a considered colour and type language, plus your own images layered on top. It stops looking like "a website" and starts looking like "your brand's website."
You'll likely still have a few missing pieces — in the example, two products didn't have generated images yet. Just go back to ChatGPT, generate the missing ones, and feed them in. Iteration is part of the process, not a sign something went wrong.
Refine with the comment tool
Once you're this far, you're not rewriting prompts from scratch anymore — you're pointing at specific things and asking for specific changes. This is where the built-in comment tool earns its keep.
Select the comment tool, then click the exact element
You don't need to know what a section is called ("hero," "CTA block," whatever) — just click it directly.
Describe the change in plain language
That's genuinely it. No design vocabulary required — just point and describe.
It removes the biggest friction point for non-designers: not knowing the name of the thing you want changed. Point, comment, done.
Add movement: video and scroll animation
At this stage the site already looks solid. If you want to push it up another level, movement is what does it — a looping video in the hero, an auto-scrolling carousel, cards that flip on hover. This part is a bit more fiddly inside Claude Design, but very doable.
Generate a short video with Gemini
A Gemini subscription includes free video generation. Prompt it directly, e.g.:
the baked goods being sold at the farmers market.
Download the result once it's ready.
Re-submit your prompt with the video plus reference screenshots
Attach the generated video, along with screenshots of any site whose layout (not colours — layout) you want to borrow. Be explicit about what's a layout reference versus what should carry over exactly:
section and the product cards. I don't want you to copy the
design or colours — they're purely representing the layout
I want you to use.
Iterate on placement
Don't accept the first layout as final. In the example, the video initially took up too much vertical space at the top — so the next comment was simply to move it side-by-side with text, referencing an earlier screenshot as the target layout. Claude Design adapted the video into that split layout automatically.
Turn on scroll animations
One more short instruction finishes the job:
The effect: content reveals progressively as the visitor scrolls, instead of the whole page just sitting there static. It's a small instruction with an outsized effect on how "produced" the final site feels.
"We started out with this. Then, with a design system and some of our own images, we were able to create this. And then with some movement and animations, we have this website."
Putting the whole system together — The Farmer's Table
Here's the same workflow applied end to end on a second project — a local restaurant called The Farmer's Table — so you can see how the pieces stack.
Starting point
ChatGPT-generated product images were already included, but there was no design system yet and no animation. Result: fine, but flat.
After the full workflow
A design system built from screenshots of an admired reference site. A video of a chef cooking, generated with a black background specifically so it could fade seamlessly into the page. Scroll animations revealing sections as the visitor moves down.
Requesting a plain black background on the generated video wasn't incidental — it's what let the video visually "melt" into the rest of the site instead of sitting in an obvious rectangular box. Small production choices like this are what separate a good AI-built site from a great one.
Cheat sheet — the whole workflow on one page
If you only remember one thing from this tutorial, remember the order: brief → personalise → design system → refine → animate. Here's the full sequence to run through every time.
My Claude Design checklist
Skip warming up the prompt in regular Claude chat. Go straight to Claude Design.
Every prompt states the look, the audience, and the goal — no exceptions.
Menus, price lists, briefs — attach them, then tell Claude Design to actually use them.
Always select the strongest available model for design-quality output.
Expect draft one to be "fine." The gap is almost always personalisation + design system.
Real photos win. No photo library yet? Generate one in ChatGPT from your own menu/product list.
Browse landbook.com, onepagelove.com, dribbble.com. Screenshot 2–3 sites you genuinely like.
Upload screenshots as inspiration (not a copy), generate the system, then select it on your next run.
Click the exact element, describe the change in plain language. No design jargon needed.
Generate a short video (Gemini), reference layouts via screenshots, then ask for scroll animations.