4.3 Share and export

Info
⏱ Duration: ~25 min · 🎯 Objective: share the prototype with your team, export it to the format the committee needs, and hand it off to Claude Code, the tool you mastered in Week 3.

A polished prototype is useless if it stays on your screen. Claude Design gives you three outputs: share, export, and —the perfect close to this track— hand off to Claude Code.

Step 1 — Share with your team

Collaboration is org-scoped: you choose the access level per prototype.

  • Private — just you.
  • View by link — anyone with the link sees the prototype.
  • Edit with group conversation — your team edits and iterates with you.
Tip
For executive review, “view by link” usually suffices: the committee navigates the prototype without being able to alter it.

Step 2 — Export to the committee’s format

Claude Design exports to verified targets. Pick based on where it’s going:

Target When to use it
Internal URL Share inside the organization
Folder Save the project files
PPTX Take it into a committee deck
PDF One-pager or final distribution
Canva Keep editing in design
Standalone HTML Publish or embed the landing page
Export this prototype as PPTX for Monday's committee and,
separately, as standalone HTML for the marketing team.

Step 3 — The bridge: from handoff bundle to Claude Code

Here the circle closes with Session 3. Instead of a developer rebuilding your design by hand, the real flow uses two apps: first you generate the bundle in Design (web), then you open it in Claude Code (Desktop). No magic tool builds it — you hand it off to Claude Code, the tool you mastered in Week 3.

Step A — In Claude Design (web): generate the handoff bundle

In official terms: “Claude packages everything into a handoff bundle”. From the prototype, ask Design to export the bundle and download it (or export it to a folder).

Package this prototype into a handoff bundle for Claude Code:
include the assets, the design tokens, and the layout notes.

Step B — In Claude Code (Desktop): open it and give ONE instruction

Open Claude Code on the Desktop, open the Week 3 project folder, attach the bundle you downloaded, and give a single instruction to implement it. Review each change via the diff in Manual mode.

Attached is the Claude Design handoff bundle. Implement this
prototype as a working page in the project folder, respecting the
bundle's tokens and assets. I'll review each change.

✅ Checkpoint

  • You shared the prototype with a chosen access level (private / link / edit).
  • You exported at least one format (Canva, PDF, PPTX, or standalone HTML).
  • You generated the handoff bundle in Design and opened it in Claude Code (Desktop) with the given instruction.
Check your understanding — 2 questions
  1. What formats does Claude Design export to? → Internal URL, folder, Canva, PDF, PPTX, or standalone HTML.
  2. How does Design connect to Claude Code? → It packages everything into a handoff bundle you pass to Claude Code with a single instruction to implement it.