How to Design a Website With Claude Design (Web Design Just Changed)

Here is how to design a website with Claude Design in one sitting: open the design workspace at claude.ai/design, describe your business and the feeling you want in plain English, let it generate a real page built on a proper design system, then art-direct it in chat the way you would brief a designer. No artboards, no pen tool, no twelve-tutorial detour. You end the session with working HTML and CSS, not a picture of a website. We have shipped client-facing sections through this exact flow, including a piece of our own homepage, so this is a field report, not a hot take.

And yes, the bigger claim in the title is earned. Web design just changed in a way it has not changed since responsive layouts arrived. The old pipeline was mockup first, code second, with a designer translating your words into pictures and a developer translating pictures into code, losing something at each border crossing. Claude Design collapses that pipeline: the mockup is the code. As of September 2026, a business owner with taste and no software can produce a design that would have cost four figures a few years ago. What still separates amateurs from professionals is the brief, the iteration, and the shipping, which is exactly what this guide covers.

What is Claude Design, exactly?

Claude Design is the visual design workspace inside Claude, Anthropic’s AI assistant. You describe a page or a whole site, and it generates the design as living code: real typography, a token file with your colors and spacing, components, and full pages you can click through. A project holds actual files, the kind a developer can open, not flattened exports. Two things make it different from the AI site builders we review on this blog. First, it thinks in design systems, so your colors, type scale, and spacing stay consistent across every screen instead of drifting page by page. Second, the output is portable code you own, not a subscription page trapped in someone’s platform, which regular readers know is the hill we happily die on.

How do you actually design a website with Claude Design?

The workflow that has worked for us, step by step.

Start with a brief, not a request. “Design a website for my bakery” gets you the average of every bakery site ever made. Instead, write five sentences: what the business is and where, who walks in the door, the one action the site should drive, three adjectives for the feeling, and one site you admire with a note about why. That last sentence does more work than the other four combined.

Let the first generation be wrong. The first pass is a conversation starter. Judge the bones, not the paint: is the structure right, are the sections in a sensible order, does the hierarchy make sense? Fixing structure first and style second is the same discipline print designers have used forever, and it survives the AI era intact.

Art-direct in plain English. This is where the tool earns its keep. “Warmer background, less startup-y.” “Make the headline enormous and the buttons calmer.” “The testimonials feel fake, make them look like real people said them.” Each note regenerates the design in seconds. You are doing the taste part of a creative director’s job while the production part happens automatically. Ten rounds of this costs you twenty minutes; ten rounds with a human designer costs you two weeks and a relationship.

Push the tokens, not the pixels. When something feels off everywhere, change the system instead of the page. Ask for a different type pairing, a tighter spacing scale, or a new accent color, and the whole design updates coherently because every component reads from the same token file. This is the single biggest mental shift from old-school mockups, and it is why the results hold together like professional work.

Design the awkward states too. Real sites have cookie-cutter moments: the mobile menu, the form error, the empty testimonial section while you wait for your first review. Ask for them explicitly. Unprompted AI design, like unprompted AI code, quietly skips the unglamorous parts, a pattern we documented across our vibe coding best practices.

What does a good brief look like in practice?

Here is the difference between a request and a brief, using a business everyone can picture. The request: “design a website for my bakery.” The brief:

“Kolache Corner is a Czech-Texan bakery in Round Rock, selling out of pastries by 11am on weekends. Customers are commuters grabbing breakfast and families ordering party boxes. The site’s one job is pre-orders for weekend pickup. It should feel like a warm kitchen with a sense of humor, not a bakery-template site: think handwritten specials board, not script fonts and stock croissants. I like how a local barbecue joint’s site leads with today’s menu and a phone number; do that confidence, our subject matter.”

Six sentences. Every one of them removes a hundred default decisions. The generation that comes back from this brief is not just prettier, it is arguably right, because structure follows the pre-order job, the tone follows the specials-board note, and the reference site anchors the confidence level. Write this paragraph before you open the tool and the whole session goes differently. It is the same lesson our prompt library teaches for code: specificity in, quality out.

What does Claude Design do well, and where are the edges?

Strong: layout and hierarchy, typography that does not look like a default, consistent spacing, fast iteration, and honest exports. The designs come out opinionated in a good way, closer to a boutique studio’s first draft than to a template marketplace. Weak: it cannot take your photos, so image direction stays your job. Brand-specific illustration is out of scope. And like every generative tool, it produces its own flavor of sameness if you brief it lazily, the cure being specificity, references, and the willingness to say “no, weirder” until it surprises you.

One honest comparison, since everyone asks. Against Figma, this is not a canvas where you nudge rectangles; you trade pixel-level control for speed and for output that is already code. Against the AI website builders in our rankings, Claude Design sits a level deeper: builders assemble their own hosted templates, while this designs from scratch and hands you the files. Different tools for different distances from the metal.

What does it cost, and what does the output look like?

Claude Design ships inside Claude’s paid plans, so the design phase costs you a subscription you may already have, and the current details live at claude.ai/design. The output is a project of real files: pages, components, a stylesheet of design tokens, and webfonts, ready for a developer or for Claude itself to turn into your production site. Which raises the obvious next question.

Does this replace web designers?

It replaces the production layer of web design, the same way vibe coding replaced the boilerplate layer of development. What it does not replace is judgment: knowing your customer, choosing what not to say, recognizing when the third revision was better than the seventh. The business owners getting remarkable results from Claude Design are the ones treating it like a very fast design partner they still have to direct. The ones getting mush are the ones typing “make it pop.” The tool moved the bottleneck from craft to taste, and taste, good news, is learnable.

Once the design is done, you are halfway. The other half is turning that design project into a live website on your own domain, with SEO, forms that send, and hosting that does not own you. That half has its own guide: Claude Design to code, covering the static route, the WordPress route, and the route where we do it for you at a flat fee.

Designing a website with Claude Design: quick answers

Can I design a whole website with Claude Design, not just one page?

Yes. Projects hold multiple pages that share one design system, so your services page, blog, and contact page stay visually consistent instead of looking like three different weekends. Design the home page first, get the system right, then generate the rest, the same order a studio would work in.

Do I need design experience to get good results?

No, but you need opinions. The tool supplies craft: type scales, spacing, color systems. You supply direction: who the site is for, what it should feel like, what to cut. Write a real brief, iterate in plain English, and steal shamelessly from sites you admire when describing what you want. Taste plus specificity beats a design degree here.

Is Claude Design better than Figma for a small business website?

For a small business that wants a website, yes, because the output is working code instead of a picture that still needs a developer. For a design team running a complex product with hand-off rituals and component libraries in Figma, no, and it is not trying to be. Different jobs. Small business sites are exactly the job it is best at.

Can Claude Design output be used on WordPress?

Yes, with a translation step. The design exports as HTML, CSS tokens, and components, which a developer, or Claude Code, or our crew, converts into a WordPress theme. We did exactly this on our own site, and the full walkthrough is in our design-to-code guide.