Creating a Project
Starting a New Project
- Open the Design module in the ToothFairyAI Desktop app.
- On the entry view, choose a starting point:
| Tab | Description |
|---|---|
| Skills | Browse the skill catalogue and start from a skill prompt |
| Design Systems | Pick a design system to apply to your project |
| Templates | Start from a pre-built artifact — the agent personalises content only |
| Image Templates | Start from an image-generation prompt template |
| Video Templates | Start from a video-generation prompt template |
| Projects | Reopen an existing project |
- Select a skill or template (optional — you can also start with a blank brief).
- Optionally select a design system from the dropdown.
- Type your brief in the input field.
- Press ⌘/Ctrl+Enter to start generation.
Writing a Brief
A good brief is specific and actionable. Include:
- What — the artifact type (landing page, dashboard, deck, etc.).
- Who — the audience (developers, executives, consumers).
- Tone — the desired feel (professional, playful, minimal, bold).
- Content — specific sections, features, or copy to include.
- Constraints — brand colours, fonts, or style references.
Example brief:
Create a pricing page for a SaaS analytics platform called Insight.
Three tiers: Starter (£29/mo), Pro (£99/mo), Enterprise (Custom).
Audience: data teams and engineering managers.
Tone: clean, professional, trust-focused.
Include a feature comparison table and FAQ section.
Discovery Questions (Turn 1)
On the first generation, the agent always starts with a discovery form. It asks a short set of structured questions — it does not generate code, narration, or tools until you answer.
| Question | Purpose |
|---|---|
| Surface | Web, mobile, or email? Determines layout and breakpoints. |
| Audience | Who is this for? Affects tone and language. |
| Tone | Professional, playful, minimal, bold? Guides visual direction. |
| Brand | Do you have a brand spec? If yes, attach screenshots or a URL. |
| Scale | Single screen or multi-screen flow? Determines scope. |
Fill in the form and submit. The agent uses your answers to tailor the output.
Direction Picker (Turn 2)
If no brand spec is provided, the agent offers five curated visual directions. Each has a deterministic OKLch colour palette and font stack:
| Direction | Palette | Fonts | Style |
|---|---|---|---|
| Editorial Monocle | Warm, muted, high-contrast | Serif headings, sans body | Magazine-inspired |
| Modern Minimal | Neutral, airy, clean | Sans throughout | Swiss-grid minimal |
| Tech Utility | Cool, structured, precise | Mono accents, sans body | Dashboard-like |
| Brutalist Experimental | Bold, raw, high-contrast | Display sans, mono body | Unconventional |
| Soft Warm | Soft pastels, rounded shapes | Rounded sans throughout | Friendly, approachable |
Pick one direction. The tokens are bound into the seed template's :root and applied immediately.
If you do provide a brand spec (screenshots, PDF, or URL), the direction picker is skipped — the agent extracts tokens directly from your brand materials.
Generation
After discovery and direction selection, the agent:
- Reads the active skill's
SKILL.mdand pre-flight checklist. - Reads the active design system's
DESIGN.md(if set). - Applies craft rules (typography, colour, anti-ai-slop).
- Produces the artifact inside a sandboxed iframe.
- Runs a 5-dimensional self-critique before emitting.
Self-Critique
Before emitting the final artifact, the agent silently scores itself 1–5 across five dimensions:
| Dimension | What It Checks |
|---|---|
| Philosophy | Does the output match the brief's intent? |
| Hierarchy | Is visual hierarchy clear and intentional? |
| Execution | Are spacing, alignment, and polish professional-grade? |
| Specificity | Is the content specific or generic/templated? |
| Restraint | Is the design free of AI-slop patterns? |
Any dimension scoring under 3/5 triggers a fix-and-rescore cycle (up to two passes). Only artifacts passing all gates are emitted.
Iterating After Generation
After the first generation, you can:
- Chat — send follow-up messages to iterate: "Make the hero section taller", "Change the accent colour to teal", "Add a testimonials section".
- Comment — toggle comment mode (⌘/Ctrl+;) and click elements in the preview to leave inline comments. The agent receives a surgical-edit instruction.
- Edit files — use the file workspace to edit HTML/CSS directly. Changes are reflected in the preview.
- Switch direction — ask the agent to try a different visual direction.
- Switch skill — re-run with a different skill while keeping the same brief.
Conversations
Each project supports multiple conversations. Switch between them from the conversations menu. Tab persistence ensures reopening a project restores your exact workspace (open files, active conversation, preview state).
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
⌘/Ctrl+Enter | Generate / send message |
Esc | Cancel generation |
⌘/Ctrl+; | Toggle comment mode |
⌘/Ctrl+\\ | Cycle preview frame |
⌘/Ctrl+E | Export |
See also: Preview & Comments, Export.