← Design Research

Essay · November 2026

After your design becomes code

Claude Design now lives inside Claude, one step from Claude Code. Anthropic has built the handoff from one to the other. What nobody has built yet is what happens after it, when the design becomes code and starts to drift.

By Imran Mohammed13 November 2026

What changed

Designs, design systems and decks are now made as artifacts in Claude, and the standalone site at claude.ai/design closes on 14 December 2026 (Anthropic). If you used it, move your design systems and projects before then. Chats, comments and public links don’t come across, so save what you need.

The bigger change is where it now sits. Exploring how something should look and building the thing that ships are now one click apart. Most designers will use both, so the useful question is which one to reach for, and what to do at the seam.

Which one for what

Where each one is stronger
TaskClaude DesignClaude Code
Exploring directionsCanvas, tweaks and side-by-side variationsPossible, but slower without a canvas
Pointing at an elementComment on it directlyDescribe it, or name the file
Decks and one-pagersBuilt for itNot its strength
A prototype that really worksA clickable mockReal code, live on a URL
Decisions that lastKept per projectWritten into the repo, read every session
What actually shipsNot its jobIt is the thing that ships

Explore in Claude Design. Build, and keep it right, in Claude Code.

The handoff is solved

Anthropic gives you three ways across (help centre):

All three get the first version right. None of them looks after the second, third or tenth.

What happens after it

Drift doesn’t come from one bad change. It comes from small ones that each skip the design system: a colour typed by hand, a decision nobody wrote down. Each looks fine in review. Together they pull the product away from the design you agreed on.

Take one pricing card, handed off from Claude Design with its design system. Here is a plausible eight weeks of ordinary requests. It’s a worked example, not a real project.

One card, as handed off and eight weeks later
  1. Week 2 · “Make the button pop.” A hand-written orange replaces the brand colour. White text on it now reads at 2.85:1, below the 4.5:1 that WCAG asks for.
  2. Week 4 · A new session adds a shadow. The flat cards were a decision, but it was never written down, so the next session couldn’t know.
  3. Week 6 · “Make the caption quieter.” The grey goes from 7.58:1 to 2.39:1. It looked fine on a bright screen.
  4. Week 8 · A quick fix for alignment. Padding set to 13px by hand, off the spacing scale, so this card no longer lines up with the ones beside it.
Contrast ratios are calculated from the colours shown. Each change passed review on its own.

In the code, every one of those changes looks the same: a value typed by hand where a token already existed.

The same button, in the code
Nothing errors and nothing breaks, which is why nobody notices.

None of this is Claude getting worse. It’s what happens to any design once many small hands touch it, and Claude Code is a lot of very fast hands.

Try this yourself

A week after a handoff, search the code for colours written by hand: grep -rnE "#[0-9a-fA-F]{3,6}\b" src. Every result that isn’t in your design system is a place the build has already left the design.

Keeping the design intact in the repo

This is where dwic sits, on the Claude Code side of the seam. Each command does one job, and they fit different moments after a handoff.

dwic commands, by when you reach for them
Right after the handoff
  • /design-grill questions you until the decisions are clear, then writes them into the repo, so “no shadows on cards” survives the next session.
  • /design-empathy reads the built flow for what it assumes about people, and records only what you confirm.
Before a change ships
  • /design-enforce finds colours and sizes typed by hand where a token already exists, and puts the token back.
  • /design-critic gives an honest read of a screen, ranked by severity, with the reason attached.
  • /anti-slop-designer catches the machine-made look: untouched library defaults, identical cards, gradients nobody chose.
When one thing feels off
  • /accessibility-specialist contrast, labels, keyboard paths and landmarks against WCAG.
  • /color-specialist contrast below AA, a palette with no system, dark mode that is just inverted.
  • /typography-specialist sizes off the scale, headings that don’t lead, cramped line height.
  • /spacing-layout-specialist padding and gaps off the scale, layouts with no grid underneath.
  • /visual-hierarchy-specialist screens where everything shouts and nothing leads.
  • /responsive-design-specialist layouts that break between sizes.
  • /content-strategist error messages, empty states and labels that say nothing.
Looking at the whole product
  • dwic-audit one pass over the code for accessibility, forms, navigation and copy.
  • /design-triage turns a long list of findings into an order you can work through.
All free in the dwic plugin. Each one reads your code; none of them can see the rendered screen, so they mark what needs a look in the browser.
Try this yourself

Right after a handoff, write down three decisions a new session couldn’t guess from the code alone, like why the cards have no shadow. Put them in your project’s CLAUDE.md. That alone stops most drift of the second kind.

Start here

Explore in Claude Design until the direction is settled. Hand it off whichever way suits you. Then, before the first change request, install dwic and run /design-grill once, so the decisions travel with the code:

/plugin marketplace add imsaif/design-with-claude
/plugin install design-with-claude@design-with-claude
/reload-plugins

If moving between the two still feels clumsy somewhere, I’d like to hear where.

Sources