Summary
When layoffs shrank our engineering team, we rebuilt our design system for AI coding agents
In May 2025, Clearlink's engineering team went from 17 to 4. AI coding tools became essential overnight, but they didn't work with our existing design system. Token names like "primary-darkest" and "grays-lighter" meant nothing to an AI agent. It would guess, get it wrong, and engineers would spend time fixing styling instead of building product.
Approach
We proposed a two-tier token system called PUMA. A primitives library holds the raw values, and the semantic library tells AI what each token actually does. Instead of "primary-default", it's "color-border-input-active", which AI can understand and apply. This isn't a new setup, but it's the first part of the system that makes PUMA work.
First Version
Our first version shipped in three weeks. It worked, but it had gaps, mostly small things we hadn't accounted for. AI would hit a missing token and just create a new class instead of using what existed, or sometimes just forget to use them altogether (this happened more when we built bigger things; components worked better than pages).
Second Version
To address the first version's spotty memory issue, we added an instruction layer: a CSS stylesheet preloaded into each AI agent, spelling out which classes existed and how to apply them when it encounters them in Figma. When the agent saw the semantic variable name, it applied the correct CSS far more often.
Results
The second version landed two months after kickoff. Our engineers now point a Claude Code agent at a Figma file, preloaded with that brand's stylesheet and custom instructions, and get 80%+ correct UI on the first pass. Their job shifted from building UI to reviewing it. And because PUMA scales per brand, 4 engineers now support 7 brands with individual AI coding agents tuned to each one.
What's Next
PUMA is still evolving. I'm currently exploring Design.md, an open-source standard from Google that gives AI models explicit formatting and design rules as a markdown file. Combined with our semantic tokens and CSS instruction layer, it could close the remaining gaps in AI accuracy and extend beyond engineering into broader product workflows. Read about it here
