Claude Design, Inside Claude Code

Start Here

Here from the design video? The feature ships switched off, so there is a one-time setup, and then the ask worth pasting.

1. 1Update Claude Code

   Run claude update in your terminal. It needs version 2.1.233 or later, so if /design is not recognised at all, an old version is why.

2. 2Be logged in to the right thing

   Run /login and sign in with the Claude account you use at claude.ai. A session running on an API key cannot publish a canvas at all, which is the quiet reason it fails for some people.

3. 3Grant it once

   Type /design consent and press enter. It ships switched off, and this turns it on for your account. On a work account you also need an admin policy that permits Claude Design.

4. 4Then forget the command

   You never type /design again. Ask for a design in plain words and the canvas is what comes back. /design on its own just shows you the switch, and /design revoke turns it off whenever you like.

Claude asks its questions, sketches you some directions, and hands you a private link. That link is the interesting part, so keep reading.

A handful of words after /design are reserved rather than briefs. Status, import and export belong to Claude Design on claude.ai and will point you there. Consent, revoke, login and sync are the real account commands, and /design-sync is the separate one that pulls a design system out of a repo. Everything else is read as a brief, so asking for a status dashboard or a login screen works exactly as you would expect.

Worth knowing before you need it. Every canvas you make is listed by /artifacts, so a link you lost is one command away rather than gone.

What You Actually Get

When you ask for a design, Claude does not hand you code or a static picture. It publishes a canvas, your design laid out as artboards on an infinite board, behind a private link that opens in your browser.

And the canvas is an editor rather than a screenshot, so you click an element to select it, retype the text in place, and change colours, spacing and fonts in a properties panel. Drag things around, undo with the keyboard, and press Save when you are happy, which keeps a new version for anyone you have shared the link with.

That is the shift worth noticing. Until now, AI design tools made you choose between describing what you want and taking what you are given, or learning a design app and doing it all yourself. This is both halves in their right order. Claude does the ninety percent, the layout, the structure and a first pass at the copy, and you do the ten percent only you can do, nudging the headline and fixing the colour by hand, on the thing itself, instead of typing "a bit bigger please" into a chat box and hoping.

The Three Moves That Decide Whether It Is Any Good

Everything else on this page is detail. These three are the difference between a canvas you keep and one you quietly close.

• Run it from inside the project it is for

  This is the difference between a design that looks like your product and one that looks like a template. Inside a codebase it goes and finds your tokens, your theme file, your Tailwind config, the components nearest to what you asked for and the fonts you actually load, and it lifts the exact values out of the source rather than eyeballing something close. It tells you in one line what it matched, which is your chance to say it read the wrong thing. Outside a codebase it has nothing to match, so hand it your site, your brand colours and your fonts, or it will guess.

• Make it show you directions before it builds anything

  Two to four rough sketches on separate artboards, each a genuinely different idea, and you pick one. Skipping this is the single biggest reason people get generic output. Ask for the honest trade-off of each as well, because a set where only its favourite gets a case made for it is a rigged vote. Once you have picked, it stops asking and builds the real thing.

• Say whether you want a picture or a working thing

  A static mockup and a clickable prototype are different jobs. Words like prototype, clickable, flow and works get you real controls, where a toggle toggles and a tab switches. Everything else gets you a mockup. Say which up front and you skip a round trip.

There is a way to make the first one permanent. Write your brand into the project's CLAUDE.md or a theme file, the hex codes, the typefaces, the spacing, and Claude reads it before it reaches for anything of its own. Do that once and every design you ask for afterwards starts in your colours without you saying so.

Four More Worth Keeping

The one at the top of this page starts something new. These four cover the rest of the job. Paste and let Claude interview you rather than trying to say everything at once.

Driving The Canvas

Saving, And The Loop It Makes Possible

Saving is the piece people get wrong, and understanding it is what turns this from a one shot picture generator into something you work in.

Ask, get a canvas, fix what you can fix faster by hand, save, then ask for the next thing. Claude reads your saved version back and works from it, so your edits are the starting point rather than something it overwrites. The link never changes, which means the person you sent it to always has the current design without you sending anything again.

Getting It Out

• PNG comes out one artboard at a time

  Export in the toolbar. Where saving is enabled you can also export a single selected element from the properties panel, which is the quick way to pull one card or one icon out.

• PDF takes every visible artboard

  One page per artboard, at its natural size. The gotcha is the word visible. Any artboard hidden behind an expanded one is left out of the file and only mentioned in a toast, so collapse back to the canvas before you export.

• The PDF pages are pictures

  Each page is rasterised, so the text is not selectable or searchable. Fine for a proof or a print shop, wrong as a document you expect anyone to copy from.

• Fonts do not make it into the export

  Google Fonts render on screen but cannot be embedded in a PNG or PDF yet, so exported text drops to the fallback. Ask for a fallback with similar metrics, size headlines with a bit of slack, and check the export rather than the screen before anything goes to print.

What Nobody Tells You

• Know which of the two hands to use

  Anything conceptual, or anything touching several elements at once, goes back to Claude in the terminal. Anything that is one element, one colour, one word, you do yourself on the canvas in about four seconds. Sending a single headline tweak back to Claude costs you a whole round trip and risks it tidying something else on the way past.

• Claude usually cannot see the canvas

  It works out sizes by arithmetic and will not know something clipped or overflowed until you tell it. So describe what is wrong precisely and name the artboard, rather than sending it back to look.

• A frame does not scale what is inside it

  Too small a frame clips or scrolls the design, it does not shrink it, and too large a frame just shows more background. If something is cut off, ask for a bigger frame, not a smaller design.

• Artboards share nothing

  A toggle on the desktop artboard will not move the phone one, and no state, logic or setting crosses between frames. Every artboard needs its own copy of a change, so say all of them when you mean all of them.

• Curly braces in the editor are correct

  Where text comes from data rather than being typed in, the editor shows you the binding, something like {{ item.label }}, instead of the value. It renders properly. It is not broken.

• Ask for a chip when a value cuts across the design

  One accent colour used in nine places, a density switch, a variant, an item count. Do not ask for a chip for a headline, because copy is meant to be retyped in place, and a colour used once is a properties panel edit.

• Give it your real facts

  It will not invent a price, a date or an address. It leaves a visible placeholder like [YOUR PRICE] for you to fill. Hand it the real numbers up front and you get a finished thing instead of a form to complete.

• A small ask stays a small ask

  Ask for one colour and it changes one colour, deliberately, and leaves everything else alone. When you actually want it to rethink a section, say rethink, or you will get a very literal edit.

• Keep images few and small

  Every image rides inside the design itself, and the whole thing republishes every time anyone saves. A handful of properly downsampled images is fine. A gallery of full resolution photographs is not.

• Name your options and keep the names

  Once an artboard is Warm editorial it stays Warm editorial. Renumbering options between turns is how a conversation about which one you liked falls apart.

• Do not ask for a design called status

  A handful of words are reserved for the account commands, so /design status shows you a message instead of designing anything. Ask for a status dashboard in a normal sentence and it designs it perfectly happily.

Sizes To Ask For

Frames are set in pixels, so it helps to name the size rather than the format. Everything is drawn at 96 pixels to the inch, which is what makes these print sizes come out right.

Two floors go with them. On a phone artboard nothing you are meant to tap should be under 44 pixels, and on anything headed for print body type never drops below 12 point, which is 16 pixels at this scale.

The Honest Bit

• It is an early preview

  This is Claude Design's canvas editor packaged to run inside Claude Code, and it is not at parity with Claude Design on claude.ai. Design system colour tokens and asking the canvas itself for changes both live on the claude.ai side and are not here.

• Each canvas keeps the editor it was built with

  The editor is baked into the design when it is saved, so an old canvas does not pick up later fixes. If something feels behind, start a fresh one.

• It is a drafting surface, not a publishing one

  The canvas does not become your live website. When the design is agreed you hand the artboards back to Claude Code as the spec and it builds the real thing.

• Saving is not switched on for every account

  Where it is not, the link still opens and you can view it and export PNG and PDF, but edits will not be kept. Claude will tell you plainly if that is your situation.

• Sharing has an edge to know about

  A canvas with export enabled opens for people inside your organisation only. Anyone outside it cannot open the link at all, so send them an exported PNG or PDF instead of wondering why it will not load.

• There are places it simply will not run

  It needs Pro, Max, Team or Enterprise, and a session logged in to a claude.ai account. It does not run at all through Bedrock, Vertex AI or Microsoft Foundry, and it is switched off for organisations using customer managed keys, HIPAA mode or zero data retention. In those cases it is unavailable rather than degraded, so no amount of prompting will find it.

Go Deeper

Never used a slash command before? Start with the slash commands guide. New to Claude Code entirely? Build your first website gets you from nothing to a live page, and the canvas makes a lot more sense once you have built something. And because the best canvases start with a proper brief, plan mode is worth knowing before you ask for anything large.