Chapter 06 ← Home

The handoff

What is inside the bundle Claude Code receives, and the export seam where most disappointment actually happens.

The Claude Code handoff is the one lossless path, because it is the only destination that speaks the canvas's native language. Instead of a screenshot for an engineer to reverse-engineer, the bundle carries four things.

Bundle 01

Component structure

The composition as a machine-readable spec — what the pieces are and how they nest, stated rather than inferred from pixels.

Bundle 02

The design tokens in play

The tokens actually used on this canvas, not your entire system. Code inherits the decisions rather than the library.

Bundle 03

Layout hierarchy

Nesting and spatial relationships, so responsive behaviour is derived from intent rather than guessed from one fixed-width screenshot.

Bundle 04

Referenced assets

Images and media, in place and already wired — no scavenger hunt through a shared drive for the logo at the right size.

Why this is the seam that matters

Design-to-engineering handoff has always leaked meaning, because the artefact crossing the gap — a picture — carries appearance but not reasoning. A bundle that states structure, tokens and hierarchy is the first handoff format where intent survives the jump.

That, more than the canvas, is the strategically interesting part of the product.

Six exits, and what each one costs

They are not interchangeable. Pick the destination before you design, because what you lose on the way out is decided by choices you make on the canvas — usually before you know you are making them.

Rule of thumb: the further down this table you go, the more the design needed to be conceived as a static composition from the very first prompt.
DestinationChoose it whenWhat you give up
Claude Code handoffIt is getting built for realNothing that matters — the lossless path
Standalone HTMLIt needs to live at a URL and behave exactly as designedNothing — this is the canvas
Internal URL or folderColleagues need to see or archive it in placeReach beyond your organisation
CanvaSomeone non-technical will keep editing, or it enters brand distributionInteractivity and code-driven effects
PPTXIt opens in a meeting and someone will edit slides after youInteractivity, custom type behaviour, anything animated
PDFIt is final. It gets printed, or attached to an email.Every interaction — it becomes a picture of itself
The failure nobody warns you about

Claude Design rarely fails on the canvas. It fails after export. A deck that was beautiful in the browser arrives in PowerPoint with the type reflowed and the clever bit gone — and nothing went wrong, exactly. The canvas rewards code-driven ambition; PPTX and PDF punish it.

So decide the exit first. If it is ending as a PPTX, say so in the opening brief and design within slide grammar. If it is ending as a prototype or a URL, use the whole ceiling. The cost of naming the destination is one sentence; the cost of not naming it is the afternoon you spend rebuilding.

The field guides

Seven guides, one method. Roughly in the order a reader meets them: how the field got here, how to work across models, then the tools themselves.