claude-design-handoff.

#What it is

A pipeline the agent follows whenever Claude Design touches content that has to stay true: finalize every fact first, wrap it in FROZEN markers, brief the design pass with hard constraints, and diff the result against the source before anyone sees it. One verify script (scripts/verify-frozen.py, standard-library Python), two brief templates, two tracks: a doc track that ends in a rendered PDF, and a web track where Claude Design delivers art direction for a site instead of the end product. MIT licensed.

#The itch

Claude Design produces layouts most of us cannot build by hand. It also writes while it designs: it rephrases facts, merges sections, softens warnings, and invents vocabulary. I learned this the expensive way when a designed family travel itinerary came back gorgeous and wrong: 23 fact-check findings, 4 of them critical, including an invented address and shifted event dates. You find out when the recipient does.

#How it works

Four phases, in a fixed order. Content comes first: every fact, number and link is finalized before any design happens. Then the lockdown: everything that must not change gets wrapped in markers in the source, like <!-- FROZEN --> flight XY1234, departs 09:15 <!-- /FROZEN -->. The design chat gets a hard template brief (verbatim blocks, fixed section order, no new vocabulary). And at the end, re-verify: python3 scripts/verify-frozen.py source.md designed.html diffs every frozen block against the designed HTML, plus checks on section order, live hyperlinks and prose spot checks. Chrome headless renders the final PDF from the verified HTML.

<!-- FROZEN -->
flight XY1234, departs 09:15
<!-- /FROZEN -->

$ python3 scripts/verify-frozen.py source.md designed.html
OK: all 18 frozen blocks present verbatim in designed HTML.

The brief minimizes the drift. The diff catches what got through.

On the web track the same content freeze applies, but the bundle becomes a design spec that a coding session engineers into the real site, briefed via its own template.

#In real use

Two real runs, measured on my own projects; the postmortems are not public, so the counts are mine alone. Without the lockdown, the travel itinerary above came back with 23 findings. With the lockdown, a portfolio-site run kept all 94 locked phrases verbatim through the design pass. The same run still violated its own explicit 4.5:1 contrast instruction on 3 elements (measured 2.82 to 3.14:1), which is why the pipeline ends with verification instead of trust.

The limits, stated in the repo: this is a workflow, not an API integration. Claude Design has no back channel, so content fixes are applied to the bundled HTML by hand and a design iteration means a new chat. FROZEN markers are respected far more reliably than prose instructions, but imperfectly; re-verify is a required phase. The verify script covers the doc track only, the web-track check is manual. Bundle structure and share-link formats are observed product behavior as of 2026-07 and can change without notice. And share links are capability URLs: whoever has the link sees the document and the chat transcripts, so treat them like secrets.

Version 1.0.0 shipped on 2026-07-17 with both tracks, the verify script and both brief templates.

#Install

$ git clone --depth=1 https://github.com/belschak/claude-design-handoff.git \
  ~/.claude/skills/claude-design-handoff

You need access to Claude Design itself (without it, the repo is a documented methodology), Python 3.9+ for the verify script, and Chrome for the PDF render.

#Links