Claude Design review: what it makes

Claude Design turns a written prompt into a design on a canvas beside the conversation, and the design leaves as standalone HTML, a .zip, a PDF or a handoff to Claude Code. The HTML is markup and stylesheets you can open, read, edit and take somewhere else.

One property decides how to use it. The output is only as directed as the text you handed over, because a prompt-to-prototype tool has no separate design opinion sitting behind it. Everything the page looks like either came from your instruction or came from the median.

The short call: Claude Design is an excellent paste target and a poor art director, which is the correct division of labor. Bring a real specification, of the kind the Thanor library ships, and it executes faithfully. Three of those, each an interactive page built from one prompt:

Availability, features and limits#

Claude Design launched on April 17, 2026 as an Anthropic Labs research preview for paid plans, running on Claude Opus 4.7. It now lives inside Claude as one of the templates an artifact can start from, and Anthropic's help article lists it on the Free, Pro, Max, Ultra, Team and Enterprise plans, on by default. The original standalone site at claude.ai/design closes on December 14, 2026.

What it does, according to that article:

• Four ways in: ask for a design in any conversation, pick a Design template in the Artifacts tab, use /design in Claude Code, or request one in the iOS and Android apps.
• Three ways to refine: chat for broad changes, inline comments for targeted ones, and direct edits on the canvas to drag, resize and align.
• Design systems: imported from a GitHub repo, design files, uploads or a local codebase, with screenshots, decks and repositories attachable as context.
• Exports: a .zip, a PDF, a PPTX, Google Slides or standalone HTML, a send to tools such as Canva, Lovable, v0, Netlify, Vercel or Wix, or a handoff to Claude Code.

The limits sit on the same page. Design work counts toward the same usage limits as chat and Claude Code and pauses when you hit them, unless usage credits are on. There is no version history yet, two people editing at once is still basic, very large repositories can lag in the browser, and an imported design system is only as good as its source. Claude Design vs Figma Make and Claude Design vs Google Stitch set those limits against the two nearest tools.

What Claude Design produces#

Exported as HTML or built out in Claude Code, a design becomes real front-end code, and the quality of that code is not the variable worth worrying about.

From a plain request it already gives you:

• A semantic document with one h1, ordered headings and labeled form controls.
• A responsive grid with no horizontal overflow at 390px.
• Type sized with clamp() between a stated floor and ceiling.
• A prefers-reduced-motion branch that genuinely disables the transforms.
• Focus states that survive keyboard navigation.

Every one of those used to need hand repair and none of them does now, which is why code quality is not the thing to judge a prompt-to-prototype tool on. From that same plain request it also gives you the four values that make a page look generated: a neutral geometric sans, a gray sitting on the neutral axis, border-radius: 8px on every corner, and opacity 0 to 1 plus translateY(20px) at roughly 300ms on every section alike.

Neither list is a criticism. The first list is the tool working. The second is what any generator does with a slot nobody filled, and the slots are the part you can change in ninety seconds of typing.

The HTML export matters more than it sounds. A stylesheet you can open is a stylesheet you can audit: you can read the actual duration on the reveal, see whether the radius is consistent, and find the #6B7280 you never asked for. A design decision you can grep is a design decision you can own, so export the HTML before you judge a design by how it looks on the canvas.

The input decides the output#

Six slots, and the same tool produces two unrelated pages depending on what arrives in them.

The radius row is the fastest tell to fix and the cheapest to state. A 2px control sitting next to a 14px card is a decision somebody made; 8px on both is a framework talking through your page.

Claude Design honors all six literally, including the awkward ones. Ask for two weights and you get two weights, which is a constraint no generator applies on its own, and the same behavior holds across every model in this cluster.

The measure row is the one most people leave out and then cannot diagnose. Given a full-bleed grid and no stated limit, body copy runs past 100ch and the page reads as a document rather than a designed layout. 64ch is four characters of specification and it fixes the complaint permanently.

A brief shaped for prompt-to-prototype#

Structure the paste in five blocks. Order matters, because the refusals need to survive to the end of the generation, and Claude Design prompts that don't give you the default look builds the same skeleton out section by section.

1. Tokens first. Surfaces, borders, neutral with its hue bias, accent with a cap on how often it may appear, radii, the spacing ramp 4 / 8 / 12 / 20 / 32 / 52.
2. Type as a system. 17px body at 1.62, measure 64ch, ratio 1.26 across five steps to 86px, two weights, -0.025em tracking on the top step alone.
3. Motion as two curves and a budget. Reveal on cubic-bezier(0.22, 1, 0.36, 1) over 620ms, response on cubic-bezier(0.32, 0.72, 0, 1) over 240ms, stagger 90ms capped at four items, first viewport only.
4. Sections, numbered. Statement, proof strip, asymmetric 7/5 argument, one signature moment, accordion objections, plain price, one-line close.
5. Refusals, last. No gradient. No gray on the neutral axis. No third typeface. No icon set. No testimonial carousel.

Test the fifth block by removing it and regenerating. A gradient will appear behind the hero text, icons will grow in every card, and the page will drift back toward the median it started from. That single experiment explains the category better than any feature list.

The parts you still own#

Three decisions stay with you permanently, whatever tool generates the code.

1. The signature moment. One mechanism, on one section, described as physics. A wordmark that draws its own stroke once over 900ms. A counter that settles on cubic-bezier(0.32, 0.72, 0, 1). A card that lifts 3px over 180ms. Asked for "delightful micro-interactions", any generator supplies four and they compete for the same attention.
2. The hierarchy of the argument. Which single line goes full-bleed with no subheading and no button. That is an editorial judgment about what the page is for, and it cannot be derived from a component inventory.
3. The refusals. What this design will not do, written per design rather than as generic advice. The useful refusals contradict each other: a page whose argument is density refuses whitespace, and one whose argument is calm refuses the draw-on entirely.

The third is the half almost nobody writes down, and it is the half that makes two pages built from one library look unrelated to each other. It is also the fastest thing to test, because removing it changes the output immediately.

Those three plus the token block are what a real brief is, and they travel. Paste the identical text into Claude Opus 5.5 in Claude Code or into the in-ChatGPT builder and you get the same decisions rendered by a different engine, which is the property that makes a specification an asset rather than a setting. Signature moments written as mechanisms look like this, one per page:

The verdict on Claude Design#

Use it. It is included on every Claude plan, and a design that exports as standalone HTML or goes straight to Claude Code is portable and legible rather than locked inside one tool. Save before any big change, since there is no version history yet.

Then do the part it cannot do for you:

• Tokens, typed once: surfaces, border, neutral with hue bias, accent with a cap, radii, ramp.
• Type as a ratio and a step count, not a list of sizes.
• Two curves and a motion budget, in milliseconds.
• Seven numbered sections and three refusals.

That is one page of text and it is the difference between a prototype and a design. Any current Claude model takes the same page unchanged, and the full prompt is written out in the Fable piece. Keep it in a file rather than in a conversation: a file can be diffed, handed to a colleague and pasted into a different engine next month, and every one of those is worth more than scrolling back to find the version that worked.

Thanor sells finished versions of it, one per design, in exact values, with the hosted films and stills the page uses, for personal and client work. Free accounts open the designs marked free, and the plans open the rest of the library.

Open Vesperion and copy its prompt; it is free with an account. Paste it into Claude Design, export the HTML, and check every value arrived.