# Export Handoff > Export Design work and produce developer handoff materials. Use when the user wants HTML, PNG, SVG, ZIP/code exports, implementation notes, or a coding handoff for a selected design. - Skill: `builderio/export-handoff` (Agent Skill) - Install (CLI): `npx skillmds@latest add builderio/export-handoff` - Raw SKILL.md: https://api.skillmd.com/api/skills/builderio/export-handoff/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: Builder.io (https://skillmd.com/u/builderio) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/builderio/export-handoff --- # Export and Handoff How to export designs and generate handoff documentation for developers converting prototypes to production code. ## Other export actions - **SVG**: `export-svg` exports a design project as an SVG document (a `foreignObject` wrapper around the standalone HTML), giving agent parity with the editor's Download SVG command. The editor's own Download SVG command captures the live browser DOM for the most faithful snapshot; use the action when you need agent-side SVG export without a live browser. **This is not importable into Figma as editable vectors** — Figma cannot parse `foreignObject` content, so it stays an opaque embedded HTML blob. Use `export-design-as-figma-svg` (below) when the destination is Figma. - **PNG**: `export-png` renders one stored HTML screen in headless Chromium and uploads the PNG through the configured file provider. Pass `fileId`, or `designId` plus `filename`, to select the screen. It returns a durable `url` and suggested `filename`; `width` defaults to 1440px and `height` only sets the responsive viewport because the export includes the screen's full page. ```bash pnpm action export-png --designId --fileId ``` If Chromium or file storage is unavailable, the action returns an explicit failure instead of pretending that a downloadable image exists. The editor's Download PNG remains the faithful client-side path for localhost/fusion screens that are not stored HTML. - **Deploy preview**: `deploy-design-preview` triggers a preview deploy for a fusion-backed design branch. It requires the design's source to advertise the `deployPreview` capability (fusion tier) and Builder.io to be connected; a branch must already exist via `create-design-branch`. For inline/localhost designs it returns `ctaRequired: true` with a Make-it-real CTA instead of faking a deploy. This triggers a *preview* deploy only — production publishing goes through the Builder Visual Editor's Publish flow. ## Export Formats ### HTML Export Bundles all design files into a single standalone HTML file with Tailwind CSS and Alpine.js CDN included. ```bash pnpm action export-html --id ``` Returns: - `html` — the complete HTML string - `filename` — suggested filename (e.g., `SaaS-Landing-Page-1714500000.html`) - `filePath` — saved to `data/exports/` - `fileCount` — number of source files bundled The exported HTML: - Includes `@tailwindcss/browser@4` and `alpinejs@3.15.11` CDN links - Combines all CSS files into a single `