Claude Design is an Anthropic Labs product that turns prompts into polished visual work — designs, prototypes, slides, and one-pagers — and it now plugs straight into Claude Code. On June 18, 2026, Anthropic shipped a round-trip integration: hand a finished design to Claude Code to build the interface without starting from scratch, or type the /design command inside the Claude Code terminal to create, edit, and sync designs without leaving your coding workflow. Claude Design is powered by Claude Opus 4.7, runs in research preview for Pro, Max, Team, and Enterprise subscribers, can now read a local codebase so generated assets match your existing product, and shares usage limits with Claude Code and chat instead of drawing from a separate, smaller pool.
This is the update a lot of builders were waiting for. Claude Design launched in preview roughly two months ago as a standalone visual tool, walled off from the rest of the Claude stack. The June 18 release closes that gap. The design surface and the coding agent are now two ends of the same pipe — and the change that will matter most day to day is the boring one: shared usage limits and lower token consumption per turn.
What Anthropic Shipped
Anthropic announced a major overhaul of Claude Design, the Anthropic Labs product it describes as a way to "collaborate with Claude to create polished visual work like designs, prototypes, slides, one-pagers, and more." The headline change is a tighter, two-way connection with Claude Code, the company's terminal-based coding agent.
There are three concrete pieces to the release, each confirmed across Anthropic's own announcement and independent reporting from Engadget and VentureBeat:
- Design-to-code handoff. Per Anthropic, "when a design is ready to build, Claude packages everything into a handoff bundle that you can pass to Claude Code." Claude Code can then build the interface without a developer rebuilding the layout from scratch.
- The
/designcommand. The flow now runs the other way too. Engadget reports you can "type /design into your terminal" to create and edit designs directly from Claude Code, without switching to a separate app. VentureBeat frames the same capability as "code round-trips" between the two products. - Codebase-aware design. Claude Design "can now begin working from a local codebase," so the assets it generates align with what already exists in your product. VentureBeat reports the import tooling can "build entire design systems from GitHub and raw files."
The model under the hood has not changed: Anthropic confirms Claude Design is "powered by our most capable vision model, Claude Opus 4.7." Availability is unchanged as well — it remains "available in research preview for Claude Pro, Max, Team, and Enterprise subscribers."
Design-to-Code in One Workflow
The practical story here is the elimination of a handoff seam. Before this release, a designer working in Claude Design and an engineer working in Claude Code lived in two separate tools. Getting a polished mockup into a real, running interface meant a manual translation step — the classic point where intent gets lost, spacing drifts, and components get rebuilt approximately rather than exactly.
Anthropic's "handoff bundle" is the answer in one direction. Instead of exporting a flat image or a spec doc, Claude Design packages the design context and passes it to Claude Code, which builds against it. In our own production workflow we lean on Claude Code daily, and the friction it removes is real: the agent already has the structure, so it spends its effort on implementation rather than reverse-engineering a screenshot.
The /design command closes the loop from the engineering side. A developer who lives in the terminal no longer has to context-switch into a separate design app to spin up a layout, iterate on a prototype, or sync a change back. The design work happens inline, in the same session where the code lives. For solo builders and small teams — where the "designer" and the "engineer" are frequently the same person — that single-surface workflow is the headline.
Why Codebase-Aware Design Matters
The most underrated change is that Claude Design can now read a local codebase before it generates anything. Generative design tools have a well-known failure mode: they produce something beautiful that has nothing to do with your existing product. The buttons are the wrong shape, the type scale is invented, the spacing tokens don't exist in your system — so the "design" creates work instead of saving it.
Pointing Claude Design at a codebase reframes the problem. According to Engadget, generated assets now "align with existing products," and the import tooling can construct "entire design systems from GitHub and raw files." In other words, the tool can learn your actual components, tokens, and patterns and design within them, rather than against them. For any team that already has a real product in production, that is the difference between a toy and a tool.
It also strengthens the round-trip. If Claude Design starts from your codebase and Claude Code builds back into it, the two products are reading and writing the same source of truth. That is a meaningfully tighter loop than exporting a design file and hoping the implementation matches.
Shared Limits and the Token-Burning Fix
Here is the change that will quietly affect the most people. Claude Design previously drew from its own separate, smaller usage pool. As of this release, it "now shares usage limits with its other products, including Claude Code and regular old chat," per Engadget. VentureBeat lists the shared pool as chat, Claude Cowork, and Claude Code. Anthropic's framing is that most users will hit limits less frequently as a result.
That matters because the previous version had a reputation for burning through credits fast. VentureBeat explicitly frames this overhaul as "a fix for its token-burning problem." Alongside the shared pool, Anthropic says it reduced average token consumption per turn while maintaining output quality, and that error rates dropped sharply.
Anthropic has not published specific numbers for the token reduction or the error-rate improvement, so we are reporting the direction of the change rather than a percentage. We have not independently benchmarked the new build. But the combination — a bigger shared pool plus lower per-turn consumption — is the kind of unglamorous fix that determines whether a research-preview tool is something you actually open every day or something you ration.
Who Gets It, and What Stage It's At
Claude Design remains in research preview. Per Anthropic, it is available to Claude Pro, Max, Team, and Enterprise subscribers. There is no separate add-on to buy for the new integration — if you already have Claude Design access on one of those plans, the Claude Code connection and the /design command come with it.
"Research preview" is worth taking literally. It signals that the surface, the limits, and the behavior can change without notice, and that Anthropic is still shaping the product based on usage. The token-efficiency work in this very release is evidence of that — it is a course correction on a product that has only existed in preview for about two months.
If you are weighing whether to commit a workflow to it, the honest read is: the integration is genuinely useful, but treat anything in research preview as a moving target. Our recommendation is to use it where a broken or shifting workflow is survivable, and keep your production-critical paths on stable tooling until Claude Design graduates out of preview.
How It Fits Into Anthropic's Coding Stack
This release reads as another move to make Claude Code the center of gravity for building software with Anthropic's models — not just writing code, but designing the thing the code renders. Claude Code already anchors a wide surface, from terminal coding to multi-agent orchestration, and it is the tool we cover and use most heavily.
For a sense of where Claude Code sits in the market, our hands-on Claude Code review walks through the agent in daily use, and our head-to-head comparisons put it against its closest rivals: Claude Code vs Cursor and Claude Code vs OpenAI Codex. The design integration adds a capability neither of those competitors pairs natively today: a first-party visual design surface that round-trips directly with the coding agent.
It is also a vote of confidence in Claude Opus 4.7 as a vision model. The same model family that backs the coding agent now backs the design surface, which is part of why the handoff is coherent rather than lossy — both ends speak the same underlying representation.
Our Take
The flashy framing is "design-to-code in one workflow," and that part is real. But the change we would actually point to is the plumbing: shared usage limits and a fix for token burn. A design tool that runs out of headroom in twenty minutes is a demo. A design tool that shares a generous pool with the agent you already pay for, and sips tokens instead of gulping them, is something you can build a habit around.
The codebase-aware piece is the other thing we would not skip past. The reason most AI design output gets thrown away is that it ignores the product it is supposed to live in. Letting Claude Design read your repo first is a direct shot at that problem, and it is what makes the round-trip with Claude Code more than a gimmick.
What would make us more bullish: published numbers on the token and error-rate improvements, and a path out of research preview. Until then, this is a strong, genuinely useful update that we would happily use for prototyping and internal work — and that we would still keep one step removed from anything mission-critical.
Frequently Asked Questions
What is Claude Design?
Claude Design is an Anthropic Labs product that lets you collaborate with Claude to create polished visual work — designs, prototypes, slides, one-pagers, and more. It is powered by Claude Opus 4.7, Anthropic's most capable vision model, and is available in research preview for Claude Pro, Max, Team, and Enterprise subscribers. As of June 18, 2026, it integrates directly with Claude Code.
How does the Claude Code integration work?
It works both ways. When a design is ready to build, Claude Design packages everything into a handoff bundle you pass to Claude Code, which builds the interface without starting from scratch. In the other direction, you can type the /design command inside the Claude Code terminal to create, edit, and sync designs without leaving your coding workflow. VentureBeat describes this two-way flow as "code round-trips."
What is the /design command?
The /design command is run inside the Claude Code terminal. Per Engadget, you "type /design into your terminal" to create and edit designs directly from Claude Code, without switching to a separate application. It is the engineering-side entry point to Claude Design, letting developers spin up and iterate on designs in the same session where their code lives.
Which plans get Claude Design and the Claude Code integration?
Claude Design is available in research preview for Claude Pro, Max, Team, and Enterprise subscribers. There is no separate add-on for the Claude Code integration — if you already have Claude Design access on one of those plans, the handoff bundle and the /design command are included.
Can Claude Design work from my existing codebase?
Yes. As of the June 18, 2026 update, Claude Design can begin working from a local codebase, so the assets it generates align with your existing product. According to VentureBeat, the import tooling can build entire design systems from GitHub and raw files, learning your real components and tokens rather than inventing new ones.
Does Claude Design still burn through usage limits?
Less than before. Claude Design now shares usage limits with Claude Code, chat, and Claude Cowork instead of drawing from a separate, smaller pool, so most users hit limits less often. VentureBeat frames the overhaul as a fix for the product's "token-burning problem," and Anthropic says it reduced average token consumption per turn while cutting error rates sharply. Anthropic has not published specific figures.
What model powers Claude Design?
Claude Design is powered by Claude Opus 4.7, which Anthropic calls its most capable vision model — the same model family that backs Claude Code. Using one model across both the design surface and the coding agent is part of why the design-to-code handoff stays coherent rather than lossy.
Sources: Anthropic — Claude Design; Engadget; VentureBeat. Reported June 18, 2026.
