How to Build a Website With Claude Design (Step by Step)

Someone told me the other day they'd just spent $5,000, and it took them about 5 months, to get their new business website. That seems crazy to me, because we can do it in a couple of hours in Claude Design.

I waited to make this tutorial because I was launching my new company, Half Day Thursdays. This is exactly how I set up Claude Design and built and launched that website, step by step, so you can do the same thing.

Teach Claude your brand first, then work out the layout and the copy, then hand Claude Design a brief, then edit, then send it somewhere that can host it. I published the video version on 2 September 2026. Claude Design is in beta so check Anthropic's guide if a button isn't where I describe it.

Play the walkthrough

Where Is Claude Design?

Claude Design sits at the bottom of the left sidebar in Claude, labelled Design. You can use it in the web app at claude.ai or in the desktop app. I prefer the Claude desktop app. It's where I do all my work anyway, so it makes sense to use it there.

Clicking Design opens a whole new page, which is handy because you can double screen them. Move it onto a second screen and you can work in Claude and Claude Design at the same time. You use Claude, with all it knows about you, to help you brief and write the material, and then feed that into Claude Design to make things visual.

Why Set Up a Design System First?

Set up a design system first because it's how you teach Claude what your brand and your business look like. When you first log in, Claude Design asks what you want to create: mobile designs, slides, documents, 3D objects, resumes, UI mockups, animations, emails, diagrams, flyers. Most people click flyer and start trying to work.

This is the first big mistake. If we're not even giving it a logo to start with, we're not going to get anything that looks any good or is remotely related to our business, our brand, our side hustle, whatever we're building this for.

Do this first instead:

1. Click design systems, then create a new design system.
2. Choose to create it there in Claude Design. Most of the time you have your design files and logos somewhere already.
3. Give it your company name and blurb. Mine was: "Half Day Thursdays. Learn to use AI to take care of the drudgery so you can focus on what you love."
4. Upload your fonts, logos and assets. I uploaded my primary logo, all my key logos, some of my icons, the font files, everything my designer gave me. You can also link GitHub, link code from your computer or upload a Figma file.
5. Upload your brand guidelines, the rules for how the logos, colours and fonts should all be used.
6. It asks for any other notes. I left that empty. When I build, I give it the words and a brief every time, so I'm not letting it make things up on its own.
7. Click continue to generation. It takes about 5 minutes. It might take 10 or 15 if you've got a heavier one like mine.

If you've spent money on a designer or time creating this stuff yourself, this is where you teach it to Claude.

How Do You Get Brand Guidelines Claude Can Read?

Get Claude to write your brand guidelines out in markdown. There are two ways, depending on what you've got.

You have a visual PDF from a designer. Mine is super in-depth, with the logos, colours and fonts all written out and demoed in one document. You can upload a PDF like that and Claude Design will help extract it. I'd still take it into Claude first and make a written version without all the visual stuff, so it's easier for AI to read. The prompt:

This is a copy of my brand guidelines PDF from my graphic designer. It's a visual PDF. Deeply analyse everything in here: all of the text, the way it's laid out, the images, everything. Then create a markdown version of my brand guidelines, with all the rules about how my logos, colours and fonts should be used in different scenarios, so I have a document that's easy for AI to parse.

You have no guidelines at all. Grab screenshots of your brand already being used: flyers, web pages, social media assets, anything. Then:

I want to build my brand guidelines but I don't have any yet. I'm going to give you examples of my brand on web pages, flyers and social media assets. Deeply analyse, like an expert graphic designer, how all of the logos, fonts, colours, typography and other assets are used. Build the rule set for my brand guidelines and give them to me in markdown format.

Put as much in as you can. Whichever method you choose, what you get out the other end are your brand guidelines: the logo system, the different variants and how they're used, the colour rules, logo placement, typography. It pulls out the colour codes for you automatically. This is how we lock our brand rules into Claude Design.

What Claude Design Builds From Your Brand

Claude Design turns your uploads into a draft design system, with a chat on the left and the system on the right. Mine came with a readme about the brand, an index of everything it had loaded, some templates for how a web page might look and some social media carousels.

It pulled out photos and mocked things up with my logo on them, which breathed some life into the brand. It set out how the logo should look: the red on the cream, the white on the brown, the black on the grey. Then it spotted that my little logo star gets used as bullets and punctuation through a page. I love this. That's a great find.

You can change anything in there two ways. Hit the edit button and click on an element to change its size or colour, or ask in the chat. I asked it to add an option for my foundation icons in my green accent colour, and it added them across all the colour accents.

Mostly it does a pretty good job. If you get your brand guidelines right, it's going to be pretty spot on in how it builds for you. Once you're happy, click publish. I set mine as my organisation default, so it's the one Claude Design automatically starts using.

How Do You Get a Layout That Converts?

Borrow the structure of a page somebody else has already spent the time and money testing. You could click new design and say "build me a website and make it look pretty", but that's not going to work very well. A website needs the words and the copy, and at least some structure around what goes where.

If you're not an expert at building websites, go and look at layouts you like. Search "high converting yoga teacher website examples" if you're a yoga teacher. Pinterest is a great one to explore, because it's filled with design mockups other people have invested in.

I used Creator HQ, an online creator brand that's closer to my industry: YouTube and email, then a product or service at the bottom end. Their page is huge. If I had to sit and think about how to lay that out on my own, it'd be pretty tricky. I screenshotted the whole page with the GoFullPage add-on and gave it to Claude.

Before you go mad at me for copying, I'm not copy pasting his website. I'm using it for analysis and inspiration. The prompt:

I've given you screenshots of the Creator HQ web page. I am not a sales page, website or UX expert, but I need to create one for my business, Half Day Thursdays. Go through this page like a world-class conversion rate optimisation expert and lay out the playbook: the exact section by section they have on their page, why they do that, and how the page flows. Then build me the playbook I need for my website as a reusable template, so I can use it again and again and understand what copy needs to go where and what information I need to collect for my own page.

What came back was a reusable blueprint. The trust and proof bar, the reaction proof, the demo scenes, anti-positioning, stakes, "this is for you if", a show-up bonus. I got it as a visual and as a document, so every time I want to build one of these pages I have the template to fill in with the right information and pictures.

How Do You Write the Copy in Your Own Words?

Get Claude to grill you until it has enough to write the page in your words. Think of it as if you'd hired a website designer. They're going to ask for a brief, do a discovery call and ask you to provide the copy.

If your business is well documented, this part is easy. I run a second brain with company DNA files in it: how we communicate, how we make money, who we help, about me, about the company, the proof and reviews we have.

A lot of people haven't done this, and they need to get it out of their head and onto the page. Even a great copywriter needs to do that first. So ask Claude:

I want you to grill me. Think like an expert copywriter trying to understand a business so they can write world-class copy for its website. Ask me all the questions you need answers to, so you can write this in my own words about my own business and not recycled AI garbage. You're mining me and my brain for everything you need to know and the type of wording we use. Keep going with your questions until you've got everything you need for this page.

Question 2 for me was "Who is the one person you're writing this page to?" That's a great question, because often we try to write for everyone. We try and boil the ocean, and it's much easier to write with one person in mind.

I'd Wispr Flow my answers back and brain dump my thoughts on each question until Claude has what it needs. Then I did the same for every page: my free AI masterclass page, my about page and the legal pages.

The Build Brief for Claude Design

The build brief is one document holding every page's layout and copy, written by Claude for Claude Design to follow. Once Claude had the blueprint and my answers, I asked it: "Can you create a prompt I can paste into Claude Design, or build me a full design brief?" It gave me a build brief for halfdaythursdays.com, page by page.

Back in Claude Design, start a new design, select the design system you built in the first stage (don't skip this) and paste the brief in. Then hit run and go and make a cup of coffee. Come back in maybe 10 or 15 minutes and you should have a version one draft of a full website design.

I absolutely love what mine came back with. It had my proof on the page: how many newsletter readers I have every week, how many YouTube subscribers, where I've been featured in the press. If I'd told Claude to just go and build a website, it wouldn't know any of that. It was pretty close to a one-shot website design.

It wasn't perfect. The proof section had placeholder images, so I pasted in my own screenshots. The about page was missing an image because I hadn't given it one. And it didn't look that mobile optimised yet, so expect to work a bit to get that right.

Edit, Comment, Chat or Tweaks: Which One to Use

Use comment when you can point at the thing you want changed, and chat when the change touches the whole site. Claude Design gives you four ways to change a draft.

After an edit, click save in the top left so it saves those edits. Chat can sometimes struggle to work out what you mean when the instruction is about one element, and that's where the comment tool is handy. Anthropic's own guide draws the same line between comments for targeted changes and chat for structural ones.

To add photos, use browse files on the right hand side.

How Do You Put the Website Live?

Send the design to a tool that can build and host it, because a Claude Design draft is only the design of a website. No one can see it or use it yet. There are two options in the top right.

In my recording the send options sat under "more formats and apps": Claude Code, Canva, HyperFrames and Replit. Replit's guide describes it under Share, then Send to, and says the option may not show for every account yet, so your menu may look different to mine.

I like to build in Replit because it takes care of the technical stuff. You can host it there, press publish and your website is live. If you like using Claude Code, you can send it there as well. You authorise the Replit connector in Claude, and after that both Claude Design and your normal Claude can work with Replit.

One thing to know. If you're not specific, it might only send the one page you're working on. Ask it: "Can you package up this website design so that I can build the full setup of all the pages in Replit?"

What landed in Replit was a shot for shot remake of every page. Then I clicked publish in the top right. You can take the replit.app address it gives you if you don't care about the domain, or enter the domain you own, click connect and it walks you through the setup. My main sales page, for my free Done By AI masterclass, went live on halfdaythursdays.com.

Claude Design Website FAQ

Do I need to be a designer to build a website with Claude Design? I'm not a sales page, website or UX expert. I had Claude analyse a proven layout and grill me for the copy before Claude Design built anything.

How long does it take? A design system takes about 5 minutes to generate, or 10 or 15 for a heavier one like mine. Allow maybe 10 or 15 minutes for the first full website draft. With the briefing and editing either side, it's a couple of hours.

Can Claude Design publish a live website on its own? Not a working one. Publish to web gives you a shareable link to the design for feedback. To launch, send it to Replit or Claude Code and publish from there.

Which Claude plan do I need? As of October 2026, Anthropic's help centre lists Claude Design as available in beta on Pro, Max, Team and Enterprise plans. On Enterprise it's off until an owner turns it on.

Can I use my own domain? Yes. In Replit you enter your domain, click connect and it walks you through it. If you don't care about the domain, you can use the replit.app address it gives you.

Is the first draft mobile friendly? Mine didn't look that mobile optimised straight away. Plan to ask for it in the chat and work on it.

Claude Design to Live Website

That's Claude Design to live website. It is that easy. We built our design system into Claude Design. We worked on the structure of the page and the copy. We got the mockup, tweaked it to how we wanted it, then sent it into a vibe coding tool and hosted it straight away.

I test AI on my own business and send what works every week, with the full prompts. You can join below.