UI — Compiler.
The gig.
—
AI-first product development is broken by design drift.
Teams building AI products often struggle with fragmented token systems, inconsistent UI patterns, and the "jibber-jabber" of over-complex handoffs. The ambition was to make a specialised tool—the UI Compiler—that simplifies the 0→1 journey for AI-first applications, ensuring absolute geometry and visual silence from the start.
The challenge.
Building AI products requires a unique balance of technical depth and user-facing simplicity.
Standard design tools are too broad; they allow for too much "drift" where code and design begin to decouple. Designers, engineers, and first-time AI developers needed a way to define a system's DNA once and have it strictly enforced across every viewport—from Desktop to Watch—without manual recalculations.
The goal was to eliminate the "energy burn" of repetitive UI setup and allow teams to focus on core AI creativity.
The idea.
UI Compiler 001—A design token engine built to "compile" visual systems rather than just draw them.
The platform introduces a tiered approach to system building:
Basic Mode: A streamlined, 8-DNA-card experience for rapid prototyping. Perfect for first-time developers and designers to get a project moving in minutes.
Advanced Mode: A surgical-tier control set for senior designers and engineers. This allows for deep-level adjustments to Z-index layers, golden-ratio spacing, and complex motion easing.
Under the hood, the compiler enforces a Zero Zero philosophy: flat colours, monochrome iconography, and absolute vertical/horizontal centring, all inspired by the functional minimalism of Dieter Rams.
My role.
As the Architect and Lead Product Designer, I owned the logic and the interface. My focus was on:
System Architecture: Developing the M3-aligned token hierarchy (Reference → System → Component).
User Experience: Designing the dual-mode interface (Basic vs. Advanced) to cater to different technical skill levels.
Logic Implementation: Creating the "System Governor" that uses the Golden Ratio (φ) to automatically scale spacing and radius across devices.
Production Standards: Enforcing strict "Zero Zero" rules—like the 40px question-to-answer offset and 9999px input radii—to ensure a high-end, AI-native aesthetic.
The design.
Visual Silence: A flat, "Obsidian" chrome designed to let the user's product take centre stage.
The DNA System: 8 cards that drive everything from typography scale to motion duration.
Responsive Viewports: A real-time preview that toggles between Desktop, Tablet, Mobile, and Watch.
Flatness by Default: Removal of all shadows and "jibber-jabber" to support clean, AI-first interfaces.
The tech.
AI-First Handoff: A dynamic "AI Prompt" generator that translates visual tokens into structured Markdown for LLM coding.
M3 Logic: A semantic token engine that maps raw HEX values to functional system roles.
Independent Scroll Architecture: A high-performance three-panel layout for real-time, low-latency updates.
Neon PostgreSQL: Persistent database connection for saving and listing design iterations.
The outcome.
UI Compiler 001 became the definitive tool for stopping design drift.
It transformed a complex, multi-day design system setup into a 15-minute "compilation" process. By providing a shared language for designers and engineers, it established a scalable foundation for the next generation of AI-driven digital products.
The results.
Zero Design Drift: Total alignment between design tokens and production code.
Increased Speed: 0-1 product setup reduced from days to minutes.
Less Burn: Minimised decision fatigue for senior designers and engineers.
Global Scalability: A single system that works perfectly on everything from a desktop monitor to a smartwatch.
Use less, more.