Claude Design review: what it makes

Claude Design takes a written prompt and returns production HTML, CSS and JS. Not a canvas, not a proprietary file: markup and stylesheets you can open, read, edit and take somewhere else.

That 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 labour. Bring a real specification, of the kind the Thanor library ships, and it executes faithfully.

What Claude Design produces#

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 labelled 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 grey 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 output being real code 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, which is not true of a layout that only exists inside a 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 honours 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 behaviour 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.

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 grey 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 judgement 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 Fable 5.1 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.

The verdict on Claude Design#

Use it. Production HTML, CSS and JS out of a text prompt is the right shape for design work, because the artefact is portable and legible rather than locked in a canvas. The code it writes is clean and accessible before you ask.

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. Claude Fable 5.1 takes the same page unchanged, and the full prompt is written out there. 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, covering UI, app and SaaS interfaces, page sections and animated backgrounds, for personal and client work: $89 for three months, $189 a year, $299 once, and free accounts open the designs marked free.

Browse the Thanor library and paste one into Claude Design tonight, then read the stylesheet it hands back and check every value arrived.