Export HandoffCAUTION

A framework for building agentic apps

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
name: export-handoff
description: >-
  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.
---

# 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 <designId> --fileId <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.
  PNG and PDF are sRGB: a color written as `oklch()` or `color(display-p3 ...)`
  that sRGB cannot show is rendered as its CSS Color 4 gamut-mapped sRGB
  fallback (lightness and hue kept, chroma reduced), not the browser's clip.
  HTML and SVG exports keep such colors as written.
- **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 <designId>
```

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 `[email protected]` CDN links
- With multiple HTML screens, embeds each in its own isolated viewport, stacked
  vertically
- Includes project CSS in each screen document
- Appends JSX files to the first screen
- Works when double-clicked in any modern browser

### ZIP Export

Creates a ZIP archive with all design files organized by type plus metadata.

```bash
pnpm action export-zip --id <designId>
```

Returns:
- `zipBase64` — base64-encoded ZIP data
- `filename` — suggested filename
- `filePath` — saved to `data/exports/`
- `fileCount` — number of files included

ZIP structure:
```
project-name/
  README.md           # Project metadata
  html/               # HTML files
    index.html
    components.html
  css/                # CSS files
    styles.css
  jsx/                # JSX files (if any)
  assets/             # Asset files
  design-data.json    # Generation metadata
```

### PDF Export

Prepares design data for client-side PDF rendering. Returns the raw design data and files — the actual PDF generation happens in the browser.

```bash
pnpm action export-pdf --id <designId>
```

Returns all design data and files needed for the client to render a PDF.

## Export to Figma (SVG)

`export-design-as-figma-svg` exports a design screen (or a selected
element's subtree) as a genuinely VECTOR SVG document — real
`<rect>`/`<path>`/`<text>`/`<image>` markup with
`<linearGradient>`/`<radialGradient>`/`<filter>` defs. Figma's SVG importer
parses this into normal, editable layers (rect/path/gradients/filters stay
editable). This is a different artifact from `export-svg` above, whose
`foreignObject` wrapper Figma cannot import as vectors at all.

```bash
pnpm action export-design-as-figma-svg --designId <designId>
```

Optional args:

- `fileId` / `filename` — pick a specific screen (defaults to `index.html`).
- `nodeId` — scope the export to one selected element's subtree via its
  `data-agent-native-node-id`, instead of the whole screen.
- `embedImages` (default `true`) — fetch and inline `http(s)` image sources
  and background-images as `data:` URIs, so the SVG is self-contained for
  clipboard paste. Set `false` to keep absolute URLs instead.

Returns `{ svg, filename, report, filePath? }`. `report` classifies every
element as `vectorized`, `approximated` (mapped with a documented caveat —
e.g. a non-square gradient angle, a non-uniform border, a radial gradient's
shape/position), `rasterized` (video/canvas/iframe content, and any element
with `backdrop-filter`, which SVG cannot express — embedded as a cropped
screenshot instead), or `omitted`. If no headless Chromium binary is
available in the current environment (expected in hosted/serverless
deploys), the action returns `{ ok: false, reason }` instead of throwing —
fall back to `export-svg` or `export-html`.

**Vectorized-text caveat**: Figma imports SVG `<text>` as live, editable
type, but its SVG importer reads only font family, size and a coarse bold
weight. Letter spacing is dropped, and wei

CAUTIONgrade B · trust 89/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (5)

.agents/skills/an

.agents/skills/content-product-development

.agents/skills/design-exploration

.agents/skills/turn-into-app

.agents/skills/visual-edit

Gates applied: no_behavioural_pass.

[![ModelsAtlas audit: Export Handoff](https://modelsatlas.com/skills/builderio/export-handoff/badge.svg)](https://modelsatlas.com/skills/builderio/export-handoff/)

Not your listing, or something out of date? Claim or update your listing.