Teaching a design system to work with AI

Context

Slingshot is Infragistics’ enterprise work-management platform, built on a large design system in a proprietary UI framework 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.

The design system's component gallery — buttons, inputs, cards, and charts shown across their states on one token-driven foundation. — Slingshot's design system — 180+ components on one token-driven source of truth. The starting point for making it legible to an AI.

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 — working alongside a product owner, for the fellow designers who used the system daily.

Research & insight

I watched where things broke:

Design and code had drifted apart. One button, hundreds of Figma variants, no authoritative map to its code 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

A single color token climbing the tiers — primitive #6988FF to semantic accent/primary to component button/primary/surface — rendering the Task button. — One value climbing the chain — a raw color traced primitive → semantic → component, straight into the button an AI ships.

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.

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

Before and after of the token naming — scattered names like rest, normal, and base collapsing into single canonical tokens: default, md, disabled. — One idea, once spread across many names — settled into a single vocabulary 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 human judgment 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 ours — 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.