Claude Design

Back in lesson 2.4 you met artifacts: 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, and 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 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, 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.