TF Design

TF Design is a design-generation module inside the ToothFairyAI Desktop app. It turns natural-language briefs into editable, previewable design artifacts — prototypes, slide decks, presentations, banners, and infographics — by orchestrating the coding agent bundled with the app.

You describe what you want in plain language. TF Design asks a short set of discovery questions, picks a visual direction, and produces a self-contained HTML artifact you can preview, edit, and export.

How It Works

1. Write a brief — describe the screen, deck, or document you need.
2. Answer discovery questions — TF Design asks about surface (web/mobile), audience, tone, brand, and scale.
3. Pick a direction — choose from five curated visual directions with deterministic palettes and fonts, or supply a brand spec.
4. Generate — the agent produces an artifact inside a sandboxed preview iframe.
5. Preview, edit, export — iterate with chat, leave inline comments, edit files directly, and export to HTML, PDF, PPTX, ZIP, or Markdown.

Prerequisites

• ToothFairyAI Desktop app installed
• TF Code agent available (bundled with the Desktop app)
• An active ToothFairyAI workspace with available UoI

TF Design delegates the agent loop to TF Code, which is bundled with the Desktop app. The agent runs inside the app and writes files to your project workspace.

Quick Start

1. Open the Design module in the ToothFairyAI Desktop app.
2. Pick a skill (e.g. web-prototype, saas-landing, pricing-page) or start from a template.
3. Optionally select a design system from the built-in catalog.
4. Type your brief and press ⌘/Ctrl+Enter to generate.
5. Answer the discovery questions and pick a direction.
6. Preview the result, iterate with chat, and export.

Key Concepts

Concept	Description
Modes	Four generation modes: Prototype, Deck, Template, Design System. See Modes.
Skills	Pre-built instruction sets for specific output types (landing pages, dashboards, decks, documents). See Skills.
Design Systems	Portable Markdown files (DESIGN.md) that define visual rules — colours, typography, components, layout. See Design Systems.
Media Generation	Built-in image, video, and audio generation via ToothFairyAI backend models. See Media Generation.
Live Artifacts	Refreshable artifacts backed by connector data sources — dashboards and reports that stay up to date. See Live Artifacts.

Keyboard Shortcuts

Shortcut	Action
⌘/Ctrl+Enter	Generate / send message
Esc	Cancel generation
⌘/Ctrl+;	Toggle comment mode
⌕/Ctrl+\\	Cycle preview frame
⌘/Ctrl+E	Export

Architecture

TF Design runs entirely inside the ToothFairyAI Desktop app:

• Web frontend — React UI rendered inside the Desktop app's embedded webview.
• Embedded runtime — a background service (bundled with the Desktop app) backed by SQLite that handles project, conversation, and file persistence.
• Agent transport — the Desktop app invokes the bundled TF Code agent with the working directory set to the project's artifact folder.
• Preview — sandboxed iframe via srcdoc with per-skill artifact parsing.
• Storage — project data, artifacts, and agent working files are managed by the Desktop app in a private data directory.

Next Steps

• Modes — learn the four generation modes and when to use each.
• Skills — explore the skills catalogue and categories.
• Design Systems — understand the DESIGN.md schema and built-in catalog.
• Usage — create your first project from a brief.
• Settings — configure appearance, agents, models, and media providers.