Modes

TF Design offers four generation modes. Each mode is optimised for a specific output type and has different timing characteristics. Modes can compose — for example, generating a Design System first, then running Prototype or Deck modes with that system active.

Mode	Output	Typical Time	Best For
Prototype	One high-fidelity screen or flow (HTML/JSX)	60–120s	Landing pages, app screens, UI mockups
Deck	Multi-slide HTML presentation with navigation	90–180s	Slide decks, presentations, pitches
Template	Pre-built artifact personalised by the agent	20–40s	Fastest path — agent tweaks content only
Design System	DESIGN.md with sample-component preview	60–120s	Extracting brand rules from screenshots, PDFs, or URLs

Prototype

Produces a single high-fidelity screen or a short multi-screen flow rendered as HTML or JSX inside a sandboxed iframe. This is the default mode for most skills.

Use when:

• You need a landing page, dashboard, pricing page, or mobile screen.
• You want a self-contained HTML artifact you can iterate on.
• You are exploring visual directions before committing to a full deck.

The agent follows the full pipeline: discovery questions → direction picker → generation → self-critique → emit.

Deck

Produces a multi-slide HTML presentation with keyboard, scroll, and touch navigation. Supports PDF and PPTX export via pptxgenjs when a slides.json structure is provided.

Use when:

• You need a presentation, pitch deck, or status update.
• You want slide-by-slide navigation with export to PDF or PPTX.
• You are creating a weekly update, product launch deck, or investor presentation.

Deck skills include a deck framework directive that instructs the agent to produce slide-aware output with print stylesheets for PDF export.

Template

The fastest mode. Templates are pre-built artifacts stored in the catalog. The agent only personalises the content — it does not generate the visual structure from scratch.

Use when:

• You need something quickly (20–40s).
• You have a known output type and just need content filled in.
• You are iterating on copy or messaging without changing layout.

Templates are created from existing projects via the system's snapshot feature. The HTML and metadata are saved by the Desktop app and surfaced in the template picker.

Design System

Produces a DESIGN.md file — a portable Markdown document defining visual rules using a 9-section schema. The agent can extract design tokens from a screenshot, brand-guide PDF, or URL.

Use when:

• You want to capture brand rules and reuse them across future projects.
• You need consistent visual language across multiple prototypes or decks.
• You are onboarding a new team member to a design system.

Design Systems compose with other modes: once active, all subsequent Prototype, Deck, or Template runs read the DESIGN.md as a system-prompt prefix. Switching the dropdown instantly applies new tokens on the next generation.

See Design Systems for the full schema and usage details.

Mode Composition

Modes compose in sequence:

1. Design System first — generate or select a DESIGN.md to establish visual rules.
2. Prototype or Deck second — all subsequent runs read the active design system as a prefix.
3. Template at any time — templates inherit the active design system when personalised.

This workflow ensures visual consistency across artifacts without repeating brand instructions in every brief.

Choosing a Mode

If you need...	Use
A single screen or UI mockup	Prototype
A multi-slide presentation	Deck
Something in under a minute	Template
Brand rules to reuse later	Design System
A deck that matches your brand	Design System → Deck
A landing page matching existing brand	Design System → Prototype