---
id: claude-design
lang: en
title: "Claude Design"
seoTitle: "What is Claude Design? A practical guide"
description: "Claude Design is Anthropic's tool for making prototypes, slides, and one-pagers by talking to Claude: describe it, watch it appear on a canvas, refine, export."
part: advanced
partTitle: "Advanced and specialised"
partOrder: 5
order: 2
level: Advanced
durationMinutes: 10
outcome: "Understand what Claude Design is, how the describe-and-refine loop works, and turn a rough idea into a layout you can look at, refine, and export."
summary: "Claude Design turns a described idea into slides, prototypes, and one-pagers on a canvas. Describe it, watch it appear, refine, and export."
draft: false
updated: "2026-07-26"
keywords:
- Claude Design
- what is Claude Design
- AI design tool
- AI prototypes
- AI slides
- design with Claude
- Anthropic Labs
furtherReading:
- title: "Introducing Claude Design by Anthropic Labs"
url: "https://www.anthropic.com/news/claude-design-anthropic-labs"
note: "The launch post: what it is and why they built it."
- title: "Get started with Claude Design (Help)"
url: "https://support.claude.com/en/articles/14604416-get-started-with-claude-design"
note: "The full how-to: create, refine, export, and its limits."
- title: "Claude Design (product page)"
url: "https://claude.com/product/design"
note: "The overview, plans, and where it fits."
- title: "Set up your design system in Claude Design (Help)"
url: "https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design"
note: "For design leads: make everything match your brand."
quiz:
intro: "Five questions on what Claude Design is and how to use it well. Ace them and you are one lesson from finishing the course."
passScore: 5
questions:
- q: "What does Claude Design actually produce?"
options:
- "A written description of a design for someone else to build"
- "A working design on a canvas that you can click, edit, and export"
- "A single flat image you cannot change"
answer: 1
explain: "It builds a live design on a canvas next to the chat. You refine it, then export it, rather than just reading about it."
- q: "How do you get your first design in Claude Design?"
options:
- "You draw it yourself and Claude cleans it up"
- "You describe what you want in the chat, and Claude generates it on the canvas"
- "You must upload a finished file first"
answer: 1
explain: "You describe the goal in plain words. Claude puts a first version on the canvas, and the real work is refining from there."
- q: "Which is the fastest way to make one small, specific change, like this button's padding?"
options:
- "Rewrite the whole prompt from scratch"
- "Click the spot and leave an inline comment"
- "Export it and fix it in another app"
answer: 1
explain: "Inline comments target one element. Use chat for big structural changes, comments for pinpoint tweaks, and direct canvas edits for quick visual nudges."
- q: "Why set up a design system in Claude Design?"
options:
- "So every design automatically uses your brand's colours, type, and components"
- "So Claude can charge you less per design"
- "It is required before you can type anything"
answer: 0
explain: "A design system means the output matches your brand by default, so you are not fixing fonts and colours on every project."
- q: "When a design is ready to become real software, what can you do?"
options:
- "Nothing, you start over in a code tool by hand"
- "Hand it off to Claude Code, which continues from your work instead of a screenshot"
- "Only export it as a flat PDF"
answer: 1
explain: "Claude Design hands off to Claude Code (from lesson 5.1), which builds on the real design rather than guessing from a picture."
pass:
badge: "Perfect score"
title: "You can design by talking now."
body: "Full marks. You know what Claude Design is, how the describe-and-refine loop works, and when to reach for it over a quick artifact or Claude Code."
retry: "Check the marked answers and try again. A second read makes this one click."
---
> **Level:** Advanced ยท **Reading time:** ~10 min
>
> **What you'll be able to do:** explain what Claude Design is, understand the describe-and-refine loop, and turn a rough idea into a layout you can look at, refine, and export.
Back in lesson 2.4 you met [artifacts](/glossary#artifact): ask Claude for a chart, a one-page site, or a small tool, and it builds the thing in a side panel instead of describing it. **Claude Design** is that idea grown up. It is a dedicated space for making things you can *see*: prototypes, slides, one-pagers, dashboards, landing pages. You talk, and a real design takes shape on a canvas beside the chat.
This is a lesson for anyone who has ever stared at a blank slide, wrestled a layout in a tool built for designers, or briefed a designer and waited three days for a first draft. You do not need to be a designer to use it. That is rather the point.
> **Last checked: July 2026.** Claude Design launched as an Anthropic Labs research preview and is now in beta. It moves fast, so prices, commands, and features may have shifted. Treat the specifics here as a snapshot and check the linked docs for the current detail.
## What Claude Design actually is
**Claude Design lets you create designs by having a conversation.** You describe what you want, and Claude generates a working version on a canvas. From there you refine it, by chatting, by leaving comments, or by nudging things around directly, until it is right.
Two things make it more than a chat that spits out pictures:
- **It has two panels.** A **chat** on the left, where you talk, and a **canvas** on the right, where the design appears. You watch it build, and you change it in place. It is less like ordering a drawing and more like sitting next to a designer, pointing at the screen.
- **The output is real, not a flat image.** What lands on the canvas is a live design you can click through and test, a clickable prototype rather than a picture of one. When it is ready you export it, or hand it to a developer to build for real.
It is powered by **Claude Opus 4.7**, Anthropic's most capable vision model, which is why it can look at a screenshot of an app you like and build something in the same spirit.
## What it is for, and what it is not
Claude Design is aimed at the moment between an idea and a finished thing, where most of us get stuck. It shines at:
- **Prototypes.** A clickable version of an app screen, an onboarding flow, an internal tool, real enough to show people and get feedback before anyone writes code.
- **Slides and one-pagers.** A deck or a single sharp page, built from a brief instead of fought pixel by pixel.
- **Web pages and dashboards.** A landing page, a pricing page, a dashboard mockup with the charts and filters roughly where they should go.
It is **not** a replacement for a professional designer on high-stakes, brand-defining work, and it is not trying to be a full design tool with every knob a specialist wants. Think of it as the fastest way from "I have a rough idea" to "here is something we can all look at and react to." That first draft, in minutes, is where its value sits. The polishing and the taste are still yours.
**The rule of thumb:** reach for Claude Design when seeing a version beats describing one. A picture the whole room can point at ends more arguments than a paragraph ever will.
## Where to find it, and what it costs
Claude Design is available on **Pro, Max, Team, and Enterprise** plans (it is switched off by default for Enterprise, so an admin turns it on). You will not find it on the Free plan. It runs on the web at **claude.ai/design** and from the sidebar in the **Claude desktop app**. There is no separate app to install.
On cost, the sensible news is that there is nothing new to track. **Claude Design draws from the same usage pool as the rest of Claude**, the one you already share with chat, [Cowork](/glossary#cowork), and [Claude Code](/glossary#claude-code). Big projects with large codebases or many rounds of refining use more; a quick one-pager uses little. If you hit your limit, Design pauses until the limit resets, exactly like everything else. As always, the linked pages carry the current numbers.
## The core loop: describe, generate, refine
The whole tool runs on one simple rhythm, and getting good at it is mostly getting good at the second half.
**First, describe what you want.** You do not need design language. A strong brief names four things: the **goal** (what you are building), the **layout** (roughly how it is arranged), the **content** (what information goes on it), and the **audience** (who it is for). If you leave something out, Claude asks. A good opening line looks like this:
```
Build a landing page for our new API product. Hero section at the top with a short headline and a sign-up button, then a row of three feature cards, then a simple pricing table with three tiers. Audience is developers, so keep it clean and include one code example.
```
**Then Claude generates a first version on the canvas.** Treat it as a starting point, never the finished article. The magic is not the first draft; it is how quickly you can change it.
## Three ways to refine
You steer the design three ways, and picking the right one for the change is the core skill.
- **Chat**, for the big moves. Structural changes, whole new sections, anything that needs explaining. *"Rearrange the dashboard so the metrics sit in the top row and the chart goes below."* *"Show me two or three alternative layouts."* You can even ask Claude to review the design for accessibility or to explain why it chose a layout.
- **Inline comments**, for the pinpoint tweaks. Click a spot on the canvas and leave a note attached to that element. *"Make this button's padding larger."* *"Change this to a dropdown instead of radio buttons."* Far faster than describing *where* in a sentence.
- **Direct edits**, for the quick visual nudges. Drag, resize, and line things up on the canvas with your mouse when you just want to move a box a little.
**The habit to build:** chat for structure, comments for a single element, direct edits for a nudge. And be specific. *"This doesn't look right"* is hard to act on. *"Tighten the spacing between the form fields"* gives Claude something to grab. Want to try a bold new direction without losing what you have? Tell it: *"Save what we have and try a completely different approach."* Your current version is kept, so exploring costs you nothing.
## Feed it context, and your brand
Everything you learned about [context](/glossary#context) in Part 2 pays off here. The more you give Claude to work from, the closer the first draft lands.
- **Show it examples.** Upload a screenshot of a competitor's page, a wireframe, a slide deck whose style you like, and say *"make it look like this."* A vision model is very good at catching the feel of a reference.
- **Point it at a codebase.** Link a code repository and Claude reads your existing components and styling, so a prototype comes out closer to something your engineers could actually ship.
The big one for any team, though, is the **design system**. Set one up once (a job for a design lead), and every project you start automatically uses your brand's colours, type, and components. No more fixing fonts on every draft; the output looks like *your* company from the first generation. On Team and Enterprise, an admin can even lock the system down so everyone's work stays on-brand. This is the difference between a fun toy and something a whole team can rely on.
## When it is done: export and hand off
A design is only useful if it can leave the canvas. When you are happy, the **Export** button gives you plenty of exits: download as a **PDF**, export as a **PPTX** to drop into a deck, **send it to Canva** or other tools you already use, or save it as a standalone web page.
The most powerful exit ties this whole part together. When a design is ready to become real, working software, you can **hand it off to [Claude Code](/glossary#claude-code)**, the terminal coding agent from lesson 5.1. This is the bit that matters: Claude Code continues from your actual design, not from a screenshot of it, so the build starts from real structure instead of a guess. Design the thing by talking, then let the coding agent build it for real. That is the two lessons of Part 5 working as one pipeline.
## Where it fits: artifact, Claude Design, or Claude Code
You now have three ways to make Claude build something visual, and they climb a ladder of ambition.
Reach for an **artifact** when you want one quick visual inside a normal chat and you will not fuss over it. Reach for **Claude Design** when the visual *is* the work: a prototype, a deck, a page you will refine on a canvas and share. Reach for **Claude Code** when the design needs to become real, running software. And remember they connect: Claude Design hands straight off to Claude Code, so the ladder is one smooth climb, not three separate tools.
## Staying in control
Most of the safety habits from the rest of the course still apply, in a lighter key, because Design mostly makes new things rather than changing your existing files.
- **Mind what you upload.** The privacy rule from lesson 1.4 does not switch off here. A screenshot or a codebase you link is still material you are handing over, so keep genuinely sensitive things out of a preview product.
- **You own the taste.** Claude gives you a fast, competent draft. Whether it is *good*, on-brand, clear, and right for the audience, is your call. The tool raises the floor; it does not replace your judgement.
- **Remember it is early.** As a preview, it has rough edges: inline comments can occasionally vanish, very large codebases can lag, and it works on web and desktop only. None of it is a dealbreaker, but expect the odd bump and check the docs when something behaves oddly.
## Try it
Ten minutes, if you are on a paid plan. If you are not, read it as a walkthrough so the shape is familiar.
1. Open Claude Design at **claude.ai/design** or from the desktop sidebar, and start a new project.
2. Describe something small and real, for example: *"Build a one-page event invite for a team offsite. A bold title, the date and place, a short agenda, and a big RSVP button."* Let Claude generate it.
3. Refine it three ways so you feel each one: change the whole feel in **chat** (*"make it warmer and more playful"*), fix one element with an **inline comment** (click the button, *"make this bigger"*), and **drag** a block to a new spot on the canvas.
4. Ask Claude to *"show me two alternative layouts."* Compare them. Notice how much faster this is than deciding in your head.
5. Hit **Export** and send it out as a PDF or a PPTX.
The goal is not the invite. It is to feel the rhythm: describe, watch it appear, and steer it with words and clicks until it is right. Once that rhythm is natural, a blank slide stops being scary.
*(General exercise. Role and industry versions come once accounts are in.)*
## Key terms
[Claude Design](/glossary#claude-design), [Artifact](/glossary#artifact), [Claude Code](/glossary#claude-code), [Cowork](/glossary#cowork), [Context](/glossary#context)