From design handoff
to a rendered component.

Bring the design into the project

The current Claude Design product page describes HTML export, handoff to Claude Code, and the /design and /design-sync workflows. Follow its current instructions for creating the design and moving it into code.

Ask the agent to use the repository's components, tokens, and typography. For an exported HTML prototype, serve it locally before capturing it. For a production component, make a story covering the important states.

Check each implementation edit

Connect Juxtapose MCP or use the CLI. With the implemented preview running, capture it before and after an edit:

npx -p @juxtapose/cli jux snap http://localhost:5173/ --as before
# Implement the next design adjustment.
npx -p @juxtapose/cli jux snap http://localhost:5173/ --as after
npx -p @juxtapose/cli jux diff before after --json

Replace the URL with your preview. Give the agent specific feedback about differences from the design, then capture again. Runtime diffs describe what the latest code change did; the design reference still needs separate review.

Approve the implementation, then protect it

Connect Juxtapose in Claude Code to test the running app; design-reference review remains a separate step.

Next: define the reference and review steps.

External capability references checked October 16, 2026.