Skip to main content

Export & Import

Export Formats

TF Design supports five export formats. Use ⌘/Ctrl+E to open the export dialog, or use the export button in the preview toolbar.

FormatDescriptionUse Case
HTMLSelf-contained file with inlined CSS and assetsHost anywhere, embed in iframes
PDFBrowser print with deck-aware print stylesheetsPrint, share, email
PPTXPowerPoint file via pptxgenjs (requires slides.json)Edit in PowerPoint/Keynote
ZIPArchive of the full project directoryBackup, transfer, share source
MarkdownPlain-text Markdown copy or skill-defined renderDocs, wikis, README files

HTML Export

Produces a single self-contained HTML file with all CSS and assets inlined. No external dependencies. Use the Export → HTML action in the app.

PDF Export

Uses the browser's print functionality with deck-aware print stylesheets. For decks, each slide maps to a printed page. Page breaks are handled automatically. Use the Export → PDF action in the app.

PPTX Export

Requires the skill to produce a slides.json structure. The export uses pptxgenjs to generate a .pptx file with editable slides. If no slides.json is present, falls back to page-capture mode (renders each slide as an image embedded in the PPTX). Use the Export → PPTX action in the app.

ZIP Export

Archives the full project directory including all source files, assets, and media. Use the Export → ZIP action for a full project archive, or Export Selected Files for a batch archive of selected files.

Markdown Export

Produces a plain-text Markdown rendering of the artifact. Some skills define custom Markdown renderers; others use the default artifact-to-Markdown conversion. Use the Export → Markdown action in the app.

Import

Claude Design ZIP

Drag and drop a Claude Design export ZIP onto the welcome dialog. TF Design imports the project into the Desktop app and opens the entry file as a tab with a continue prompt.

The imported project is fully editable — you can iterate on it as if it were created natively.

File Uploads

Upload images (up to 8 at a time) to use as references, brand specs, or content within your artifact. Drag them into the chat or use the upload button in the brief input.

Supported formats: PNG, JPG, GIF, WEBP, SVG.

Brand Specs

Brand-spec inputs can be provided as:

  • Screenshots — drag into the chat or upload via the brief input.
  • Brand-guide PDFs — upload as a file attachment.
  • URLs — paste a URL in the brief for the agent to fetch.

The agent uses these to extract design tokens for custom design system generation. See Creating Custom Design Systems.