Acme AI Assisted Design System
Built in Three Days
THE PROBLEM
Design-to-dev handoff has always been a translation step, and translations always lose something.
After years of building enterprise design systems, watching them drift and rebuilding them, I came to see the problem as architectural. Design and code are always two separate artifacts that have to be kept in sync by hand. Acme started as a self-directed exercise to get fluent with AI design-to-code tooling and find out whether it could close that gap.
Roadrunner CRM [ ↗ ]
20
5,700
COMPONENT
TYPES
DAYS, NOT WEEKS TO COMPLETE
HANDOFF
DOCUMENTS
LINES OF PLUGIN
CODE
AI + EXPERIENCE
This is what happens when AI closes the handoff gap entirely.
Built with Token Studio · Figma Plugin API · CSS Custom Properties · .NET Blazor compatible
WHERE AI FELL SHORT
Its first pass at component variants stacked them positionally: valid code, wrong architecture. The problem was obvious immediately, because I'd seen what happens when variant structure doesn't reflect semantic intent.
EXPERIENCE CORRECTED IT
Token naming defaulted to descriptive — blue-500 style. I pushed it to semantic contracts because I'd watched descriptive naming break down across a product family.
THE ACTUAL SKILL SHIFT
The constraint moved from "can I write this?" to "do I know what to ask for?" Twelve years of shipping enterprise products is what answered that second question correctly.
"When AI writes the code, design experience doesn't become less relevant. It becomes the only thing that matters."
THE OLD WAY
Weeks of Manual Work
1 week to hand-build 7 HTML documentation pages
Manual component creation, one variant at a time
Design and code maintained as two separate artifacts
Drift inevitable the moment someone edits Figma
THE AI-ASSISTED WAY
Hours, not weeks
Minutes to generate all 7 from a single source file
Full component library generated on demand
One file. Both outputs. Always in sync.
MCP reads Figma live, so drift is caught instantly
"The time savings weren't the point. The point was eliminating the category of work entirely."
OUTCOMES
A complete system, the full surface area including the hard parts.
DELIVERABLES
Seven handoff documents, one for every dimension of the system.
Master reference — all foundations, components, tokens, and patterns in a single navigable document with Design / Dev mode toggle.
When to use each component, variants available, and states covered. Alphabetically ordered across all 20 component types.
Every token in the system color, spacing, radius, shadow, border, typography with CSS variable name, raw value, and usage context.
Explicit mapping between Figma component properties and CSS/code equivalents. Closes the gap between designer naming and developer naming.
Full spacing scale, grid system, layout zones, and density definitions, design-facing and developer-facing values side by side.
WCAG 2.1 AA compliance checklist with visual examples per component color contrast, keyboard navigation, focus states, screen reader support, touch targets.
All 64 Lucide icons organized by category sizes, semantic color usage, and rules for standalone versus labeled icon use.
[ ↗ ] Icon Usage Guide.html
PROJECT GALLERY
From AI output to a system you can ship
Buttons, Inputs & Badges
AG Grid Data Tables & View Controls
Form Patterns & Modal States
Alerts, Cards & Avatars
Spacing & Elevation
Color Library
Design System Master Doc
Design Token Reference Doc
Component Usage Doc
What I'd do differently
The AI gave me valid code fast, but it had no opinion about architecture, so every structural call (variant logic, semantic token naming, component hierarchy) still came from me. Building it again, I'd front-load those decisions into the prompts and the source file before generating anything, so the first pass needed less correction and the speed showed up sooner.