What's New in Claude Design (June 2026 Update) and What's Still Missing

On June 17, 2026, Anthropic shipped the first major overhaul of Claude Design since its April launch. The update added design system imports, a bidirectional Claude Code integration, and a real canvas editor with drag/resize/align. Token usage dropped. Stability improved. The one thing nobody got: a video export button. Claude Design still produces beautiful animations and still has no native way to save them as MP4.

If you only have thirty seconds, that's the summary. The rest of this article is the detail: what each feature actually does, what changed for day-to-day use, and how the export gap still works.

What Changed in Claude Design's June 2026 Update?

Four things, in order of impact:

1. Design system imports. You can now bring a design system into Claude Design from a GitHub repository, design files, or a raw upload. Claude builds with your components and auto-corrects its output against the system before you ever see it.
2. Claude Code integration in both directions. Connect the Claude Design MCP server to Claude Code and you can create and edit design projects without leaving the terminal. A /design-sync command pulls your local codebase's design system into Claude Design (or pushes what you've built in code back to the canvas). When a design is ready, Claude Code picks it up with no rebuild, no screenshot handoff.
3. A real canvas editor. Drag, resize, and align elements directly. You no longer burn a full model turn every time you want to nudge a button two pixels left.
4. Shared usage limits. Claude Design now draws from the same pool as Claude chat, Cowork, and Code. Anthropic says the average turn also uses fewer tokens and error rates dropped sharply.

The beta is available on Claude Pro, Max, Team, and Enterprise. It now has its own slot in the Claude desktop sidebar and lives at claude.ai/design.

What Are Design System Imports?

Before the update, every Claude Design output started from a generic aesthetic. Clean, competent, interchangeable, and recognizable as "the AI slop look" within five seconds. The fix existed (paste your website URL into project setup), but it was a soft hint, not a hard constraint.

The June update makes brand adherence a real feature. You can import a design system three ways:

• GitHub repo. Point Claude Design at the repo that contains your component library. It walks the code, extracts tokens and components, and uses them as the actual building blocks.
• Design files. Upload your Figma library or equivalent. Claude treats those components as the canonical source.
• Raw upload. Drop in a ZIP with brand assets, type specs, and color tokens. Useful when the source of truth lives in a doc instead of a repo.

Once imported, Claude generates against the system, runs a check pass, and corrects anything that drifts before showing you the result. For larger teams, an admin role can lock a single approved system across the org so designers cannot override it.

The practical effect: outputs now look like your product, not like everyone else's Claude Design output. This was the single biggest visual complaint in the first two months, and it is now fixed for anyone who takes ten minutes to import a system.

How Does the New Claude Code Integration Work?

The April version of Claude Design ended at "export a ZIP and rebuild it manually." The handoff to engineering was a screenshot and a vibe. The June update closes that loop.

From Claude Design to Claude Code: when a design is ready to ship, you hand it off to Claude Code. Claude Code picks up the exact design, the exact components, and the exact state. No screenshot. No rebuild. Engineers continue from where the designer stopped.

From Claude Code to Claude Design: connect the Claude Design MCP server (claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp), sign in with /design-login, and two things become available in the terminal:

• Claude Code can create, edit, and hand off Claude Design projects through the connected MCP server, without context-switching into the browser. Useful when a dev needs to spin up a quick visual without leaving the CLI.
• /design-sync pulls your local codebase's design system into Claude Design. So when a designer opens a new Claude Design project, the components on offer are the ones already shipping in your product, not generic stand-ins.

This is the change power users wanted most. It does not magically make Claude Design "production-ready," but it removes the worst friction point in the workflow.

What Is the New Canvas Editor?

In the old version, every change went through chat. Want to move a button two pixels? Type a sentence, wait, burn a model turn. The bill added up fast on small tweaks.

The new canvas editor lets you do direct manipulation. Drag to move. Drag corners to resize. Click to select and align. None of these actions trigger a model call. You only spend tokens when you actually need Claude to generate or rewrite something.

This is the change that fixes Claude Design's worst economic problem. The April launch ran through a Pro plan's weekly quota in a single serious session. The combination of the canvas editor, fewer tokens per turn, and the shared-quota pool means users can now actually iterate without watching the meter the whole time.

Did the June 2026 Update Add Video Export?

No. The update added "more export options" to the existing list (HTML, PPTX, PDF, ZIP, internal share link, Canva), but video is still not on it. Claude Design produces animations that run as live React code in a browser. There is still no button to save those animations as an MP4 file.

This is now a deliberate gap, not an oversight. Anthropic shipped a major feature release and chose not to address it. The most likely reason: rendering video reliably from arbitrary React code is genuinely hard, and the third-party ecosystem has already filled the gap.

How to Export Claude Design as MP4 (After the Update)

The export workflow has not changed. The Claude Design share link still works. The fastest path is still claude2video: paste your share URL, get an MP4 back. Same domain-replace trick also works: take any claude.ai/design/... share link, swap claude.ai for claude2video.com, and the renderer picks it up automatically.

Three things that did get better as side effects of the update:

• Cleaner output. Designs built against an imported design system render more consistently frame-to-frame, which matters for video output.
• Fewer regenerations. The canvas editor lets you finalize the design without burning model turns, so the version you export is the one you actually wanted, not "close enough before I hit my quota."
• Stable shareable state. Anthropic ships "hundreds of stability fixes." Share links are less likely to render differently the second time you open them, which means the renderer captures what you saw on screen.

For comparison with the alternatives (screen recording, browser extensions, headless CLI tools), see Best Tools for Claude Design.

What's Still Missing?

After the June update, the open gaps look like this:

• No native MP4/video export. Animations remain browser-bound by default. Third-party tools handle this.
• No live multi-user collaboration. Claude Design is still a single-seat tool. Figma-style co-editing is not part of this release.
• No audio in animations. Designs can include audio elements, but no exporter (Anthropic's or third-party) currently captures embedded audio reliably. Audio in exported MP4s is added during post-render muxing.
• No print/logo workflow. Claude Design targets product UI and motion. It is not a graphic design tool.

The June update closed the two biggest pain points (brand fidelity and token cost). The video export gap is what remains.

Frequently Asked Questions

When did Claude Design get its major update? June 17, 2026. Anthropic announced the overhaul roughly two months after Claude Design's April 17, 2026 launch. It is the first major feature release for the product.

Does the June 2026 update add a video export button? No. The update added more export options, but video and MP4 are still not among them. Claude Design exports HTML, PPTX, PDF, ZIP, a shareable link, and Canva. To get an animation as MP4, you still need a tool like claude2video.

What does the new Claude Code integration do? Two things. Designs hand off to Claude Code with no rebuild or screenshot step. And from the Claude Code terminal, connecting the Claude Design MCP server lets you create and edit designs directly, while /design-sync imports a local codebase's design system into Claude Design. The integration is bidirectional.

What is the new canvas editor? A direct-manipulation editor for moving, resizing, and aligning elements on the Claude Design canvas. Unlike chat-driven edits, canvas edits do not call the model and do not consume tokens. It is the main reason the new version feels noticeably cheaper to use.

Do design system imports work for everyone? Yes, on Claude Pro, Max, Team, and Enterprise. You can import from a GitHub repo, a design file upload, or a raw asset ZIP. Teams on Team and Enterprise plans get an admin role that can lock a single approved design system across the organization.

Did the update fix the usage limit problem? Mostly. Claude Design now shares its quota with Claude chat, Cowork, and Code instead of having a separate, smaller pool. Anthropic also reports lower token use per turn and lower error rates. The canvas editor reduces token spend further by handling small edits without a model call. It is no longer easy to burn an entire week's quota in one session, but heavy use of Opus 4.7 or Claude Fable 5 will still get you there.

Is Claude Design now production-ready for design teams? For prototyping, content creation, and design-to-engineering handoff, yes, more than before. For full design system ownership, multi-user collaboration, and handoff specs, Figma is still the reference. Claude Design complements Figma now; it does not replace it.