Back to the blog

Blog · No. 09 · Beginner

Claude Design (the website builder you didn't know you had).

Portrait of Myk Masuku, author of AI for Normies
Myk
25 April 2026 · 6 min read
Beginner

A few weeks ago, I asked Claude to design a website. Not to write the code for a website. Not to describe what a website should look like. I asked it to actually design one, with pages, colours, fonts, navigation, and a newsletter signup form. It did the whole thing in about four minutes.

The tool is called Claude Design. It lives at claude.ai/design, and if you have a Claude account, you already have access to it. You probably just did not know it was there. Most people do not.

Here is how it works, what it is good at, and how to get your finished website out of it when you are done.

What you see when you arrive

Go to claude.ai/design in your browser. You will see a screen that looks like this:

The Claude Design landing page, with numbered annotations highlighting the project type tabs, project name field, style choice, Create button, and saved projects area
The Claude Design home screen. Everything starts from here.

Let me walk you through the numbered labels:

  1. Pick what you are building. You can create a prototype (a website or app), a slide deck, start from a template, or choose "Other" for anything else. For a website, pick Prototype.
  2. Name your project. Give it something descriptive. "My business website" or "Newsletter landing page" works fine.
  3. Choose a starting style. Wireframe gives you a rough sketch. High fidelity gives you something polished with colours, fonts, and proper styling. If you want something you could actually use, pick High fidelity.
  4. Start building. Once you have a name and a style, hit Create. That is it.
  5. Your saved projects. Everything you have built before shows up here. You can go back and change things whenever you like.

What happens after you click Create

Once your project is open, you land in an editor that looks like this:

The Claude Design editor showing a conversation with Claude on the left, a file list in the middle, and a live preview on the right
The editor. Your conversation with Claude on the left, the files it built in the middle, a preview on the right.

There are three panels:

  1. Your conversation with Claude (left). This is where you describe what you want. You type in plain English, just like you would in a normal Claude chat. "I want a website for my bookshop with a homepage, an about page, and a contact form." Claude will ask a few questions to nail down the details, then start building.
  2. The input box (bottom left). After the initial build, you can ask for changes here. "Make the header bigger." "Change the accent colour to blue." "Add a pricing section." Claude updates the files in real time.
  3. The files Claude created (middle). These are actual website files: HTML pages, a stylesheet, scripts. You do not need to understand them. Claude handles all of that. But they are there if you ever want to look.

On the right, you get a live preview of what your site looks like. Click any file to see it rendered. Click "Open" to view it full-screen.

What to say to Claude

The best results come from giving Claude a clear picture of what you want. You do not need to be precise about fonts or pixels. You need to be clear about the feel. Here is the kind of thing that works well:

"Design a website for my photography business. Minimal, elegant, lots of whitespace. I want a portfolio page with a grid of images, an about page, and a contact form. The feel should be like a gallery, not a tech startup."

Claude will ask follow-up questions: what kind of typography, how many pages, what colours. Answer them and it starts building. The whole thing usually takes a few minutes.

Getting your website out

This is the part people always ask about. You have a beautiful website inside Claude Design. How do you get it onto the actual internet?

Click Share in the top right corner. A menu drops down with several options:

The Share menu in Claude Design showing options including Download project as .zip, Export as PDF, Export as standalone HTML, and Handoff to Claude Code
The Share menu. "Download project as .zip" is the one you want.

The one you care about is "Download project as .zip". Click it and you get a zip file containing every page, every stylesheet, every script. These are real, working website files. You can upload them to any web host.

Four steps, start to finish

1. Go to claude.ai/design

Pick "Prototype", name your project, choose "High fidelity", and click Create.

2. Describe what you want

Tell Claude about your site in plain English. What pages, what audience, what feel. It will ask a few questions, then build.

3. Refine

Ask for changes in the chat. "Make the heading larger." "Add a testimonials section." Claude updates the files live.

4. Download

Click Share, then "Download project as .zip". You now have a complete website you can put anywhere.

What it is good at (and what it is not)

Claude Design is genuinely impressive for certain things. Landing pages, portfolio sites, event pages, small business websites, newsletters. If you need something that looks professional and you do not have a designer, this is remarkably good.

It is less suited for complex web applications with user accounts, payment processing, or databases. But that is not what most people need. Most people need a clean, professional page that says who they are and what they do. Claude Design handles that extremely well.

The site you are reading right now started its life in Claude Design. I described what I wanted, Claude built the pages, I downloaded the zip, tweaked a few things, and deployed it. The whole design phase took less time than it takes to cook dinner.

One thing to know

Claude Design is currently labelled "Research Preview", which means Anthropic is still developing it. It works well right now, but it will get better. If you have a Claude Pro or Team account, you already have access. Just go to claude.ai/design and start building.

And if you get stuck, you can always just ask Claude. In the chat panel, type "I am confused about how to get my files out" or "Can you make this look more professional?" It is genuinely helpful at explaining itself.

Portrait of Myk Masuku, author of AI for Normies
Myk
Writes AI for Normies from a kitchen table in Berkhamsted.
More about Myk

The weekly letter

If you liked this, there's more where it came from.

One short email on Fridays. One thing I tried, one thing you could try, a link or two worth reading. Nothing else.

By subscribing, you agree to me using your email to send the weekly letter. Free, one-click unsubscribe in every issue, and I never share your email with anyone. See the privacy notice for what I keep and how to ask me to delete it.