Design as Code
A file format and canvas for drawing, design, and animation — right inside your code editor. Draw it or code it? Both.
Why Fast Draft?
Built for both humans and AI agents — design and code in perfect sync.
Design as Code
Bidirectional sync between text and canvas. Plain text means git diff, code review, and merge just work.
AI-Native Format
Semantic IDs, constraint layout, ~6× fewer tokens than JSON. Agents read and write designs natively.
Living Components
Styles, specs, and animations travel with every element. Reuse via style blocks and import.
Prompt as You Draw
Code, canvas, keyboard, Apple Pencil, touch, or AI — every input is first-class, and they all compose.
Two Modes, One File
Each mode is designed for a different audience — but they edit the same file.
The AI Interface
LLMs and coding agents read, write, and reason about .fd text directly. Uses ~6× fewer tokens than Excalidraw JSON.
- Semantic node names (
@login_form) - Constraint-based layout (no pixel coords)
- Structured
specblocks with status + acceptance criteria - Named colors and property aliases
The Human Interface
Designers draw, drag, and resize on a fast, GPU-powered canvas inside VS Code. No code knowledge needed.
- Smart guides and resize handles
- Drag-and-drop animations
- Floating toolbar and properties panel
- Touch and Apple Pencil support
The Numbers
Real designs compared: FD vs Excalidraw JSON. Measured across 11 benchmark pairs.
| Design | FD Size | Excalidraw Size | Ratio |
|---|---|---|---|
| Login Form | 2.4 KB | 15.8 KB | 6.6× |
| Dashboard Card | 0.8 KB | 7.3 KB | 9.1× |
| Kanban Board | 3.7 KB | 18.9 KB | 5.1× |
| Org Chart | 4.1 KB | 15.5 KB | 3.8× |
| API Flowchart | 3.3 KB | 27.9 KB | 8.5× |
| Mobile Onboarding | 3.5 KB | 18.7 KB | 5.3× |
| Pricing Table | 4.4 KB | 24.5 KB | 5.6× |
| Network Topology | 4.6 KB | 28.6 KB | 6.2× |
| Data Dashboard | 4.6 KB | 36.0 KB | 7.8× |
| Design System | 5.7 KB | 28.4 KB | 5.0× |
| Wireframe eCommerce | 2.3 KB | 19.0 KB | 8.3× |
| Average | 6.5× |
Under the Hood
Rust + WASM, from parser to pixel.
Core Engine
.fd text → Parser → SceneGraph → Emitter → .fd text
Winnow parser, DAG scene graph, constraint layout solver, and language server with hover, completions, and diagnostics.
GPU Renderer
SceneGraph → Vello + wgpu → GPU canvas
Hardware-accelerated 2D rendering via WASM. Hit testing, smart guides, and the bridge that powers the playground.
Canvas Editor
Canvas ↔ Text (bidirectional sync)
Draw or code — both update in <16ms. Select, rect, pen, text, eraser tools with full undo/redo.
Ready to design as code?
Try the playground right now — no download needed.