Your AI coding tool is quietly editing your design system
It invents tokens, fakes your colors, bypasses your components. Every commit drifts the system further. I'm building a plugin that hands the AI the real rules instead of letting it guess.
The problem every AI build reveals
Hand Claude, Cursor, or Copilot a task in a real codebase and watch what happens. It invents tokens. Fabricates colors close to yours but never exact. Builds a button that looks right but bypasses your Button component. It respects half your typography scale and makes up the other half.
The code passes review. It looks fine. Merge it. The design system drifts further.
Do this for six months and you don't have a design system. You have a ghost of one. Whatever the AI defaulted to, layered over what you actually decided.
Better prompts don't fix this. Writing "use the design system" in CLAUDE.md is a note taped to a locked door. The AI can't read the rules, so it infers them from variable names, component names, and training data. All fuzzier than what you have sitting in Figma.
We keep blaming the model for guessing. We never handed it the answer key.
The insight: your Figma file already has the answer
Your Figma library has the tokens. Your design system has rules already written somewhere. "Use --color-action-primary for primary CTAs, never for destructive actions." Your components have recipes. Required states, prohibited variants, contrast minimums.
But it's scattered. Figma annotations, a Notion page, a Slack thread from eight months ago. All true, none of it in the room when the code gets written.
So I'm building the bridge.
What the plugin does
The plugin reads your Figma variables, lets you author rules and recipes right in the UI, exports two files:
- Markdown spec for pasting into
CLAUDE.md,.cursorrules, Copilot instructions, anywhere the AI will see it. - JSON spec in W3C DTCG format with
$rulesextensions, for tooling downstream.
One workflow. Figma variables → rules + recipes → spec files.
No GitHub integration. No CSS export. No bidirectional sync. No linter. The scope is small on purpose. One workflow done well beats five half-finished ones.
The architecture
Four moving parts.
1. Read tokens from Figma. Plugin reads variables, resolves aliases, builds the tree. Figma's storage limit is brutal (100KB per key). Rule data gets chunked by collection.
2. Let the designer author. React UI with four tabs. Tokens with browse and search. Rules (five types: usage, dont-use, states, responsive, accessibility). Recipes for components. Export.
3. Export structured specs. Markdown for AI, JSON for tooling. Same source of truth in both.
4. Feed specs to the AI. Paste into instructions or point file_search at the file.
Three critics before any code
Before touching code, I ran this through three independent reviewers.
ChatGPT (commercial viability): Forced scope down from "design systems platform" to "AI build reliability tool." Cut Tailwind export. Cut GitHub integration. Cut the QA scanner. Pushed component recipes as the real value unit. recipes matter more to AI than floating token rules.
Gemini (independent validation): 8.5/10. Added smart scaffolding for rules the designer just confirms. Added mode maps. Added $reasoning fields that explain why a token exists.
ChatGPT again (deep scope review): Cut MVP in half again. Flagged the Figma storage constraint before I hit it. Repositioned everything.
Three reviewers. No coordination. Same conclusions. That alignment was the signal. Lock scope. Build.
This is the adversarial critic relay happening for real. And why the plugin has a scope guard instead of my usual instinct to add one more feature.
Why this matters beyond my own use case
Every design team with AI coding tools is losing ground to drift. Week to week you can't see it. Month to month it's the whole system.
The fix isn't a better prompt. It's a spec the AI can't miss, structured enough that every PR either uses it or fails review for a reason you can point at. Not "this feels off." A citation.
This is the work design systems teams should be doing now. The first team to make their system legible to AI compounds that advantage. Every AI-written PR in their codebase respects the system. Every AI PR in a system-free codebase drifts further.
Current status: honest build log
Writing this while building, not after. Where it stands:
Phase 1 (skeleton): done. Type system. Variable reading with alias resolution. Markdown and JSON export. Four-tab React UI. Build is clean.
Plugin in Figma. Running against a real design system library.
Phase 2–4: pending. Polish. Rules persistence. Export preview work.
Phase 5 is the test. Export the spec. Feed it to Claude Code on a real task. Measure whether the resulting PR actually uses the system.
If Phase 5 works, the plugin becomes the thing I wanted at every company I've worked at and never had. If it fails, I find out exactly where the bridge breaks, which is almost as useful and a lot less fun to write up.
Either way the log stays open. I'll publish the Phase 5 numbers, not the vibes.
Want to follow along
Plugin goes public after Phase 5. Free for individual designers. Hosted version for teams that want collaborative authoring.
Signup is here if you want the notification.
The architecture doc (scope, decisions, critic notes) is on the tools page now, for anyone building something similar. Don't wait for me. Every design system team should be building this bridge.