At the end of my last article, I teased that I’d be writing about Claude Design — Anthropic’s new design surface that turns a prompt into an actual interface, not a screenshot of one. I’ve been using it for a few weeks across personal projects and client mockups, and it’s the first AI design tool that hasn’t made me wince at the output. Here’s what I’ve found.
AI-generated image via Google Nano Banana 2
Table of contents
Open Table of contents
What Claude Design is
Claude Design is a new Anthropic Labs product, launched in April 2026 alongside Opus 4.7, and it lives inside Claude.ai as its own surface. The pitch is simple: you describe what you want, Claude builds a first version, and you iterate — through chat, direct edits, inline comments, or custom sliders that Claude generates on the spot for whatever variable matters to that specific design (corner radius, density, accent saturation, copy length).
It covers the full range of “visual work that isn’t an illustration”: product UIs, landing pages, prototypes, slides, one-pagers. The output is real, navigable HTML — not a flat image — and at the end you can ship it three ways:
- Share a private link inside your org
- Export to Canva, PDF, PPTX, or standalone HTML
- Hand it off to Claude Code as a packaged bundle for implementation
It’s available in research preview on Pro, Max, Team, and Enterprise plans.
Why this exists
The honest answer: nothing else fits the AI workflow. Figma is a brilliant tool, but it was built around a designer dragging rectangles on a canvas. Stapling AI features onto that paradigm gives you Figma AI — useful, but it still assumes a human moves the pixels. Claude Design starts from the other end: the model produces the artifact, the human steers.
The second reason is the handoff problem. The dirty secret of the design-to-engineering pipeline is that the design file is never what gets built. A developer reads the Figma, reinterprets it in code, and 80% of the spacing and edge cases get redecided by hand. Anthropic owns both ends of that chain — the design surface and Claude Code — and Claude Design closes the loop. The handoff is a bundle, not a screenshot.
Whether that loop ends up as a moat or a sales pitch, time will tell. But the idea — that the design and the code should live in the same conversation — finally feels right.
The results that genuinely surprised me
This was the part I didn’t expect. Every AI UI tool I’ve tried before — v0, Lovable, the wave of Midjourney mockup workflows — produced outputs with an immediately recognizable AI tell. Over-padded hero sections. Three gradient cards in a row. A sidebar with seven nav items that are all roughly the same length. Sans serif at one weight, everywhere. Lorem-ipsum-shaped sentences even when the copy is real.
Claude Design doesn’t do that. The first time I asked it to mock up a settings page for a side project, the output had:
- A real type hierarchy — page title, section label, control label, helper text, all distinguishable at a glance
- Asymmetric column widths because the form fields warranted it
- A muted state on a disabled toggle that you only notice if you’re looking for it
- Empty-state copy that read like a sentence a human would write
None of those are flashy. They’re the things that, when missing, make a screen feel AI-generated. The compounding effect of getting all of them right is that the design looks like it came from a person who has shipped product before.
That’s the headline for me. The first AI design tool whose output I’d actually paste into a slide deck without rewriting.
The “real designer in the loop” feeling
The reason for the previous section, I think, is structural. Claude Design isn’t generating a one-shot image — it’s working inside a design system it builds for you up front.
During onboarding, it reads your existing codebase and any design files you point it at, then extracts:
- Brand colors and their semantic roles (primary, surface, danger, etc.)
- Typography stack and the weights you actually use
- Component vocabulary — what your buttons, inputs, cards, and tables look like
- Spacing rhythm
Every subsequent prompt is constrained by that system. You don’t get “AI’s generic dashboard”; you get your dashboard, built out of the components you already have. When I asked for a new billing page, it used the same toggles, the same table chrome, and the same tertiary-button style as the rest of the product I had pointed it at. That’s the thing that makes the output feel like it came from someone who already works on your team.
A few more touches that compound the feeling:
- Custom sliders. When you ask to tweak something Claude can parameterize, it spawns a slider for that variable. “Make the copy denser” becomes a real knob you can drag, not another round-trip prompt. Tiny detail, big effect on iteration speed.
- Inline comments. You can drop a comment on a region of the design (“this needs to look more like a status, less like a button”), and Claude treats it the way a designer would treat a sticky note from a PM.
- Conversation has memory of intent. “Try the previous header but with the warmer palette from page two” actually works. The tool remembers what you were doing, not just the last prompt.
It’s the difference between a generator and a collaborator.
Two ways out: Figma or Claude Code
Once a design is good enough to leave the canvas, you have two natural exits.
Out to Figma — keep designing
If the design isn’t done — if a real designer needs to push it further, run it through a brand review, or fold it into a larger file — you want it in Figma. Claude Design doesn’t export to .fig natively (yet), but the path that’s worked best for me is:
- Export the design as standalone HTML from Claude Design
- Use Anima or html.to.design to import the HTML into Figma as editable frames
You lose a tiny amount of fidelity on the way through, but you arrive with components, auto-layout, and editable text — not a flattened image. From there, it’s a Figma file like any other. This is the route I use whenever the design will live or die based on a designer’s taste, not mine.
Out to Claude Code — ship it
If the design is done, and you just need it to exist in your app, Claude Design’s killer feature is the handoff bundle. One click packages the design — markup, styles, assets, design tokens, intent notes — into a payload that Claude Code can consume as a single instruction.
What this means practically: a PM can sketch a feature flow in Claude Design in the morning, send the bundle to Claude Code, and have a draft pull request open by lunch. The model has the design and the codebase context simultaneously, so it knows which existing component to reuse and which tokens to map onto.
The two paths are honest about who Claude Design is for. Designers get an AI-native sketchpad whose output drops into Figma cleanly. Engineers and PMs get a way to specify an interface without writing a brief — and then build it without rewriting the spec. Same tool, different exits.
Where it still has rough edges
Worth being honest: it’s a research preview. A few things I’ve hit:
- Complex multi-state flows (think wizards with branching paths) still benefit from a real designer breaking them down. Claude Design will happily produce all the states, but the ordering and affordance of the transitions need a human eye.
- Asset handling is improving but not great — illustrations, custom icons, and dense iconography are still better imported than generated.
- Design system extraction is only as good as the input. If your codebase is messy, the system Claude pulls is messy too. Garbage in, garbage out — same as everything else in AI.
None of that is dealbreaking. It’s the gap between “this is great” and “this is going to replace half the design tools I use,” which I think it gets to in another iteration or two.
Wrapping up
Claude Design is the first AI UI tool I’ve used where the output isn’t the giveaway. The combination of a design system grounded in your code, conversational iteration with real sliders and comments, and a handoff that goes straight to Claude Code makes it feel less like a generator and more like a coworker who reads briefs in seconds. For solo builders and small teams, it collapses a workflow that used to span Figma, a prompt, and a developer’s mental reinterpretation into a single conversation.
Thanks for reading! If you’ve been using Claude Design — or have strong opinions about where AI design tools should go next — I’d love to compare notes via email or LinkedIn.
Next up, I’ll be writing about Quoven — a project I’ve been building on the side that I’m finally ready to talk about. See you in two weeks!