You have a page in your head, but between that idea and something you can actually show someone sits an afternoon of fiddling. You open Figma, hunt for a template, drag boxes straight, and end up with a picture that still isn’t a website. Claude Design goes at it differently. You describe what you want and get a working prototype back: real HTML, CSS and JavaScript, not a mockup.
Anthropic released it on 17 April 2026 as a research preview under Anthropic Labs, and opened it up more widely in beta on all paid plans on 17 June. It runs on Claude Opus 4.7, the model that can also read images. You find it at claude.ai/design and it’s part of the Pro, Max, Team and Enterprise plans.
What it does
The core is simple. You type what you need, in plain language, and Claude Design builds it. A landing page for a new service, a one-pager for a client, a set of slides, a mockup to align on. The output is code you can use straight away, so what you see on screen is what runs in a browser.
You refine by talking. You say “make the button bigger and move the contact block to the top”, and it adjusts. No menus, no layers to understand, you just say what should change. That makes it usable for people who have never opened a design program.
What struck me most is how it picks up your own house style. Claude Design reads your codebase and your Figma files and works out your design system from them: your colors, your fonts, your button styles. Work on an existing project and the result doesn’t come out looking like a random template, it fits the rest. Anthropic calls this Design System Recognition, and it’s exactly the part most quick tools miss.
How it differs from Figma or Canva
Canva is for people who want a nice post or flyer without thinking about code. That works fine, but you get a picture or a PDF, not a page you can publish. Figma sits a level deeper: it’s the designer’s tool, powerful and precise, but also a program you genuinely have to learn. And Figma too gives you a design, not working code. The translation to the actual site is somebody else’s job afterwards.
Claude Design sits between the two, but with a difference that counts: the code is the end product, not an in-between step. You describe, it builds, and what comes out a developer can pick up or you put online yourself. For someone without a design background, that’s the shortest path from “I want something like this” to “here it is”.
What you do with it as a small business
A few places it earns its keep right away:
- A landing page for a new service or a promotion, without hiring a designer for the first version.
- A one-pager you send a client: clean, on your own house style, ready to share.
- A presentation you’d otherwise have wrestled with in PowerPoint, now in the same flow.
- Quick variants to choose from. Ask for three versions of the same page and compare them side by side, instead of laboriously drawing one.
The point isn’t that a designer’s work becomes pointless. The point is that without a designer you get much further than before, and with one you move faster because you already put the first version on the table.
How to start
- Go to claude.ai/design. You need a paid plan (Pro, Max, Team or Enterprise).
- Describe in a sentence or two what you want to make. Be concrete: what it’s about, what goes on it, what it’s for.
- Look at what comes back and refine by talking. “Shorter”, “different color”, “add a pricing table”.
- Working on an existing project? Point it at your codebase or Figma file so it keeps your own style.
- Happy with it? Take the code, or send it on to Claude Code to turn it into a real page.
The caveat
It’s a research preview, and you notice. A preview is a first version Anthropic is still smoothing out, so expect things that don’t run cleanly yet. And to be honest: generating a page fast isn’t the same as designing one well. Claude Design gives you a flying start, but the questions that actually matter (does the message land, is the structure logical, does it work for someone who sees poorly) it won’t answer on its own. That’s where the thinking starts, and that stays yours.
There’s a dependency side too. When your design, your code and your tools all come together in one vendor’s environment, that’s comfortable right up to the moment you want to leave. Handy tool, but keep an eye on how much of your own grip you hand over to it.
That said: for the first version, the quick test, the page that should have been up yesterday, this is one of the more useful things I’ve run into this year.
This is part 1 of a series on designing with Claude. In part 2 you’ll read about the seven design skills in Claude Code, which let you review and improve any design. Earlier I wrote about the day Claude Design went into beta.