# Claude Design — The First AI UI Tool That Doesn't Feel Like AI Source: https://www.mafille.me/posts/2026/claude-design-ai-native-ui-tool Published: 2026-05-27T07:00:00.000Z Tags: ai, design, anthropic, claude, ui A hands-on look at Claude Design: what it is, why Anthropic built it, the results that surprised me, the unmistakable feeling that a real designer was in the loop, and the two ways out — Figma to keep designing, or Claude Code to ship. At the end of my [last article](https://www.mafille.me/posts/2026/llm-inference-optimization), 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. ![Claude Design — the first AI UI tool that doesn't feel like AI](https://www.mafille.me/_astro/claude-design-banner.DL14-Nhz.png) _AI-generated image via Google Nano Banana 2_ ## 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: 1. Export the design as standalone HTML from Claude Design 2. 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](mailto:mathieu@mafille.me) or [LinkedIn](https://www.linkedin.com/in/mathieumafille/). 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!