AI PROJECTS / Acme Design System
Acme — 20-Component Enterprise Design System Built in Three Days
THE PROBLEM
Design-to-dev handoff has always been a translation step. And translations always lose something.
After 12+ years building enterprise design systems, watching them drift, and rebuilding them, I knew the problem wasn't discipline — it was architecture. Design and code are always two separate artifacts that have to be manually kept in sync. I wanted to know if new AI tooling could finally make that unnecessary — so I built a system to find out.
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. I recognized it 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
Minutes. Not Days. 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 — drift detected instantly
"The time savings weren't the point. The point was eliminating the category of work entirely."
OUTCOMES
A complete system — not a portfolio subset, but the full surface area including the hard parts.
20
27
Buttons
30
Badges
15
Inputs
5
Data Tables
6
Alerts
5
4
7
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 implementation-ready system
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
Without a shared token layer or atomic component architecture, each team solved styling problems independently. The result was a compounding debt: the longer it went unaddressed, the more expensive every new feature became — in design time, engineering rework, and coordinator confusion.