Claude Design Is Now Wired into Claude Code, and This Time Figma Should Worry

Claude Design has been around since April. For most of that time it was a neat toy: you could prompt your way to a prototype or a deck, but you had to rebuild your design system inside it from scratch, and none of your Claude Code harness, agents, custom commands, skills, could touch it. That is now over. Claude Design lives inside Claude Code, and that is the first real attack on Figma's position in a long time.

The core change is claude code design: a research preview skill that ships editable design artifacts straight from the terminal, built against your actual codebase and your actual design tokens, not an imported approximation of them. I tested it on Vibe Coding Academy's own site and course decks, and it is the first time I have generated a design asset from Claude Code that I would actually ship.

What actually shipped, and when

Claude Design launched as a standalone research preview from Anthropic Labs on April 17, 2026: prompt to designs, prototypes, slide decks, and one-pagers on a canvas, refined through conversation, with exports to PDF, PPTX, HTML, and Canva (Anthropic). It could build a design system from your codebase and hand a "handoff bundle" to Claude Code, but the connection only went one way.

On June 17, 2026, Claude Design moved into any Claude conversation, including Claude Code and the Artifacts tab, in beta on paid plans. That release introduced two commands you could run from the desktop app or the terminal: /design-sync to pull in your design system, and /design to create, edit, and sync design projects (Claude).

The step that actually matters for this article shipped in the third week of August, with Claude Code v2.1.234 and later. /design became a research preview skill built on artifacts, directly in the CLI and Claude Code Desktop. You give it a brief, Claude publishes a canvas of editable artboards, you pick one, tweak it, and then ask Claude Code to implement it against your real repo (Claude Code changelog). For implementation work heavy enough to need the deeper reasoning mode, that is exactly the kind of task Claude Code Ultracode is built for. An example straight from the release notes: /design redesign the composer based on what people actually use it for.

That is the difference between June and August. June put Claude Design in the same window as Claude Code. August put it in the same loop as Claude Code, skill invocation in, implemented code out.

I ran /design against my own codebase

I recorded a full walkthrough of this for the channel, using three of Claude Design's artifact types against real Vibe Coding Academy assets: a page mock-up, a course intro slide, and a resource doc template.

Design. I prompted "build a mock-up of the index page of Vibe Coding Academy's website" against the real codebase. The result was close to the live site, WYSIWYG editable, shareable, and set up for team collaboration on the prototype itself. It is less comprehensive than Figma once you are deep into a design system, and for anything beyond a simple layout tweak I would rather ask Claude Code to make the change than hand-edit the artboard. But for "collaborate on a prototype before handing it to tech", the gap between Claude Design and Figma closed a lot faster than I expected. As I put it in the video: "Everything that you did inside Claude Code, every agent, custom commands, all the harness that you had built inside Claude Code could not be directly leveraged inside Claude Design. And this is now over." If you want a repeatable process for getting that first prototype right instead of iterating blind, our series on building a professional frontend prototype with Lovable, Bolt, or v0 walks through the exact PRD-to-prompt workflow.

Slides. I asked for "one introduction slide" listing the eight 90-minute sessions of my Maven course, Ship Your First SaaS with Claude Code, using VCA's design system, running on the Fable 5.1 model. The result was, in my own words, "a bit bloated, to be honest, but what I really like here is that it actually reflects really the design system from Vibe Coding Academy." It came with a working present mode and speaker notes. I am never going to start a new slide from scratch manually again, which is a real time saver for anyone who ships a deck every week.

Docs. "Generate a template for sharing resources for each of my Maven sessions" produced something that looks and behaves like a Google Doc: edit, format, share, comment, all in place.

None of this uses an MCP server. /design and /design-sync are slash commands, or plain natural language, that call the Claude Design skill directly, reading tokens and React components out of your codebase with /design-sync (Claude support). If you are new to how Claude Code skills work in general, our complete guide to Claude Skills for product managers is a good primer before diving into /design.

Claude Design vs Figma

Figma's moat was never really the canvas. Plenty of prompt-to-design tools have tried to out-canvas Figma and failed, because the canvas was never why teams stayed. Figma won because it was where the team collaborated: designers, PMs, and engineers looking at the same file, leaving the same comments, referencing the same components.

Claude Design vs Figma used to be no contest, because Claude Design sat outside where your team actually worked. Now it sits inside the tool where your codebase and your Claude Code harness already live. That is a genuinely different competitive position: it is not "a faster way to mock something up", it is "the design layer of the tool you already run your engineering agents in". For a solo builder or a small product team that already lives in Claude Code, that is a meaningful pull away from opening Figma at all for early-stage prototypes and decks.

What it is not yet is a collaboration platform. Figma's commenting, multiplayer cursors, version history, and component governance are years deep and still ahead. If your team's actual bottleneck is design review across a dozen stakeholders, Claude Design does not solve that today.

If you would rather keep Figma and just let Claude Code talk to it, that route exists too: our guide to the Figma MCP integration with Claude Code covers it in full. The difference is one of direction. The Figma MCP route lets Claude Code read and manipulate files that live in Figma. /design generates and edits the artboard inside Claude Code itself, against your codebase, without ever opening Figma. They solve different problems, and for now I think most teams will want both. For the deeper hands-on walkthrough of that route, our series on turning Figma frames into shipped code with the Figma MCP Server covers the full workflow.

Claude Design vs Claude Code

These are not competing products, they are two entry points into the same underlying capability, and the distinction is worth being precise about. Claude Design is the artifact-generation layer: prompts in, editable canvas out, present in the standalone app, the Artifacts tab, and now the /design skill. Claude Code is the execution layer: it reads your repo, runs your build, and, when you pick an artboard, actually implements it in code.

Before August, using Claude Design felt like working with a separate contractor who occasionally handed off files. Now it feels like one more skill inside the same session, alongside your custom commands and subagents, which is exactly what we already covered in Claude Artifacts Are Now in Claude Code. This piece is the same news shape, one layer up: not just artifacts appearing inside Claude Code, but a dedicated design skill that publishes, edits, and hands off a full canvas of them.

One caveat worth naming plainly: it is not confirmed whether /design-sync round-trips changes made in the Design canvas back into your source components automatically, or whether that stays a one-way pull for now. Treat any workflow you build around it accordingly, and re-test after each Claude Code release.

Who should switch now, who should wait

My honest verdict, and it is probably not the one Anthropic wants me to give: for now, do not go ditch Figma, Notion, or Google Docs. I still believe that the collaboration features, the non-AI features if we can say so, that are still available inside the likes of Figma, Google Docs, and Notion are still better. Most organizations are going to keep using those interfaces and reach them through MCP servers instead, and both the Notion and Figma MCPs are genuinely very good.

Where I would switch today: early prototypes you would otherwise sketch alone before looping anyone in, slide decks for internal sessions and course material, and any doc template you regenerate more than once. That is real time back, with a result that is already on-brand because it reads your actual design tokens rather than a generic template.

Anthropic clearly read the room correctly on where the value sits. They properly understood that what is making the difference today is to what extent your SaaS is connected to the LLMs, and putting Claude Design inside the same harness as Claude Code is exactly that bet: not a better canvas, a better connection.

Claude Code design for product managers

For a PM, this is less about replacing your design tool and more about compressing the distance between an idea and something a team can react to. You can turn a feature brief into a clickable mock-up before an engineer opens their editor, generate the one-pager or slide deck for a stakeholder review without waiting on a designer's queue, or produce a resources doc template that matches your team's format every single time, and do all three from the same terminal session where you are already reviewing specs and running agents. Structuring that brief well matters more than the tool: our complete guide to Claude Code Plan Mode covers how to plan before you build so the artboard Claude publishes actually matches the feature you meant.

The bottom line

Claude Design standalone was a demo. Claude Design wired into Claude Code, with a skill that reads your codebase, publishes editable artboards, and implements the one you pick, is a product. It still is not a Figma replacement for team collaboration, and it is not trying to be yet. But it is the first version of Claude Design that actually threatens Figma's reason for existing inside a Claude Code shop: not a better canvas, a design layer that lives exactly where your harness already runs.