Anthropic launched Claude Design yesterday. I've spent the last 24 hours pushing it through real work across our four active products, and I'm going to tell you exactly where it slots into the ideation-to-application workflow we already run—and why it's a bigger deal than the headlines are making it.
Back in March I wrote about how we turned our development over to AI without losing control. The short version of that piece: we run a five-phase workflow—Ideate, Spec, Build, Test & Review, Deploy—and we map each phase to a specific Claude surface. Chat for thinking. Cowork for knowledge work. Code for building. Quality gates (CI, AI code review, human review, staging verification) in between.
That workflow had one honest gap. Between “we've speced this feature” and “Claude Code is implementing it,” there was a step I kept hand-waving: what the thing is actually supposed to look like. You can describe a dashboard in a PRD. You can hand Claude Code a layout in prose. But until a human sees something visual, you're guessing. And if the guess is wrong, you find out after the code is written.
Claude Design is now the sixth phase. It sits between Spec and Build. And because of how Anthropic built it, the handoff on either side is native—no exports, no file shuffling, no “let me open Figma and describe this back to Claude.”
What Claude Design Actually Is
Claude Design is an Anthropic Labs product launched on April 17, 2026, powered by Claude Opus 4.7. It's a conversational design surface: chat on the left, canvas on the right. You describe what you're building, Claude generates a first version, and you refine through conversation, inline comments, and direct edits on the canvas.
It's in research preview and included with Claude Pro, Max, Team, and Enterprise subscriptions. You can access it at claude.ai/design. That's the product description. Here's what actually matters about it.
It Reads Your Codebase and Builds a Design System From It
This is the feature that made me sit up. During onboarding, Claude Design reads your codebase and your design files and extracts a working design system—colors, typography, components, spacing patterns, layout conventions. Then it applies that system to everything it generates.
For a team like ours, running four products across three companies, this is the difference between a prototype that looks like a prototype and a prototype that looks like it's actually part of Codewright or Showcase. I pointed it at our Positivity App repo yesterday. It pulled our Tailwind config, our component library, our color tokens, our type scale. The next screen it generated looked like it belonged in the app.
You can maintain more than one design system. For us that matters because Codewright, Showcase, The Positivity App, and Jim Flynn all have distinct visual identities. Claude Design can keep them separate and apply the right one per project.
The Handoff to Claude Code Is the Real Story
Here's the part the launch coverage undersold. When a design is ready to build, Claude Design packages the canvas, the design system, the component structure, and the state interactions into a handoff bundle—and you can pass it to Claude Code with a single instruction.
In practice: I designed a new onboarding flow for Jim Flynn in Claude Design, refined it through a half-dozen iterations, then clicked the handoff. Within a minute, Claude Code had the bundle open in the repo and was scaffolding the Next.js routes, the components, the state wiring, and the unit tests—styled correctly because the design system was already in the bundle. I reviewed, requested changes, merged. End to end, something that used to take a day and a half took about two hours.
This is what “closed loop” actually means. Ideation in Chat, spec in Cowork, visual prototype in Claude Design, implementation in Claude Code, review and ship. No tool leaves the Anthropic ecosystem. No context is lost in translation between apps.
The Updated Workflow: Six Phases Now, Not Five
Here's how the workflow looks after yesterday:
1. Ideate (Chat). Unchanged. Open Claude Chat with a vague idea. Talk through architecture, library choices, tradeoffs. Nothing gets written to a repo. This is the whiteboard.
2. Spec (Cowork). Unchanged. Cowork turns the whiteboard session into a real PRD—Word doc, spreadsheet of acceptance criteria, whatever shape the spec needs to take. This is where business context meets technical scope.
3. Design (Claude Design). New phase. Take the spec and turn it into something you can see. Prototypes, wireframes, full flows—whatever level of fidelity the decision requires. The design system from your codebase is already applied. Refine through chat and inline comments until the canvas reflects the actual decision.
4. Build (Claude Code). Mostly unchanged, but the input is richer. The handoff bundle from Claude Design goes in as a single instruction. Claude Code generates the implementation, the tests, the routing—all styled per the design system it was handed, not improvised from a text description.
5. Test & Review. Unchanged. CI runs lint, type-check, unit and integration tests. A fresh Claude session reviews the diff with no context from the writing session. A human reviews the PR. Staging gets manual verification.
6. Deploy. Unchanged. Vercel for our Next.js surfaces, containerized deploys for the Python services. GitHub Actions orchestrates.
The phases you already knew still do the same jobs. The new phase slots in between the two places where the old workflow had the weakest handoff—between a written spec and a generated implementation. That handoff is now a visual artifact plus a structured bundle, not a paragraph of prose and a hope.
Where Claude Design Changes the Math
The productivity lift from the original five-phase workflow came from handing the volume work to AI while humans kept the judgment work. Claude Design doesn't add a new kind of leverage—it removes a category of rework.
Before: we'd spec a feature, hand it to Claude Code, get back a functional implementation that looked roughly right, and then spend an hour or two tweaking layout, spacing, color, and component composition to match what we actually wanted. That hour or two, every feature, added up. And it was exactly the kind of work that eats an engineer's afternoon and doesn't feel like progress.
After: the design decision is made in Claude Design, on a canvas, with the design system already applied. Claude Code receives a bundle that encodes those decisions. The first implementation comes back already looking correct. The visual tweaking phase largely disappears, because the tweaks happened in design, not in code.
The net effect on our velocity is real but not enormous—call it 15 to 25 percent on feature work that has a meaningful UI component. The bigger gain is qualitative: fewer round trips, fewer “that's not what I meant” moments, fewer afternoons lost to nudging margins.
What About Figma?
I'll be direct: we weren't heavy Figma users to begin with. For a small AI-augmented team, Figma was always a little too much tool. We were doing enough design work to need something, and too little to justify a full design-ops practice.
Claude Design fits that gap better than anything else I've tried. It's the first design tool that feels built for the way we actually work—conversationally, in parallel with engineering, with the codebase as the source of truth for visual conventions rather than a separate design file that drifts.
If your organization has a dedicated design function with established Figma libraries, shared component specs, and a real design-to-engineering pipeline, Claude Design is not a Figma replacement today. It's a different shape of tool, aimed at a different kind of team. For us—a lean engineering team that needs design capability without a dedicated designer—it's the missing piece.
The Research Preview Caveats
It's a Labs product, so it behaves like one. Large codebases can make the onboarding scan lag. Comment persistence is occasionally flaky. The compact view has triggered save errors in my testing. None of this is surprising for a day-one experimental release, and none of it was a blocker for the real work I pushed through it. But if you're going to try it on a critical project, do what you'd do with any Labs tool: keep the source of truth in a place that doesn't depend on the preview being up.
The other honest caveat: the handoff to Claude Code is clean for component-level and flow-level work. It's less clean for deeply stateful, data-driven views where the design is a thin shell over a lot of business logic. Claude Design gets you the shell quickly and accurately; the logic still belongs in Spec and Build. Don't try to make Claude Design be your ERD.
What This Means for Jim Flynn and the R Software Stack
Our internal AI agent framework, Jim Flynn, orchestrates work across our products. It already knew how to route tasks between Chat, Cowork, and Code surfaces. As of this week it routes design tasks to Claude Design and knows how to hand a completed design bundle off to Claude Code with the right repo context attached.
For the clients we build AI implementations for—especially the regulated ones—this matters. A closed-loop design-to-code workflow inside a single vendor's ecosystem is much easier to audit, authorize, and compliance-review than a patchwork of Figma plus Copilot plus a handoff process maintained by whoever was in the meeting. Fewer data boundaries to cross means fewer compliance conversations to have.
And because Claude Design is covered by the same subscription the rest of the Claude surfaces are on, there's no net new tool to procure, authorize, or budget. It's in the seat you already bought.
The Take
A month ago I told you the ideation-to-application workflow was working. It still is. Claude Design doesn't replace any phase of it—it fills a gap between two phases that used to get papered over with prose and good intentions. The loop is closed now in a way it wasn't before.
If you're already running the five-phase workflow, add design as phase three and try the handoff. If you're not running the workflow yet, this is a good week to start—the pieces are all in place, the handoffs all work, and the tools all live inside the same subscription you're probably already paying for.
Want the Updated Workflow for Your Team?
Walk the six-phase workflow in the interactive Phase Explorer—or book time and we'll help you slot Claude Design into your existing pipeline without breaking what already works.
Phillip Roberts
CEO of R Software & Consulting, fractional CTO at Resolve Systems, and CTO & co-founder of Project Ethos. He leads development across ResolveNXT, Showcase, The Positivity App, and the Jim Flynn AI framework.