Constructing a tokenized, AI-ready design infrastructure
We improved design and development efficiency by establishing a centralized, tokenized "source of truth" for AI-powered implementation.
Role
Lead Design Engineer
Timeline
2025
Tech stack
Figma Variables, MCP Servers, Cursor
Problem
Manual translation between design and code created inconsistent, hard-coded UIs.
A lack of shared infrastructure created an implementation and maintenance burden for designers and developers.
Design Friction
We lacked a centralized library, leading to overall design redundancy. Global updates were difficult when considering that we were rebuilding the same core patterns from scratch each time.
Engineering Friction
Without tokens or components to reference, developers had to rely on manual inspection and hard-coded values. This meant the code constantly drifted from design.
For example, this simple change took an entire sprint to make!
Architecting a congruent token and component system
The biggest leap was replacing our interpretive workflow with an actual architecture. By establishing as close to a 1:1 parity between design and code, we made big strides in solving design debt.
Unlocking higher velocity and accuracy with MCP servers
We combined our improved design system with MCP servers to guide AI implementation. This ensures we're referencing the correct rules and outputs from the start.
Results
Shipping faster with higher quality and precision
These improvements enabled us to ship production-ready code faster, while ensuring implementations more closely match design intent.
Reduced visual drift
Achieved closer to 1:1 parity between designs and code through tokenized components and a "shared language" between design and dev.
Reduced implementation time
Engineers had better success with "one-shotting" complex UIs using AI-driven implementation leveraging our design system.
Faster global updates
Wide-scale branding or UI changes were significantly easier after refactoring our codebase and design system.
Want to read more? Get in touch for more information.
Some specifics of this work are protected under NDA. For a deeper look into the process, decisions, and outcomes, reach out directly and I can share more context privately.