Agentic Design System

Where I started

After the design system overhaul at Proctorio, engineers started generating code from designs and designers started prototyping in code. Both used our system. Neither got it right, and nobody knew why.

So I ran it as research with our lead front-end engineer. Same design, same prompt, and the only thing I changed was how much of the system the model could see.

What I found

The research showed us quickly that any inconsistency between what the model read in Figma and what actually existed in the codebase confused it.

A model reads a design fine. It can't look at a rectangle and know it's your Button. Left alone, it rebuilt components from scratch, hardcoded the colors it could see, and combined parts in ways the system doesn't allow.

<div
  className="rounded-md px-4 py-3
    bg-[#008b8b] text-white
    text-sm font-medium"
>
  Save changes
</div>

<Button
  variant="primary"
  size="sm"
>
  Save changes
</Button>

The information was in the system the whole time. The model just couldn't reach it.

What I built

Three fixes, all doing one thing: moving what the team knew into something a model can read.

Tokens. The agent only sees semantic names like color/action/primary, never raw values like #008b8b. Change one alias and everything follows.

Metadata. Each component got a JSON file with its props, the tokens it uses, and how to use it. An agent can draft most of it. The last 20%, the stuff your team learned the hard way, a person has to write.

One source. Figma, the docs and the token files all point at the same contract, so the agent never has to guess.

That work grew into my design skills infrastructure, which took spec production from days to under 30 minutes.

What was missing

Every fix was something I handed the agent. Nothing checked whether it listened.

Where I am now

fibo is my own design system, built with Claude Code. This time the rules aren't just written down. They're enforced.

• Lint, format, Figma drift, build, types and tests run on every pull request.
• Every part installs into a fresh app before it ships.
• Every story runs an accessibility check that fails on any violation.
• A part missing its metadata fails the build.

It works. An agent recently added a voice memo component and the pull request came in complete, with stories, docs, metadata, a changelog line and 396 passing tests. Nobody had to catch anything.

What works today

Most public design systems now ship an MCP server and agent skills (survey of 21). Here's what actually moves the needle:

1. 01
   Real components beat descriptions.

   A registry of installable parts got agents to 95% compliance in a CHI '26 study.

2. 02
   Checks beat docs.

   Agents opened rule files in 3.5% of runs, but followed rules 90 to 100% of the time once a check gave feedback (RepoComplianceBench).

3. 03
   Small context beats big context.

   A short index in AGENTS.md scored 100% in Vercel's test. Long overviews just cost more.

4. 04
   One name on both sides.

   When Figma and code use the same token names, a script can catch drift.

What's next

Measuring it. fibo shows the setup works, but I still want a benchmark that tells me whether the system is getting easier for agents to use over time.