Claude Design: the first AI design tool that writes to your codebase

I spent Friday afternoon pointing Claude Design at three client codebases I know intimately. One is an ecommerce brand with a bespoke token system in styled-components and the most over-engineered product-card hover state I've ever shipped. One is a law firm whose site — all restrained serif display type and measured editorial cadence — has been carefully debated by three different creative directors over four years. The third is something I built for myself over a weekend with Tailwind and not much plan. By Saturday morning I had a strong view on what this tool is, what it isn't, and the single thing about it most reviews are going to undersell.

What it actually is

You open it at claude.ai/design and the first thing you do is give it something to read. Not a brief. Not a mood board. A repository, or a design-file dump, or a link to a live site. It sits there for a minute working through the files and then produces a design system: colours, type, spacing, components, the lot. You didn't describe any of this. It pulled it out of the source.

That's the category claim, and it's worth pausing on. Every other AI design tool I've used in the last two years starts with a prompt and a set of tokens you fill in. This one starts with your actual product. The entire workflow sits on top of that extraction — prototypes, page variations, pitch decks — and inherits whatever you fed it, good or bad.

Brand at the code level

“Your brand” in most AI design tools means a hex code and a font name. “Your brand” here means the radius on your buttons, the easing curve your hero banner uses, the way your cards lift on hover, the spacing between a kicker and a headline, the fact that your display face is Manrope and your body face is Inter Tight and your display face only goes below 500 weight in one specific place. It reads the components. It reads the CSS. It reads the animation.

On the ecommerce codebase this was uncanny. The system I got back was recognisable in about ten seconds — not an approximation, not a pastiche. The hover state on the product card matched the easing we'd argued about two years ago. The little diagonal gradient on their mesh backgrounds was there. A reader who knows that product would have said “that's us” without being told.

A landing-page comp that would have taken me twenty back-and-forth prompts in v0 took two here. That's not a throwaway number — it's the whole point. The rest of the tool doesn't matter nearly as much as that ingestion step. Once the system is in, the generation is cheap. The bottleneck has moved.

The handoff is the moat

Here's the thing most reviews are going to undersell. When you're done in Claude Design, the export menu has an option called Handoff to Claude Code. It packages the design files, the chat transcript, and a README.md that Claude Code reads straight into the project. You paste a prompt, it pulls the bundle, it starts building. That bit is straightforward.

The surprise is what's in the README. It is not a pile of “we chose 8px here because…” annotations on individual decisions. It is a full brand bible — the document a senior design lead would hand a new junior on day one, written the same way they'd write it.

A positioning paragraph on who the brand is for. A voice section, with explicit on-brand and off-brand examples (“use this phrasing; avoid corporate-synergy preambles”). Casing rules. A punctuation policy. An emoji policy (“no”). Then a visual-foundations section — palette, typography, spacing, animation easing, hover states, shadows, radii, cards — written as rules, not observations. Something like:

A card is: paper-soft background, 1px rule border, 8px corner, shadow-1 at rest, 20–24px padding. Optional 2px navy top accent for emphasised cards. No card has a coloured left border only — this is an AI-slop pattern; avoid it.

That's the tone of voice throughout. Prescriptive. Willing to name what's off-brand. Willing to ban things.

The bit I didn't expect is the caveats section at the end. Claude flags every substitution it had to make because the input was thin. Fonts picked from Google Fonts because the brand didn't specify any. Icon set swapped in from Lucide because no custom set was provided. No hero photography supplied — here's where to drop it in. It is, in effect, an honest audit of its own output, addressed to the human who still has to do the real brand work. I've never seen an AI tool flag its own guesses this clearly.

I've spent a decade moaning about the gap between “the designer finished their Figma” and “a pull request exists.” Every agency has its own rituals for crossing it — redlines, dev-mode exports, Zeplin, Storybook, three meetings with a PM — and all of them leak the same thing first: the rules. A developer rebuilds a card and it looks right. Then another developer builds a different card and the radius is wrong, the padding is wrong, the shadow is too heavy, and the brand softens by half a percent on each pull request until nobody can remember what it was supposed to look like.

The brand bible is the piece that closes this. Claude Code doesn't get a spec for one screen; it gets the rules for all of them. The first PR that comes out the other side is, for the first time in my career using AI tools, a pull request I'd merge without rewriting. The second PR is, more importantly, consistent with the first. That is the bit that should scare the rest of the category.

What it isn't

It isn't a brand-creation tool. It is a brand- codification tool, which is a very different thing.

The Design System Creator walks you through each element it proposes and asks you, in effect, “looks good” or “needs work.” Colour ramps, button states, card hover behaviours, heading hierarchy — every decision wants your verdict. This is fine when you know what good looks like and you've brought a strong brand in. It's less fine when you haven't.

I tried this deliberately with my weekend-project codebase — a deliberately bland starter I threw together to test edge cases. Claude produced a design system from it that was also bland. It propagated the blandness across seven variations of a pricing page, diligently, faithfully, at scale. There is no point in the workflow at which the tool says “your brand direction is weak.” It takes what you give it and spreads it.

Composition, hierarchy, visual judgement — these are not in the token stream. They are in the person deciding what belongs on the page. If you are not that person, or you don't have that person in the room, Claude Design will cheerfully produce a convincing-looking product with nothing to say. The tool is neutral on the question of taste. You have to bring that.

Tune the system yourself

This is what the loop feels like. A button, a few knobs, and a verdict. Hit Looks good and Claude banks the decision and moves on. Hit Needs workand a comment box appears; you tell Claude what you want changed in plain English — “subtler lift,” “snappier,” “try magenta” — and Claude goes away, comes back with a variant, and you judge again. Try it below. The little demo interprets your note the same way the real product does.

Notice what the tool can't do for you. It can't tell you whether a 400ms transition is slower than the brand wants, or whether a pill shape undermines the seriousness of the product, or whether this button should exist at all. It offers options. You are the judge.

Where it fits

The agency pipeline has roughly five stages and Claude Design lives in the middle three. Click around if you want to see it honestly — I've marked the stages I'd actually use it for, and the stages I wouldn't.

The System stage is the sweet spot. Components and Production are where it accelerates the work you already know how to do. Strategy and Identity are where teams are going to be tempted to use it and will get a generic, slightly uncanny result. I'd keep it out of those rooms.

The usage gotcha

Here's the operational detail that will bite agencies hardest, and it took me about forty minutes to run into it.

Claude Design is metered separately from Chat and from Claude Code. It has its own weekly bucket. That bucket is per-user, not pooled across the org, and it resets every seven days. It is not tied to your existing token usage. A generous Max 20x allowance on Claude Code is no help to you here — the Design bucket is its own thing, and it is smaller than you want it to be.

I tried, in a single afternoon, to set up design systems for the ecommerce brand and the law firm back-to-back. The ecommerce one went smoothly. Halfway through the law firm, the bucket was at 95%. I had spent about half an hour in the tool. By the time I'd remixed the system once and produced two landing-page variations for it, I was locked out. For a week.

This is the agency-killer. If you are pitching three brands on Monday and want high-fidelity prototypes for all of them by Friday, you cannot do that on a Pro plan. You probably can't do it on a Max 5x either. The economics point to Max 20x or Team Premium for anyone using this in production, and even then you'll want to budget carefully across seats. It is not, at the moment, a sit-down-on-Monday-and-do-the-whole-week kind of tool.

Will it last the week?

The simulator below is my best rough estimate of how the bucket behaves. Anthropic don't publish the actual numbers, so these are derived from what I burned through in my own testing scaled against the tier labels they use. The shape is right even if the exact figures shift later.

Play with it for a minute. Pick your actual plan. Put in the number of client brands you'd realistically want to move through the tool in a week, a reasonable number of sessions per brand, and the prompt density you'd use inside each session. Then see whether the bar has any green in it.

The competition, briefly

v0 remains the fastest route from prompt to deployed React. If your stack is Next and shadcn and you mainly want UI generated inside a repo, v0 is closer to the code than Claude Design is. But v0 starts with a prompt. It does not ingest a brand the way this does.

Figma Make is fine for teams whose delivery contracts name Figma as the source of truth. Code Connect is the real story over there, not the AI canvas. If you owe the client a Figma library at the end of the engagement, Claude Design currently has no export to Figma, which is a concrete operational problem.

Subframe is the closest adjacent product for agencies running multiple brands. Its export is deterministic, its design-system story is explicit, and its IDE integration is excellent. If I were running an agency today and had to pick one tool to bet on for the next year, Subframe versus Claude Design would be a genuinely hard call. Subframe wins on predictability. Claude Design wins on the handoff bundle.

Lovable and Bolt are solving a different problem — they deploy a working app. They are not in the same category as this. A founder building an MVP should still use one of them. An agency handing code to a client's engineering team shouldn't.

Who should buy in now

Buy in now if you have a strong brand already codified and your team already lives in Claude Code. The handoff bundle alone is worth the subscription. You'll feel the difference inside a week.

Wait if your delivery contracts require a Figma library — Claude Design currently has no export to Figma, and that's a concrete operational problem you can't paper over. Wait, especially, if you're an agency on a Pro plan hoping to run three client brands through it next week. You won't get past Tuesday.

What this really is, stripped of the launch noise: the first serious attempt to put a design system between the AI and the blank page. Every other tool in this category pretends the blank page is fine. It isn't. Your brand is a hundred small decisions, made once, by people who cared, and the trick is to propagate those decisions faster without blurring them. Claude Design does that. It doesn't make the decisions for you. It shouldn't. That was never the gap.