06 · Export, hand-off, and diffs

Artifacts land in your project directory. That's been said a few times; this chapter is about what follows from it.

Formats

Format	Best for	Cost
HTML with inline assets	Single-file sharing, archiving, direct deploy	Large file; images become base64
PDF	Approvals, records, a projector backup	Motion and interaction are gone
PPTX	People who live in PowerPoint or Keynote	Complex visuals degrade
MP4	Video artifacts	Not editable
ZIP	The full asset bundle	The recipient assembles it
Markdown	Content-level hand-off	Visuals all lost
Source files	Engineering picking it up	They need a dev environment

PPTX deserves its own note

Most HTML-to-PPT tools flatten the page into one image per slide. What you receive is six pictures in a .pptx, and not a word is editable.

OpenDesign's pptx-generator goes the other way: native shapes and editable text, with an HTML-to-PPTX fidelity audit behind it.

Set expectations correctly, though:

Survives	Doesn't
Text, still editable	Three.js scenes
Basic shapes and layout	JS-dependent interaction
Charts	Advanced CSS (complex masks, filters)
Images	Hover states
Palette and type (if they have the font)	Video backgrounds

So if the deliverable must be a .pptx, work backwards: do less at the motion step, skip 3D, and put the effort into layout and charts.

Git: the most underrated part of this

Artifacts are text — HTML, CSS, JS, Markdown — so git genuinely manages them. That buys several things traditional design tools can't:

Diffs. "What changed between versions" becomes answerable precisely. Binary design files can't do this; you're left comparing screenshots from memory.

Reverts. Broke it? git checkout. No "regenerate and hope it comes back the same".

Branches. Two directions from the same material, one branch each, pick one at the end.

Review. Run it through a PR and reviewers see the actual lines that changed.

A practical habit: commit after every step, with a message that says what the step did.

git add .
git commit -m "deck: first pass, editorial reference"
git commit -m "deck: type scale and density against the reference"
git commit -m "deck: real logos (3 slides)"
git commit -m "deck: 4 ECharts, data from the Q3 report"

Overshoot on motion at step 8 and git revert takes that commit out while everything before it stays.

Handing off to engineering

If this becomes production code, the hand-off depends on the artifact:

Single-file HTML prototype — give them the source. They'll probably rewrite it, but a runnable reference cuts the communication cost by an order of magnitude compared with a design file.

A set of pages on a design system — send design-systems/<brand>/DESIGN.md too. The colour values, spacing, and type scale in it convert directly to CSS variables or design tokens.

Cases needing structural parity — some teams wire the generated HTML straight into a template engine. That path needs class-naming conventions agreed up front and written into the skill's hard constraints.

Deploying

An HTML artifact is a static site, so any static host works:

# artifact in ./artifact
npx wrangler pages deploy ./artifact

Managed tiers include cloud deploys (3/month on Plus, 20 on Pro, 50 on Max; $2 each beyond that), handy when a client needs a link now. The free tier has none of that, and uploading to a static host works just as well.

Archiving

Anything used externally deserves two copies:

1. The source (in git) — where future edits start.
2. A PDF or inline HTML — a freeze of how it looked. External assets rot, generated images go missing, and months later the source may not render the same way.

That second point applies especially to material using external logos and web imagery.

Where it goes wrong

Trap	How it shows	Fix
Never committing	You break it and can't get back	Commit per step
Only keeping the PDF	Editing means rebuilding	Keep both
Expecting too much of PPTX	Things vanish in conversion	Design backwards from PPTX capability
Enormous inline HTML	It won't send by email	Compress images, or link them and ship a ZIP
Handing off screenshots	Engineering guesses the spacing	Send the DESIGN.md

Related

• Deck workshop / Step 10 — export choices for decks
• 08 · Cost and teams — which tier has cloud deploys