Anthropic adds /design to Claude Code for UI mockups

Anthropic has introduced a new /design skill for Claude Code that enables developers and designers to generate editable UI mockups directly within the command-line interface and desktop environment before writing any code. The research-preview feature brings Claude Design’s artboard workflow into the CLI and Desktop, built on artifacts, allowing users to iterate on visual concepts before committing to implementation. The capability is available on Pro, Max, Team, and Enterprise plans and requires the latest version of Claude Code.

Claude Code IDE showing dashboard UI mockup design with metrics, task list, and sales chart visualization side-by-side.

How the New Design Skill Works

Users can run /design to get editable artboards for their UI, pick one, tweak it, then have Claude implement it. This workflow marks a shift from traditional code-first development to a design-then-build approach within the same tool ecosystem. The integration eliminates the need to switch between separate design and development environments, streamlining the process from concept to production-ready code.

Claude Code /design workflow: terminal input generates UI mockups, designer edits in real-time, final code output

The feature leverages Claude’s artifact system, which has been used across other Claude products to render interactive content. By embedding artboards directly in the CLI and desktop applications, developers can see multiple design options, make adjustments in real time, and select the most suitable direction before any code generation begins. This approach reduces iteration cycles and aligns more closely with traditional design workflows that prioritize visual exploration.

Design Skills in the Broader Claude Ecosystem

The /design skill is part of a larger Claude Skills framework that has expanded significantly throughout 2025 and 2026. Anthropic released an official set of 17 skills on GitHub in late 2025, and the community has expanded this with larger collections such as a 63-skill designer pack distributed via a plugin marketplace. These skills function as structured instruction sets stored in Markdown files that install as slash commands inside the Claude Code environment.

Claude Code design tools: frontend, canvas, color palette, and handoff features for UI mockups and design workflows.

Skills like /frontend-design and /canvas-design accelerate production, while /ui-design:color-palette and /design-ops:handoff raise quality and reduce rework through better accessibility coverage and clearer implementation specs. By formalizing design and development patterns into reusable commands, Claude Code helps teams maintain consistency and avoid the generic aesthetics often associated with AI-generated output.

Integration with Claude Design Product

Claude Design is Anthropic’s dedicated visual creation product, launched April 17, 2026 and built on Claude Opus. The standalone design tool focuses on conversational creation of branded presentations, landing pages, prototypes, and one-pagers. Claude Design offers exports to PDF, PPTX, Canva, HTML, and handoff to Claude Code, creating a continuous pipeline from initial concept to functional code.

Claude Design interface showing website mockup with "Elevate Your Business" hero section, export options for PDF, PPTX, Ca...

The new /design skill in Claude Code effectively bridges these two products, allowing developers to access artboard-style workflows without leaving their development environment. Anthropic is pulling design, brand memory, and build prep into the Claude stack, which can cut the delay between idea, visual draft, and shipped business asset for founders, freelancers, and small teams.

Implications for Design and Development Workflows

The addition of visual design capabilities to Claude Code represents a convergence trend in AI-assisted development tools. Rather than maintaining separate tools for design mockups and code implementation, teams can now handle both stages within a single conversational interface. This integration is particularly relevant for startups, solo developers, and small teams that may not have dedicated design resources.

Developer using Claude Code with /design feature to create UI mockups and design prototypes on desktop workspace.

The tool targets design workflows that usually live in Figma, Canva, presentation tools, and front-end mockup tools, positioning Claude Code as a potential all-in-one solution for certain use cases. However, it is still a beta-style product, so advanced layouts can be uneven, and strong output still depends on clear prompts, real brand inputs, and human review.

For design teams already invested in custom design systems, the Skills framework provides a path to encode brand standards and component libraries directly into Claude’s behavior. If you’re sharing with a dev team through a repo, use Claude Code Skills, they commit alongside your code and everyone on the team gets the same context. This approach ensures consistency across all AI-generated designs and code, reducing the manual review burden.

Key Facts

The /design skill is currently in research preview and requires the latest Claude Code version
Available exclusively on Pro, Max, Team, and Enterprise subscription tiers
The feature integrates Claude Design’s artboard workflow directly into CLI and desktop environments
Claude Skills framework expanded from 17 official skills in late 2025 to community-driven collections exceeding 63 skills
Claude Design product launched April 17, 2026, establishing the foundation for design-to-code workflows

Looking Ahead

As AI design tools continue to mature, the competitive landscape is shifting from basic prompt-to-output capabilities toward structured, repeatable workflows that integrate with existing development practices. The competitive advantage in 2026 is not simply using AI, it is using AI with structure. The /design skill represents one approach to that structure, embedding visual iteration directly into the code development process.

The research-preview designation suggests Anthropic will continue refining the feature based on user feedback. As teams adopt the tool and share custom skills, the ecosystem around Claude Code design capabilities is likely to expand, potentially challenging established players in both the design tool and code generation markets.