Anthropic Launches Claude Design to Automate Brand Systems and Visual Prototypes

Anthropic Labs Unveils Claude Design to Automate Visual Workflows

Anthropic Labs has officially launched Claude Design, a new collaborative tool designed to help users build visual assets, interactive prototypes, presentations, and mockups. Released on April 17, 2026, the tool is powered by Claude Opus 4.7, which Anthropic describes as its most capable vision model. The release has already sent ripples through the design industry, with reports indicating that leading interface design platform Figma saw its valuation drop by 730 million dollars following the announcement.

Currently in research preview and beta, Claude Design is accessible to subscribers on Claude Pro, Max, Team, and Enterprise plans. For Enterprise users, the feature is disabled by default and must be manually toggled on by an administrator under the organization settings menu. Users can access the tool directly at its dedicated web address, claude.ai/design, or through the sidebar in the Claude Desktop application.

A Dual-Pane Canvas for Brand-Aligned Prototyping

The interface of Claude Design is split into a chat panel on the left and an interactive canvas on the right. Users describe their design concepts in natural language, and the AI generates a live, functional design on the canvas. To ensure consistency, the platform automatically builds a custom design system during the onboarding process. It achieves this by scanning provided assets, which can include React codebases, existing design files, slide decks, PDFs, Word documents, or brand guidelines. From these sources, the AI extracts primary, secondary, and accent colors, typographic hierarchies, reusable components, and layout patterns.

Under the hood, Claude Design generates its interactive artifacts using HTML and inline JSX powered by React and Babel. When editing, users can refine assets through conversation, inline comments, direct canvas edits, or custom sliders generated by the AI. The system is engineered to handle human-centric workflows, such as using one-indexed slide labels rather than zero-indexed array positions to prevent communication errors during team reviews.

Deep Integration with Claude Code, Figma, and Canva

One of the primary strengths of the new tool is its seamless transition from visual layout to production software. By utilizing the /design-sync command, teams can pull their design systems directly into Claude Code. Developers can also connect to the Claude Design Model Context Protocol server directly from their terminals. This is accomplished by adding the server via a dedicated command and logging in with the /design-login command. This setup allows engineers to import live prototypes and implement designs without needing to manually recreate layouts from static screenshots.

The system also offers versatile export options, allowing users to export slide decks as PowerPoint files or send their work directly to Canva with a single click. The broader potential of combining Claude with design software was recently demonstrated by designer Abhi Chatterjee, who connected Claude Code to Figma to build a complete design system. Using the AI, Chatterjee successfully generated primitive colors, semantic tokens, typography scales, a complex button component containing over 120 variants, and a fully functional login screen.

As generative AI moves from simple text generation to executing pixel-perfect frontend layouts aligned with production codebases, traditional design software providers will need to rapidly evolve their collaborative capabilities to avoid becoming obsolete middle-men in the product development pipeline.