Fast Draft

Design as Code. A text format and live canvas for drawing, design, and animation — right inside your code editor.

🌐 Try the Web Editor · ⚡ Install Extension · ★ GitHub

Two modes, one file:

• 🤖 Code Mode — LLMs and coding agents read, write, and reason about .fd text directly. ~6× fewer tokens than Excalidraw JSON, so entire UIs fit in a single prompt.
• 🎨 Canvas Mode — designers drag, resize, and draw on a fast, GPU-powered canvas inside VS Code, Cursor, or Zed. No code knowledge needed.

Changes in one mode instantly appear in the other.

See It in Action

A card component with a hover animation — in 20 lines:

# A card with a button that reacts on hover

style accent {
  fill: #6C5CE7
}

frame @card {
  layout: column gap=16 pad=24
  bg: #FFF corner=12 shadow=(0,4,20,#0002)

  text @title "Hello World" {
    font: "Inter" 600 24
    fill: #1A1A2E
  }

  rect @button {
    w: 200 h: 48
    corner: 10
    use: accent

    when :hover {
      fill: #5A4BD1
      scale: 1.02
      ease: spring 300ms
    }
  }
}

@card -> center_in: canvas

Why Fast Draft?

Features

• ↔️ Two-way sync — edit code or canvas, the other updates in <16ms
• 🤖 AI Touch — press ⌘I to improve designs with AI (supports 5 providers)
• 📋 Spec blocks — attach requirements, status, and acceptance criteria directly to shapes
• ✏️ Sketchy rendering — hand-drawn mode with wobbly, organic lines
• 👆 Touch & gestures — two-finger pan, pinch-to-zoom, Apple Pencil support
• 🎬 Drag-and-drop animations — drag a shape onto another to add hover/press effects

AI Touch

One button, context-adaptive AI. All modes go through a single /api/ai endpoint.

Model Configuration

Models are configured via Cloudflare environment variables (Dashboard → Workers & Pages → fast-draft → Settings → Environment variables):

Recommended production models:

AI_MODEL_FAST=@cf/meta/llama-3.1-8b-instruct
AI_MODEL_QUALITY=@cf/meta/llama-3.3-70b-instruct-fp8-fast

Admin Model Override

Override the model per browser session using a URL parameter:

https://fast-draft.com/?ai_model=llama-70b

The review panel footer shows which model produced the result.

Built-In Specs

Attach specs and requirements directly to visual elements:

rect @login_btn {
  spec {
    Primary CTA — triggers login API call
    - [ ] disabled state when fields empty
    - [ ] loading spinner during auth
  }
  w: 280 h: 48
  fill: #6C5CE7 corner=10
}

Editor Support

Platform Roadmap

Contributing

See CONTRIBUTING.md for architecture, crate structure, build instructions, and development setup.

License

MIT — see LICENSE