Spent a month solving the problem because our AI agent kept ignoring design tokens. How does your AI workflow look like?
Not a rant. Just something I needed to get off my chest after living inside this problem for way too long.
We have a 24 member design-dev team. Tokens set up properly in Figma. color, spacing, typography, the whole thing. Semantic naming. Variable collections. Modes for light/dark. It looked clean.
Devs still hardcoded #1A1A2E directly in the stylesheet.
Every time.
I used to think it was a discipline problem. Turns out it was a visibility problem. The tokens existed, but nothing was surfacing them at the point where a AI agent actually needed them, when they're staring at a component trying to implement it.
The gap isn't that Ai agent don't care about tokens. It's that the handoff never made tokens the path of least resistance.
So I started building a tool to fix exactly that. Two months in. It:
- Audits components and flags which ones are actually bound to tokens vs hardcoded values
- Auto-generates specs per component including which token maps to which property
- Tells you the % of your file that's "tokenized" so you can actually track progress
The audit part was the most eye-opening. First time I ran it on our main file token coverage was just 34%. We thought we were at 80%+.
The next problem I'm trying to solve: getting those tokens out of Figma and into the formats AI agents can actually read. Not a JSON export no one reads. More like... the files that sit inside a dev's project and get consumed automatically.
Still working on it. Just curious if this resonates with anyone else.
How tokenized is your Figma file, honestly? And do your devs / agent actually reference tokens during implementation or does that step just... not happen?