Claude Design is here. Everything you need to know to get up to speed quickly.
🧠How it works, 5 practical examples and a gallery of 25+ creations from others you can use as inspiration
🔒 The Knowledge Series breaks down emerging AI technologies with practical playbooks designed specifically for product teams. Get 100+ guides and practical tutorials covering everything from Claude Code and MCP to agentic workflows, vibe coding, and more.
Claude Design is one of the most significant announcements from Anthropic in 2026 so far.
Since its release on Friday, Figma’s stock has dropped a further 9% and right now, the tension between these two companies is at all time highs.
Anthropic’s Chief Product Officer Mike Krieger resigned from Figma’s board on April 14th - the same day it was reported Anthropic’s next model would include design tools that could compete with Figma’s primary offering. And following the launch of Claude Design, Figma’s CEO posted this image which pretty much sums up his feelings about Claude’s vision of AI-powered design:
But putting the drama aside, whether you think this new design tool will replace Figma for product development in the long run or not, Anthropic is placing a big bet on it.
And so for product teams, that makes Claude Design worth understanding now. In this Knowledge Series, we’ll break down what it is, how it fits into the wider Claude product stack, and where it’s already useful in practice.
We’ll test its core workflows hands-on, using Claude’s native design system capabilities to create things like mobile onboarding journeys, landing page prototypes, stakeholder decks and more. You’ll also get a downloadable gallery of 25+ examples to help you see what strong Claude Design output actually looks like in the wild.
Coming up:
Claude Design Explained; what it is, what you can do with it and how it fits into the wider Claude product stack
Hands on: 5 practical examples of what you can build with Claude Design
Mobile app onboarding journey prototype
An interactive landing page for our product
A 3D visual component to bring a specific feature to life
A stakeholder alignment deck that pitches includes potential design directions for exploration
Pushing a prototype to Claude Code for further editing
A library of over 25 examples of other people’s Claude Design creations you can use as inspiration including dashboards, app designs, protoypes and more
Claude Design Explained
Before we dig into some hands-on examples together, let’s first familiarise ourselves with some of the core concepts to get up to speed quickly.
Here’s a snapshot of what Claude Design is, what’s its capable of and how it fits into the wider Claude product family:
When you first log onto Claude Design you’ll see a split screen. On the left is where you can decide what types of assets you want to create and on the right is where you can make edits, refine your designs and view the output:
There are two main ways you can interact with Claude Design:
Chat for the broader changes - structural changes, aesthetic shifts, requests for multiple variations, or asking Claude to review the design for accessibility and usability
Inline comments for the more high precision, surgical tasks - click directly on a canvas element and tell Claude exactly what needs to change, without cluttering the main conversation
But before doing anything, it’s worth getting your design system set up.
How to set up your design system
At the heart of Claude Design is the design system. Anthropic recommends that before you start experimenting with anything, if you want your output to match your existing workflows / product, you should get your design system set up. And to be fair to them, they offer plenty of ways to do this.
For company name and blurb, you can start by describing your company and what you’re building.
Then attach your design resources - all of these are optional, but the more you provide the better:
GitHub link - paste a repo URL so Claude can read your existing components, architecture, and styling patterns. For large codebases, link a frontend-focused subfolder rather than the whole monorepo.
Local code folder - drag a folder from your computer. Claude copies selected files rather than uploading the full codebase.
Figma file (.fig) - parsed locally in your browser and never uploaded to Anthropic’s servers.
Fonts, logos, and other assets - drag files directly into the last field.
Here’s an overview of each of these resource types along with some scenarios to consider for each asset type:
Where Claude Code fits alongside other Claude products
It’s still super early days, but right now, Claude Design sits in its own standalone space as a research preview but you can access it through the Claude Chat sidebar at anytime. It’s not yet in the Claude desktop app but it’s likely to be added there too very soon.
As a quick mental model, you can think of Claude Chat as a traditional chat you interact with, Cowork as a worker you delegate work to, Code as an engineer you can use to ship ideas and Design as a place where you experiment and refine those ideas.
Hands on: 5 practical examples of what you can build with Claude Design
Now let’s take a look at 5 practical examples of what you can build with Claude Design. To keep things super simple, we’ll use a single design system and our examples will include:
Mobile app onboarding journey prototype
An interactive landing page for our product
A 3D visual component to bring a specific feature to life
A stakeholder alignment deck that pitches includes potential design directions for exploration
Pushing our prototype to Claude Code for further editing
Mobile app onboarding journey prototype
For this first example, we’ll make sure our design system is set up. To do this we’ll use GitHub and a project I’ve set up there called Sobella - a mock fitness / lifestyle app.
To kick things off, we’ll import this project from the GitHub codebase. Once this process starts, you’ll be presented with a screen that shows you what the model has built so far, along with the option to change / refine the components:
Claude Design will extract all of your existing components and automatically create an editable library that you can come back to at any time. This is actually super useful and I was surprised it worked so well.
Building the onboarding journey
Now let’s build our onboarding journey. In its Documentation, Claude explains that a strong prompt can cover four things: the goal (what you're building), the layout (how things should be arranged), the content (what information to display), and the audience (who will use it). Claude will ask clarifying questions if it needs more.
With this in mind, I asked it to create the onboarding screens for our app: