Type /design First, Then Code: Claude Code's New Artboard Preview Front-Loads Your UI Decisions

Before opening a component file, type /design a few options for [feature] in Claude Code — you get editable artboard choices to settle direction before any code structure is committed.

Claude Code v2.1.234, shipped in the Week 34 changelog (August 17–21), added /design as a research preview on paid plans. The command brings Claude Design's artboard canvas into the CLI and desktop app, so the design decision happens before implementation rather than as a correction afterward.

How to use it:

/design a few options for a notifications dropdown with unread badge

Claude produces two or three editable artboard variations. Pick a direction, adjust layout or copy inline on the canvas, then continue the session — Claude Code implements from the approved artboard rather than from your prose description. If you've already run /design-sync against your repo, the artboards pull from your actual components rather than generic defaults.

Where the research preview bites:

• Token cost is unspecified. Anthropic hasn't disclosed usage rates during the preview; XenoSpectrum flagged undisclosed usage terms at launch. Don't assume it's low-overhead until you've tested in your own session.
• Design-system matching requires /design-sync first. Without it, artboards use generic defaults, not your components.
• Behavior changes without notice — it's experimental. Availability, token cost, and design-system fidelity are all still being tuned.

What it replaces: describing what you want in prose, watching Claude generate something structurally different, and iterating backward. /design moves the direction decision to before the first line of code — once you've approved a canvas layout, the implementation phase starts from something you've seen and chosen.

Sources: Week 34 changelog — code.claude.com · Usage terms concern — XenoSpectrum · /design walkthrough — pasqualepillitteri.it