After the Claude Design handoff: how to review the prototype in Claude Code

Updated October 2026 · 6-minute read

Claude Design is good at the first draft. Anthropic itself pitches it for the early, idea-testing stage. Then you press Hand off to Claude Code, and the work moves into a repo.

That move is where many designers get stuck. The screens now live in code. Reviewers can't comment on them. There is no link to "the checkout screen, in its error state". And the review meeting still needs slides.

This guide is the loop we use every day after the handoff. You can do all of it by hand with Claude Code. No paid tool is needed.

1. Rebuild the handoff on your own tokens

The handoff bundle holds screens and styles. Don't keep its colors and sizes inline. Ask Claude Code to move every value into one token file first, then rebuild the screens on top of it.

Read the handoff bundle in ./handoff.
Make one tokens file (colors, type, space, radius).
Rebuild each screen with those tokens only.
Bring open comments over as a list in NOTES.md.

Why first: every later change becomes a one-line token change, not a hunt through 20 files.

2. Give every screen its states

A design draft shows one happy picture. A real screen has at least four states: empty, loading, error and full. Reviews go wrong when people only ever see "full".

For each screen, add empty, loading, error and full states.
Use fake data. Do not invent new copy: mark missing text TODO.

3. Put every screen and state in the link

Reviewers need to open the exact thing you mean. Keep the current screen and state in the address, for example ?screen=checkout&state=error. Add a small bar with two pickers, and a phone frame at 390×844 so desktop reviewers see the phone size.

Now "look at checkout, error state, on phone" is one link in Slack.

4. Keep review notes in git, not in chat

Comments in chat get lost. Keep them in a file next to the code, such as notes.json. Each note holds the screen, the state, a position and the text.

{ "screen": "checkout", "state": "error",
  "x": 0.42, "y": 0.18,
  "text": "Error text is too far from the field",
  "done": false }

Then the fix loop is simple. Ask Claude Code to fix each open note and set "done": true in the same commit. The history of the review is now in git, with the fix next to the note.

5. Present the review as a deck from the repo

The review meeting still needs slides. Don't rebuild them in a slide app. Write the deck as data (one object per slide) and draw it with one fixed look. Ask Claude Code to fill it from the repo: what changed, which notes are done, which are open.

What this loop does not fix

It does not save Claude usage. Since June 2026, Claude Design shares its usage limit with chat and Claude Code.
It does not replace Figma for teams that live there.
It is for the step after the first draft: review, fix, present.

Try one piece free. Our theme lab shows one screen in 3 looks, light and dark, from one token file (step 1). Open the theme lab →

Want the whole loop ready-made? Designer Prototype OS ships the prototype bar (pickers, phone frame, pinned notes saved to git), the theme lab, the deck kit and 4 Claude Code commands, including /from-handoff. $49 one time. See what is in it →

Forge Kits. Independent; not affiliated with Anthropic. Questions: forgekits@maxxspace.com