Anthropic's Claude Design brings AI-assisted design system creation and Figma-referenced prototyping to the Claude ecosystem. Here's my honest take on where it shines, where it falls short, and why I'm still reaching for Pencil.dev first.
What Is Claude Design?
Anthropic just launched Claude Design — a new capability inside Claude that lets you create and reference a design system to generate UI pages and layouts using AI. The pitch is straightforward: describe what you want to build, feed Claude your design system as context, and get production-ready interface code back.
There are two aspects that make this launch particularly interesting:
- Design system as reference — Claude can use your existing design tokens, components, and visual language as a guide when generating new pages and layouts
- Figma integration — Claude can directly reference a Figma file to extract your existing designs and use them as the source of truth for prototyping
Both of these are meaningful capabilities. But they're not new to the market — and that's where my honest take begins.
My Honest Take: Who Did They Copy?
Let me be direct: the core functionality — using a design system as reference to generate pages and layouts with AI — is something UX Pilot has been doing for a while. The pattern of "define your component library, then use it to generate screens" is a well-established approach in the AI design space.
Claude Design is essentially bringing that same model into the Anthropic ecosystem. That's not a bad thing — distribution matters, and Claude has an enormous user base. But let's not pretend this is a category-defining invention. It's a well-executed entry into a space that already existed.
There's also a fundamental limitation worth naming: Claude Design still requires you to create the design system somewhere else first. You need an external tool — Figma, a component library, a token file — to define the system before Claude can use it as a reference. Claude Design consumes the system; it doesn't generate it from scratch.
Where Claude Design Actually Shines: The Figma Bridge
Here's where I give credit where it's due, and why I think the Figma integration is the genuinely exciting part of this launch.
The ability to reference an existing Figma file and extract a design system from it — at a code level — is a meaningful workflow accelerator. Here's why it matters:
- Higher-fidelity prototyping from day one. Because you're using your actual designs as the reference, the AI-generated output reflects your real visual language — your spacing, your type scale, your color decisions — not a generic template.
- No workflow disruption. You're not replacing Figma. You're adding Claude after Figma in an existing pipeline. This is a critical distinction. The tool fits into how designers already work rather than demanding they adopt a completely new process.
- Additive, not replacement. The friction is low because you haven't thrown anything away. You designed in Figma (as you would have anyway), and now Claude can accelerate the translation to code or higher-fidelity prototypes using those designs as fuel.
This is smart product thinking. Instead of asking designers to abandon their current tools, Claude Design positions itself as an intelligent layer that sits on top of existing Figma work. That's a much more adoptable value proposition than "switch your entire design process to our platform."
Why I'm Still Reaching for Pencil.dev First
Despite the Figma integration being genuinely useful, Pencil.dev remains my tool of choice — and I want to explain exactly why, because it comes down to one specific capability that none of the other AI design tools have nailed yet.
Pencil.dev gives you design-level manipulation of the AI output.
Here's what that means in practice:
- You generate a page or component with AI
- The result comes back as a fully editable design artifact — not code, not a static image
- You can adjust the auto-layout, change spacing, update styles, swap components — all at the interface level, exactly the way you would in Figma
- Only then, once the design is exactly right, do you export to code
This matters because AI generation is never perfect on the first pass. Every tool — Claude Design, UX Pilot, v0, Framer AI — produces results that need refinement. The question is: where does that refinement happen?
With most tools, refinement means going back to the prompt, iterating on the generation, or (worse) editing the code directly. With Pencil.dev, refinement happens in a Figma-like design environment. You stay in the visual layer. You adjust what you see. No code, no re-prompting just to move a button 8px to the right.
That is the gap. And it's a significant one for anyone who thinks in design, not in code.
The End-to-End Comparison
| Capability | Claude Design | UX Pilot | Pencil.dev |
|---|---|---|---|
| Create design system from scratch | ❌ External tool required | ⚠️ Limited | ✅ Full AI generation |
| Use design system as AI reference | ✅ Yes | ✅ Yes | ✅ Yes |
| Generate pages / screens from prompt | ✅ Yes | ✅ Yes | ✅ Yes |
| Edit output at design level (no code) | ❌ Code only | ❌ Code only | ✅ Full design manipulation |
| Auto-layout / style editing in UI | ❌ | ❌ | ✅ Like Figma |
| Figma import / reference | ✅ Strong | ⚠️ Partial | ✅ Yes |
| GitHub sync | ❌ | ❌ | ✅ Auto-sync |
| End-to-end without platform switching | ❌ Requires Figma first | ❌ | ✅ Complete pipeline |
Final Verdict
Claude Design is a worthwhile addition to the AI design landscape — particularly if you're already deep in the Anthropic ecosystem and want to connect your existing Figma assets to AI-powered prototyping without rebuilding your workflow.
The Figma-to-design-system bridge is the genuinely novel piece, and I expect it'll be very compelling for teams that live in Claude and Figma simultaneously. The low-friction "add Claude after Figma" positioning is smart and adoptable.
But it doesn't close the gap that matters most: the ability to stay in the design layer after generation. Until AI design tools let you refine results visually — with the same fluency Figma gives you — they're still asking designers to hand off to developers earlier than necessary.
Pencil.dev closes that gap. That's why, despite not being an ambassador or having any affiliation with the product, it's still the tool I recommend and use daily. When you can go from system to screen to export entirely in a design environment — with AI doing the heavy lifting but human judgment steering the visual decisions — that's a fundamentally different quality of outcome.
Claude Design is a step in the right direction. But Pencil.dev is already a step further.