Teaching a design system to work with AI

Context

Slingshot is Infragistics’ enterprise work-management platform, built on a large design system in React and Figma. As the team adopted AI coding tools, a gap appeared: the system meant to keep everything consistent couldn’t be read reliably — not by the AI, not by new people. I led the work to fix that: make it legible to machines, keep the judgment with the people.

Screenshot to add

Before / after of the naming — one concept, one name

A side-by-side of the scattered old names (rest / default / idle) collapsing into a single vocabulary across Figma and code — the first concrete fix, and the most legible proof of it.

My role

I owned the system’s AI-readiness end to end — token architecture, the design↔code mapping, the shared vocabulary, and the rules for what an AI may and may not do.

Research & insight

I watched where things broke:

• Design and code had drifted apart. One button, hundreds of Figma variants, no authoritative map to its React props — so everyone guessed.
• Tokens existed; the rules didn’t. No guidance on which tier to use, so raw values crept in.
• The vocabulary had drifted. One idea, many names (“rest” vs. “default”).
• Context lived in people’s heads — every new collaborator started from zero.

The insight: an AI isn’t sloppy because it’s dumb, but because the system never told it the truth. Give it the same clear contract you’d give a new teammate, and it behaves like one.

What I did

Screenshot to add

The four-tier token architecture, in Figma variables

A capture of the primitive → semantic → component → ui-mode collections (with light/dark as a mode on the semantic tier). It shows the backbone an AI can follow — a right answer for every value.

Gave the tokens a backbone. ~800 tokens in a four-tier chain, one rule per tier, with light/dark as a mode on the semantic layer — a right answer for every value.

Screenshot to add

A component's Figma variants mapped to its React props

The design↔code bridge: a real component-mapping doc pairing every Figma variant to its prop, with mismatches written down — so an AI translates instead of inventing.

Made the design↔code bridge explicit. A mapping per component pairs every Figma variant to its React prop — and documents where they don’t line up, so an AI translates instead of inventing.

Set one vocabulary. Kebab-case, one size scale, one name per concept across Figma and code.

Wrote the context down. The rules live as version-controlled docs a tool loads fresh each session — change a rule, the next build follows it.

What stayed human

The point wasn’t to let AI build the system. It was to keep the human in charge:

• Plan before build — the AI proposes; I approve or reject before a line is written.
• Never invent — if something’s missing, it stops and asks instead of faking it.
• The real calls stayed mine — new component vs. compose, which pattern replaces which, how the tiers are shaped.

Outcome

The system became something an AI could build with and a person could trust — agents now produce on-token, on-brand code, so designers direct the work instead of fixing it. And because every change still passes a human approval gate, speed went up without giving up control.

That’s the model I believe in: not automation that replaces the designer, but structure that lets them move faster while owning every decision.