Most takes on Claude Design are either "this kills Figma" or "it's just another v0." Both are wrong, and both miss the actually interesting question — where does it fit into a real product designer's workflow without disrupting the parts that already work?
I spent the last week putting Claude Design into my actual product cycle, redesigning a piece of Cal.com (the open-source scheduling platform our team uses internally). Not a landing page demo. Not a pitch deck. A real feature on a real codebase, taken from concept to wireframe to code handoff. Here's what I learned about where this tool earns its place — and where I'd still reach for something else.
In this post, I'll walk through how I'm fitting Claude Design into my product cycle right now. We'll cover what it actually replaces (very little), where it slots in best (concept exploration), the exact prompts and clarifying questions that get to a usable wireframe, and how to hand off cleanly to Claude Code when you're ready to build.
Table of contents:
- What Claude Design actually is
- Why a brainstorming layer matters
- The Cal.com redesign: a worked example
- How to use Claude Design in your product cycle
- Where Claude Design still falls short
- Tools and resources
What Claude Design actually is
Claude Design is a conversational design tool that pulls from your real codebase to generate wireframes, concept explorations, and brand-aligned visuals. You connect it to your repo, it ingests your design system, and from then on every wireframe it generates speaks your team's design language instead of inventing a generic SaaS aesthetic from scratch.
That last part is the differentiator. The split screen looks similar to Claude — chat on one side, generated artifact on the other — but the artifacts are tailored to your tokens, your typography, your component patterns. It's the closest thing I've seen to a design tool that actually starts from your existing system instead of asking you to retrofit one.
In practice, it shows up in three ways:
- A design system review flow where you sign off on tokens, type scale, and color values one by one
- A wireframe generator that asks PRD-style clarifying questions before producing options
- A commenting and sharing layer so teammates can leave feedback directly on the canvas
The honest takeaway: Claude Design is a concept exploration tool with a real codebase plugged in. That sounds modest, but it's what makes it useful.
Claude Design vs. Figma
Figma is still where high-fidelity design lives. It's where you push pixels, set up auto-layout, and produce the polished screens stakeholders sign off on. Claude Design doesn't replace any of that — you can't redline, you can't drag handles, and you can't manage multi-file design systems the way Figma does.
Where Claude Design wins is the phase before high-fidelity: when you're trying to figure out what direction to even pursue. Figma is great for executing on a concept. Claude Design is great for generating five concepts in ten minutes so you actually know which one to execute on.
Claude Design vs. Claude Code
Claude Code is where I still live for shipping features. It's where I make real changes on the codebase, push PRs, and design directly against the components engineers use in production. Claude Design is upstream of that — it's where I spin up rough ideas, pick a direction, and then bring that direction into Claude Code for the build.
The reason I split it this way is practical. Claude Design is not yet doing 1:1 fidelity against your component library, even when connected to the repo. It's also expensive in tokens for high-fidelity work. So I treat the two tools as different stages in a single pipeline, not interchangeable.
Claude Design vs. v0 or Lovable
The big difference is the codebase connection. v0 and Lovable produce slick output, but they're inventing patterns from scratch — which is fine for a landing page or a one-off prototype. The output usually doesn't match what your product actually looks like. Claude Design pulls from your real design system, which means the wireframes feel native to your brand from the first generation.
If your goal is "ship a marketing page tomorrow," v0 is faster. If your goal is "explore concepts that fit inside an existing product," Claude Design is the right tool.
Why a brainstorming layer matters
Most product designers I talk to are stuck in the same loop: they get a brief, jump straight into Figma, push pixels for two hours, and ship the first idea they had — because there's no time to explore the second, third, or fourth.
That's the gap Claude Design fills. It compresses the concept exploration phase from "I have time for one direction" to "I have time for five." That changes what kind of designer you can be, especially at a funded startup where speed and quality are constantly in tension.
There's nuance here. Faster ideation isn't always better — bad ideas generated quickly are still bad ideas. But if you treat Claude Design as a thinking partner that helps you pressure-test directions before committing, you end up with stronger work, not just more of it. The ratio of explored ideas to shipped ideas finally goes up.
If you do it right, you'll see benefits like:
- More ideas, less attachment. When the cost of generating a direction drops, you stop falling in love with the first one. You evaluate five and pick the strongest.
- Faster team alignment. Sharing a wireframe link with comments turned on lets your PM, engineer, and stakeholders weigh in before you sink time into high fidelity.
- A real upstream artifact. Instead of jumping from Figma file to Jira ticket, you have a documented exploration that captured the directions you considered and the one you chose.
The Cal.com redesign: a worked example
To make this concrete, here's the actual redesign I worked on — turning Cal.com's availability setup from a click-heavy form into a conversational AI experience.
The problem: The current availability flow is deeply manual. You click into your calendar, select days, set time blocks, repeat. It's the kind of UI everyone has seen a thousand times and nobody loves. With AI shifting how users expect to set things up, I wanted to explore a chat-first version: what if you just told the app "I work Monday through Thursday, 10 to 5, with lunch from noon to one" and it built the schedule for you?
The solution: I set up Cal.com's design system inside Claude Design first — connected the GitHub repo, used the actual mission statement from the codebase, and gave it a brand description ("feels like software exhaling — calm, confident, deliberately quiet"). Then I prompted it to wireframe the new flow. Before generating anything, it asked me PRD-style clarifying questions: where does the conversation live, how does the user reply, what should the assistant ask about, how smart should the suggestions be. I picked five wireframe variants in a sketch style with a hint of color, then iterated until one direction stood out — chat on the left, a live-updating week calendar on the right.
The results:
- Five distinct wireframe directions generated in roughly 15 minutes
- One direction selected, refined with chip-style prompts and inline calendar feedback
- A shareable link with comments so teammates could weigh in asynchronously
- Clean handoff package ready to bring into Claude Code for the high-fidelity build
The whole exploration phase took less than an hour. In my old workflow, that's two days minimum.
How to use Claude Design in your product cycle
Here's the playbook I've landed on after a week of real use. This is the order I'd recommend if you're trying to slot Claude Design into your team's workflow without breaking the parts that already work.
1. Set up your design system first — and review it carefully
This is a one-time setup, but it's the most important step. Connect your GitHub repo, drop in your design system file or Storybook URL, and write a couple of sentences describing how the brand should feel. Then go through every section — type scale, color tokens, hierarchy — and either approve it or flag what needs work.
Don't skip this. The whole reason Claude Design produces brand-aligned output is because it's reading from this baseline. If the baseline is wrong, every wireframe downstream will be subtly off.
Ask yourself: does the type scale match what's actually in production? Are the color values consistent across the hex codes and HSL values it shows? If something looks off, click "needs work" and have the conversation right there.
2. Use it for exploration, not execution
Claude Design is upstream of high fidelity. Treat it that way. When I want to explore a new feature direction, I prompt it for wireframes with a sketch-style aesthetic and ask for multiple options — five is usually the right number. Enough to compare, not so many you can't hold them in your head.
The output is meant to be rough. Don't try to perfect a single wireframe inside Claude Design. The point is to figure out which direction to commit to, not to ship the wireframe itself.
3. Lean into the clarifying questions
Before Claude Design generates anything substantial, it asks PRD-style questions: where does this live, how does it behave, what should it suggest. These questions are the most underrated part of the tool.
As a designer, I'd ask myself these questions anyway — but having them surfaced and answered before the wireframe gets generated forces me to think through the problem more rigorously. The wireframes are better because the upstream thinking is sharper. Don't speed-click through this part.
4. Use the share link for async feedback
Once you have a few directions, copy the share link and send it to your team. Comments work the way they do in Figma — drop them on specific parts of the canvas, tag teammates, leave reactions. There's also a "send to Claude" option where the AI will try to act on the comment for you.
Honest caveat: commenting still feels rough. I've left comments and lost track of where they were on the canvas, and the "send to Claude" flow doesn't always do what you expect. But the share-link layer is genuinely useful for getting eyes on your exploration before you commit to a direction.
5. Hand off to Claude Code for the actual build
This is the step most people miss. Once you've picked a direction, don't try to push the wireframe to high fidelity inside Claude Design. It will burn tokens, take longer, and the output won't match your component library as cleanly as Claude Code can.
Instead, copy the share command from Claude Design (you'll need a team plan to share) and paste it into Claude Code with a prompt like: "Fetch this design file, read the README, and build the wireframe using actual UI components from our codebase. Make it high-fidelity." Claude Code will pull the design, plan the implementation, and produce code that uses your real components.
Doing this well doesn't require a complete tooling overhaul. Each tool stays in its lane — Claude Design for concept exploration, Claude Code for implementation, Figma for the parts of your design system that still live there.
Where Claude Design still falls short
I want to be honest about the limits, because the hype cycle is going to flatten out and the real workflow is more nuanced than "AI replaces everything."
High-fidelity work is rough. Even with the codebase connection, the output isn't 1:1 with your component library. Spacing is off, components don't always match, and you'll spend more time correcting than designing. This is why I move to Claude Code as soon as I'm past the wireframe phase.
Editing tools are minimal. You can't push pixels. You can change copy and tweak code, but you can't make the kind of fine-grained design adjustments you'd expect from a real design tool. If you want to nudge an element by 4 pixels, this isn't the place.
Commenting needs work. Comments pile up but tracking them on the canvas is harder than it should be, and the AI-assisted resolution flow is unpredictable. Useful, but not yet a Figma replacement for async review.
These aren't dealbreakers — they're a reminder that the tool is genuinely new. Use it for what it's good at, work around what it isn't.
Tools and resources
If you're trying to plug Claude Design into your team's workflow, here's the full stack I use right now:
- Claude Design — for concept exploration and wireframing
- Claude Code — for high-fidelity build and PR handoff
- Figma — still where the canonical design system lives, plus stakeholder reviews
- Storybook — to feed Claude Design a structured component reference when your Figma design system isn't fully synced
- Cal.com — the open-source scheduling platform I used as the test case in this post
Want help mapping Claude Design into your team's product cycle? Book a workshop with our team → contact us!
