I Built a Deterministic UI Compiler
Most AI UI generators have the same three problems:
Slow — often taking 15–30 seconds per generation
Expensive — API costs, credits, and rate limits
Non-deterministic — the same input can produce different outputs every time
The third problem bothered me the most.
I wanted a system that behaved like a compiler, not a slot machine. If I gave it the same wireframe twice, I wanted the exact same result twice.
So I built D2D — a deterministic wireframe-to-React compiler that runs entirely in the browser.
The Core Idea
Most UI generation tools treat interface design as a language problem.
I think it's primarily a geometry problem.
A rectangle that's 200×40 pixels is probably an input field.
A rectangle that's 80×36 pixels is probably a button.
A large text element near the top of the page is probably a heading.
These aren't ambiguous language patterns. They're spatial patterns.
Geometry doesn't hallucinate.
Compilers don't guess.
How It Works
D2D transforms a hand-drawn wireframe into production-ready React and Tailwind code through a six-stage pipeline.
- Extraction
The system collects all shapes inside the selected frame, normalizes coordinates, and creates a consistent spatial representation of the layout.
- Classification
Elements are assigned semantic roles using a combination of direct mappings, heuristics, and exclusion rules.
Examples:
Large rectangles become inputs
Small rectangles become buttons
Decorative arrows and annotations are ignored
- Spatial Understanding
Hand-drawn wireframes are messy.
Nothing is perfectly aligned.
A strict pixel-based approach breaks immediately.
To handle this, D2D builds a spatial graph that measures alignment strength using Gaussian decay scoring.
Elements that are "close enough" form alignment groups, allowing the system to understand rows, columns, and layout intent even when sketches are imperfect.
- Layout Architecture
The compiler constructs a parent-child hierarchy using containment analysis.
Containers, sections, cards, and nested groups emerge from the geometry itself.
Additional pattern-detection rules identify common structures such as:
Hero sections
Feature grids
Cards
Forms
Navigation bars
Call-to-action blocks
- Design Identity
A simple style selection expands into a complete design system.
A single preset generates:
Color tokens
Typography scales
Spacing systems
Shadows
Animations
Component styling rules
Current presets include:
Startup Modern
Corporate Clean
Bold Creative
Minimal Elegant
Dashboard Dense
Glass Gradient
- Code Generation
The final stage assembles React and Tailwind components.
The output is production-ready code, typically ranging from 100 to 700 lines depending on complexity.
Determinism
The entire pipeline is deterministic.
There is no randomness.
No AI model.
No API calls.
No hidden probability distributions.
Content selection uses stable hashing, ensuring identical inputs always produce identical outputs.
To verify this, I built a test suite that runs the same wireframe through the compiler 100 times and compares every generated character.
The output is always identical.
The Recipe System
Sometimes you don't want to draw a wireframe.
You just want a starting point.
D2D includes a recipe system that generates complete layouts from a page type and industry combination.
Examples:
SaaS + Technology
Landing Page + Healthcare
Portfolio + Creative Agency
Dashboard + Finance
With 8 page types and 10 industries, the system currently supports 80 unique combinations.
If a wireframe is present, your sketch takes priority and the recipe fills in missing sections.
Results
Generation Time: <300ms
API Calls: 0
Cost Per Generation: ₹0
Runs Entirely in Browser
Deterministic Output: Guaranteed
Try It
No signup required.
I'm especially interested in feedback on the spatial graph.
If you've worked on layout engines, compilers, or design tooling, I'd love to hear how you'd approach the problem of hand-drawn alignment and geometric ambiguity.
Top comments (0)