Claude Code: Claude Design Integration With /design-sync and /design
Claude CodeAnthropic's June 17 Claude Design overhaul connects design directly to Claude Code. A new /design-sync command syncs your design system from a local codebase into Claude Design, finished designs can be handed off to Claude Code without rebuilding them, and a /design command lets developers create, edit, import, and export design projects from the terminal. The update also cut token usage and added PDF, PowerPoint, and partner exports.
Sources & Mentions
4 external resources covering this update
Claude Design now stays on brand for daily work
Anthropic
Anthropic ships major Claude Design overhaul with design system imports, code round-trips, and a fix for its token-burning problem
VentureBeat
Claude Design will now stick to your brand guidelines instead of generic AI mockups
Digital Trends
Set up your design system in Claude Design
Anthropic
Claude Design connects to code, and to Claude Code
On June 17, 2026, Anthropic shipped a major overhaul of Claude Design, its Anthropic Labs product for turning prompts into on-brand designs, prototypes, slides, and landing pages. The standout part of the update for developers is a direct connection between Claude Design and Claude Code, turning a flashy design demo into a practical design-to-code workflow.
Sync your design system with /design-sync
Teams can now sync a design system directly from a local codebase into Claude Design using a new /design-sync command. Instead of manually uploading components or re-describing brand rules, Claude Design reads the system from your repository, builds against those components, checks its output against them, and auto-corrects before you ever see the result. The same overhaul lets larger organizations import one or more design systems from a GitHub repository, design files, or raw uploads, and an admin role can approve a single standard system and lock down edits.
Design from the terminal with /design
Developers can also reach Claude Design features from the terminal using a /design command, creating, editing, importing, and exporting design projects without leaving their development workflow. When a design is ready, it can be handed off to Claude Code to build, rather than rebuilt from scratch. This closes the loop between design and implementation: a concept can move from Claude Design into Claude Code with its structure and brand intact.
Availability
Claude Design is in beta on the Claude Pro, Max, Team, and Enterprise plans and is included with the subscription. For Enterprise it is off by default, and an admin enables it in organization settings. The June 17 update also reduced the product's token usage, addressing earlier complaints that it consumed allowances quickly, and added exports to PDF and PowerPoint along with connections to tools like Vercel, Lovable, Replit, Adobe, Canva, Gamma, Miro, and Wix.
Why it matters for Claude Code users
For Claude Code users, the integration extends the agentic coding workflow upstream into design. A team can define its design system once, keep Claude Design on brand automatically, and hand finished designs to Claude Code for implementation. The /design-sync and /design commands make that handoff a terminal-native step rather than a copy-paste exercise across separate tools.