← Blog

Claude Code Can Design Now: /design Explained

Anthropic put its design canvas inside the terminal on Monday. Here's what /design actually produces, what it reads off your codebase first, and the five things it still can't do.

By VibeLab · August 20, 2026

Claude Code Can Design Now: /design Explained

On Monday, Anthropic put its design canvas inside the terminal. If you have Claude Code, you can now type /design, describe what you want, and get back a set of editable artboards instead of a wall of text.

This is a smaller thing than the headline suggests, and also a more interesting one. The point isn't that Claude can draw. It's that the design now lands somewhere you can push around with a cursor — and, if you're already working in a codebase, it starts from your code rather than from a blank page.

We used it this morning to make a cover image for a reel. Here's an honest account of what it does, what it doesn't, and when it's the right tool.


What Actually Happens When You Type It

You describe the thing you want — a poster, a landing page, a set of screens. Claude drafts it as artboards on an infinite canvas: separate frames laid out side by side that you can pan and zoom around, the same way you would in any design tool.

Then it opens as a link you can share. Click any element and a properties panel appears. Retype the headline in place. Change a colour. Drag a card out of a row. Undo. Save, and everyone with the link sees the new version.

That last part is the quiet upgrade. Previous versions of "AI makes you a design" ended with an image you had to accept or regenerate. This one ends with a file you can argue with.

The Part That Matters Most: It Reads What You Already Have

If you run /design inside a project, the first thing it does — before drawing anything — is go looking for your design system. Token files, theme files, your component library, the screens closest to what you asked for. It pulls the actual hex values, the type ramp, the spacing scale, the control heights, and builds from those.

That's the difference between a mockup that looks like generic AI output and one that looks like your product.

In our case there was no codebase, just three previous cover images sitting in a folder. It found them, read the layout and colours off them, and matched the house style without being asked. If you have any existing design material, point it at that first. It changes the output more than any amount of prompting will.

What You Get Out

Two things, today:

That's the full list. Which brings us to the honest part.


What It Can't Do Yet

This is a research preview, and it is worth knowing the edges before you plan a workflow around it.

It's not the full Claude Design. Anthropic launched Claude Design as a separate workspace back in April. That version does more: it reads your React components to apply your design system, generates adjustment sliders for a layout, and exports to PDF, PowerPoint and Canva. The terminal version is a narrower slice.

No design tokens, no tweak loop. The two features above — design-system colour tokens and asking Claude to revise the canvas from inside it — depend on the Claude Design backend and aren't in the Claude Code version. You revise by talking to Claude in the terminal, or by editing directly on the canvas.

Export is PNG and PDF only. No PowerPoint, no Canva handoff, no SVG. And PDF export rasterises each artboard as one page, so the text in the PDF isn't selectable.

It's not built for two people at once. If two people edit and save at the same time, the second save conflicts and reloads to the first — nothing merges. Fine for one person drafting; not a Figma replacement for a team session.

Each canvas is frozen at the version that made it. The editor is baked into the page when it's published, so a canvas you made last week won't pick up this week's improvements. Make a new one to get the new behaviour.

So When Should You Reach For It?

Use /design in Claude Code when you're already in the terminal and the design is downstream of the code — a component variant sheet, a screen that has to match a shipped app, a cover or a one-pager you want done without a context switch. The design-system matching is the reason to be here.

Use claude.ai/design when the design is the main event — pitch decks, exploration with sliders, anything you need in PowerPoint or Canva at the end.

Use neither when you need production-grade vector output, a real team file, or precise typographic control. It isn't that yet, and pretending otherwise will cost you an afternoon.


The Bottom Line

/design is the first time Claude's visual output has arrived as something with handles on it rather than a picture to accept or reject. That's a real change in what the tool is for.

The single highest-leverage habit: give it your existing design material before you ask for anything. It's the difference between a draft you rewrite and one you ship.

claude designclaude codeai toolsdesign toolsvibe-coding

Sources