about /draft
Backdraft turns the fast, creative energy of vibe coding into tactile, controllable outputs — design patterns you can see, refine, and reuse across production environments.
the thesis
The boundary between "designing" and "coding" is a historical accident of tooling, not a fundamental law. Somewhere along the way, we split the craft in half — mockups on one side, source code on the other — and spent decades building bridges between them.
Backdraft eliminates the bridge. Your code is the design file. Your canvas is the codebase. Every visual edit writes directly to source. Every line of code renders live on the canvas.
For designers turning to code
You already think visually. Backdraft lets you stay visual while writing real source code — not exporting specs for someone else to rebuild.
For coders turning to design
You already know the language. Backdraft gives you a spatial canvas to see what your code actually produces — and refine it visually without context-switching.
For teams shipping fast
Import mockups, extract design systems, and maintain consistency from the source — not from a disconnected handoff document that's already out of date.
design consistency
Feed Backdraft a mockup — a screenshot, a Figma frame, a Dribbble save — and it extracts colors, typography, spacing, and patterns into a reusable design system. Not a PDF. Not a style guide that nobody reads. A living token set embedded in your actual CSS.
Extract from anything
Screenshots, mockup images, Figma exports, live URLs. The AI reads the visual and produces structured tokens.
CSS variables, not docs
Colors, font stacks, spacing scales become --primary, --heading-font — tokens the agent and you both use.
Consistency by default
When the AI agent builds new pages, it reads the design system first. Same fonts, same palette, same spacing — automatically.
origin story
Backdraft didn't start as a single idea. It started as a dozen.
Design system extractor
A standalone tool that could analyze a screenshot or mockup and extract structured design tokens — colors, typography, spacing scales. Now it's a core feature of Backdraft's AI agent.
Bidirectional code sync
A research project in CST-preserving parsing — editing visual properties while keeping every line of logic, every comment, every import untouched. The hardest problem we solved, and the foundation of everything.
Visual verification agent
An AI agent architecture that doesn't just generate code — it renders the result, takes a screenshot, compares it to the mockup, and iterates. Born from frustration with blind code generation.
Figma & Webflow converters
Separate utilities for crawling Webflow sites and parsing Figma layouts into clean, editable code. Now integrated as one-click import flows inside Backdraft.
Years of building with AI
Hundreds of projects built with AI-assisted coding — learning what works, what breaks, and what's missing. The gap was always the same: you can generate code fast, but you can't control it visually. Backdraft closes that gap.
Local-first
Your files stay on your machine. No cloud dependency. No sync delays. The code is right there.
Bidirectional honesty
What you see on the canvas is what's in the file. No hidden layers. No generated abstractions. Truth in both directions.
Human-centric AI
The AI is a drafting table, not a replacement. It proposes, you decide. It verifies visually, you ship when ready.
No vendor lock-in
Bring your own LLM. Export your code anytime. Your project is a folder on disk, not a proprietary format.
Stop generating throwaway code. Start building design systems that last.