Operationalizing a design system for humans and AI agents
A polished Figma design system was being bypassed the moment PMs prototyped with AI tools — it lived where those tools couldn't reach.
React implementation of the library, token architecture, a published npm package, a component playground, and the governance model for AI tooling.
NDA-bound enterprise context; components must render safely anywhere; rules must be unambiguous enough for an agent to follow.
A published package and Figma Make Kit, adoption across teams, and an independent review layer that keeps AI-generated UI on-system.
Role
Design Systems Engineering, Token Architecture, AI Tooling & Governance
Date
2025 — ongoing
Client
Deloitte Converge for Restaurants
Design system in Figma
Grecia Gabriel & Rebecca Bradley
Sector
Enterprise / Design Systems
Challenge
How do you make a design system that AI tools and agents will actually use — instead of approximating?
The problem
The design team already had a strong system in Figma: well-crafted components, clear visual foundations, and a mature library. That work belonged to Grecia Gabriel and Rebecca Bradley, and it was solid.
The problem appeared when Product Managers started using Claude Code and Figma Make to explore ideas with clients. The system was no longer part of the conversation — not because it was poorly designed, but because it lived somewhere those tools could not reach.
The speed of exploration increased dramatically. Consistency declined just as quickly. Demos were fast to build, but they no longer shared the system's visual language, interaction patterns, or UX principles. Every PM was effectively reinventing the wheel, and the carefully built design system became decorative — present, but untouchable by anything AI could use.
Why a strong system wasn't enough
Figma Make can bring real design systems into AI-generated prototypes through Make Kits — a component package, the tokens and styles from a Figma library, and usage guidelines, so generated experiences align with the real system instead of approximating it.
The catch: a Make Kit cannot be built from a Figma file. It needs a code package. The first prerequisite is a published React npm package — only then can it become part of a Make Kit, and only then can guidelines be layered on top.
That was exactly what did not exist. The system was strong in Figma, but Figma Make had no implementation package to consume. Without it, the tool generates its own versions — approximating the components, the tokens, the colors, the behavior. The result looks close to the brand, but it is not the system. That was the root cause: the design system, as it existed, was not consumable by the workflows that now mattered. It needed to become code.
My contribution
I took the system the team had built in Figma and led its translation into a functional code package — the prerequisite a Make Kit requires to exist.
That meant implementing the component library in React, designing the token architecture, packaging it as a consumable npm library, and building a playground where the system could be explored and validated component by component before exposing it to broader teams.
But building the package was not the most important part. The important part was deciding how to ensure that, once consumed by AI tools, it would keep behaving according to the principles of the original system. Building the code was the vehicle. Governing it was the real challenge.
The decisions that hold the system together
A package consumed by agents only works if its rules don't depend on human judgment to be applied correctly. A skilled designer can navigate ambiguity; an agent cannot — it does exactly what its rules allow. So the rules had to be right before they were exposed.
Brand color is scarce. The Deloitte green is reserved for the single most important action and its focus rings — nothing merely active or selected. It depends on a token, not on taste, so an agent can apply it without ambiguity (and rebranding stays clean).
Contrast is measured, not assumed. The warning color looked acceptable. I measured it: 2.37:1, against a WCAG requirement of 4.5:1. It failed. Warning text now uses a darker token that passes — and the rule lives in an automated review layer, not just docs.
The system refuses to touch what it doesn't own. Because I don't control where components render — an unfinished prototype or a legacy app full of CSS — the package never styles raw HTML globally. No bare h1, body, or button selectors; each component ships its own scoped reset.
Tokens are contracts. Token names map directly to Figma, preserving even the quirks of the original naming. The designer reading the Figma library and the engineer or agent reading the code see exactly the same concepts. Changing a token without agreement breaks a contract people already built on.
The real challenge was organizational
We needed PMs to explore ideas with clients using AI without turning those explorations into disconnected, inconsistent, hard-to-maintain experiences. The answer wasn't to limit exploration — it was to give it structure: a controlled environment, real production components in a playground, a set of guiding principles, and a process where explored concepts return to the design team for refinement before reaching production. Not a restriction. A framework.
One system, two entry points
Once the package existed, the next challenge was connecting it to the two environments where people and agents actually work.
Figma Make
Through Make Kits. I combined the npm package with the tokens and variables from Grecia and Rebecca's Figma library and layered usage guidelines on top — teaching Figma Make not only which components exist, but how and when they should be used. Once published, PMs could prototype with the same production components engineers would later consume.
Claude Code
Through a CLAUDE.md file and a collection of reusable skills. The CLAUDE.md encodes the architecture and hard rules — brand scarcity, token governance, implementation constraints. The skills capture repeatable procedures for building, validating, and documenting components.
On top sits a review layer of three read-only auditors that evaluate every component in parallel: one for token usage, one for accessibility (including measured contrast), one for QA and consistency. They never modify code — they only report. Generation is fast and confidently wrong; discipline lives in an independent review layer with no incentive to approve its own work. Two entry points, the same governance model behind both.
Early outcomes
The system keeps evolving, but it has already produced tangible results: a working Make Kit integration for Figma Make, a published npm package consumed across teams, knowledge-transfer sessions for teams working with Claude Code, and a roadmap for expanding adoption across the organization.
The most meaningful outcome, though, has been cultural. The conversation shifted away from whether AI replaces design work — and toward how design can define the principles, rules, and structures that let quality scale in environments where more and more solutions are generated with AI assistance.
That, ultimately, is the real deliverable. Not a component package, but a way for the judgment embedded in a design system to keep governing the experience — even when the person assembling the screen is a PM with a prompt, or an agent with a CLAUDE.md.