Claude Code design mockups land before the code

That order is the useful part. The trap is treating the pretty hosted page as the thing that landed.

The loop starts before a line of product code#

Nate Parrott, who designs at Anthropic, posted the sample himself. From Desktop or CLI, try /design a few options for {feature} before you build, pick a favorite artboard, edit it, and implement. The official ClaudeDevs account repeated the same loop the same afternoon and called it a research preview built on artifacts.

The in-product tip is even blunter. Working on UI? Run /design to mock up a few directions before you build.

This is not a screenshot pasted after the PR. The command exists to stop you from discovering the layout in the diff.

THE DECODER recap the next day just restated that tweet. Recaps are cheap. The interesting part is what the bundled skill actually writes down.

Matching the repo is the default#

Nate's follow-up said Claude reads the codebase, matches the UI style, and makes shareable mocks in an Artifact. That line is marketing-short. The skill is not.

Workflow step 0, in the copy that ships inside Claude Code 2.1.238, tells the model to match the existing app pixel-perfectly by default, without being asked. Before drawing, it is supposed to hunt the house look.

• Token files first, tokens.css or theme.* or variables.css
• A tailwind.config.* theme if that is the system
• design-system/, ui/, components/, Storybook, the icon set
• Brand fonts under assets/ or public/, plus the screens closest to the ask

Then lift exact values. Colors, type ramp, weights, line-heights, spacing, radii, borders, shadows, control heights. No rounding onto a 4px grid because a framework felt tidy.

New UI extends that vocabulary. Same tokens, same density. The skill wants a one-line handoff naming what got matched.

On this site that hunt would trip workers/web/src/styles/globals.css and come back with 6px large radii, Inter, JetBrains Mono, and the ink tokens already in the theme. Nobody ran /design against this repo for this post. The file is sitting there either way.

If you wanted a fresh look, you have to say so. The default is copy the house, not invent a Dribbble shot.

Two to four genuinely different candidates on the canvas, each on an axis you can name. Warm editorial versus dense data-first. Five shades of one aesthetic is a rigged vote.

When you pick, the winner goes into Main.dc.html. The unchosen sketches move aside or die.

The hosted canvas is a locked room#

Here is the honest objection, and it is a good one.

Rasmus Andersson, who designed Inter and spent a stretch at Figma, replied on the launch thread that it would be neat if this just opened Figma. Any design made here, he said, would be locked up inside there, with a limited life and thus limited usefulness.

He is describing a showroom window. The glass is pretty. After hours the door does not open.

Inventory is whatever you left in the stock room.

Nate's own reply on carry-over is the receipt you actually needed. The design carries over. Remember to press Save for now.

They will get rid of that click soon. Until then, Save is a button you remember after the tab is gone.

The skill's save model matches him. Edits stay on the screen until Save in the header publishes a new version for everyone. Skip it and the implement step is reading a stale page.

You will ship a feature from a canvas that never got the tweak you thought you made.

Then the share route broke in public.

A reporter on GitHub issue 88326, opened Aug 20 against anthropics/claude-code, published a /design canvas and tried to grant anyone-with-the-link access. The share UI first said the artifact offers file downloads, so it cannot be shared publicly. They stripped the downloads capability.

The option lit up. The PATCH still came back unscannable. They cut the page from about 2.7MB to 2.2MB by pulling embedded fonts.

Same failure. The finger points at the editor payload itself, the roughly 2 MiB of minified canvas editor baked into every published page before any design content exists.

A 2 MiB tuxedo around a few HTML files is a lot of costume for a recipe card.

The skill already warned that a canvas which declared export shares within the organization only, and that this preview is not at parity with claude.ai/design. The editor baked into each canvas will not pick up later fixes. Feature parity is not a goal of the preview.

Do not promise either.

Official docs still have not caught the command. Claude Code's commands table lists /design-login and /design-sync. It does not list /design.

The changelog through 2.1.238 is dry on the word. The binary has the skill. The X posts shipped the news.

The docs lag is the research-preview tell, not a reason to pretend the command is vapor.

Claude Design, the April Labs product, already had a handoff bundle into Claude Code. /design is that canvas editor, preview-packaged inside the CLI. /design-sync is the other verb, the one that uploads a React design system so claude.ai/design builds with your real components.

People are going to mash those together. They are not the same job.

If you hit the current public-share content-scan failure, you cannot paste a public link to a contractor. You cannot wait for the baked editor to grow a Figma export. You can keep files.

Land means the working files#

Claude Code's artifacts docs already say the quiet part. Claude writes the page to an HTML or Markdown file in the working tree, then publishes it. An artifact is a capture of work, not an application.

/design adds a named artboard convention on top of that. The skill tells the model to write each artboard to a working file named as the artboard, in the working tree. Main.dc.html always.

Siblings if there are more. canvas.json when the canvas has more than one board. Keep those files. Every later change re-seeds from them.

That is the land the title is betting on.

The Artifact URL is the scrape you can share until it rots, until Save never happened, until issue 88326 is your afternoon. Bytes on a hosted page are not the test. A named job is.

That split already had a post. Ask the agent for a file, not a scrape argued it for workflow skills. A page dump that sits in a folder is still a page.

/design is the same failure in a nicer coat if Main.dc.html never hits git.

Keep the stock room, not the window.

1. Commit Main.dc.html and its siblings. That is the mockup.
2. The assembled canvas HTML is the 2 MiB editor wrapper around those artboards. Leave that one untracked if you want. Do not drop the .dc.html files.
3. Tell Claude to implement from those artboard files, not from a link you cannot open on a plane.

If the canvas cannot save in this preview, the skill already says to hand over the seeded .html by path. Path beats URL when the scan is in a mood.

You'll hit this the first time a teammate asks for the mockup and all you have is a claude.ai card they cannot load. The order still matters. Mockups before code is the right loop.

It only stays true if the mockup is a file you can open tomorrow.