Design systems · AgendaPro · 2025–2026

A design system people use, and an AI can read.

Role
Head of Product Design, leading 10 product designers. I designed the system, the rules written for machines and the adoption plan.
Users
Designers, product managers and engineers at AgendaPro, and the AI agents that build screens with them.
Scope
Tokens, components, Figma organization, governance, AI-assisted front end.
Status
Released in March 2026. The AI agents team adopted it first.

Designers had a system. Agents didn't.

What it changed

Designers and engineers got one system to build from, and screens built with AI came out close to the design.

The team was starting to build screens with AI. Without a system it could read, every generated screen came out with its own colors, buttons and spacing. An older system was being retired, and the AI tools could read neither. So the question became: what does a design system look like when one of its users is an agent?

Design-to-code fidelity

90–95%

What an agent built from the system matched the Figma design this closely in the proof of concept, February 2026.

An estimated 8 to 10 days saved per implementation. Estimate, not measured

From prompt to screen.

Ask for a screen in plain words, and it comes back built from the library.

Illustrations of the system, with invented content. Without the system, a model picks its own colors, radius and type, mixes three button styles on one screen, and the result has to be rebuilt by hand. With it, every color is a semantic token, Badge and Button come from the library, and the screen is mapped to code, so it ships as is.

3 min

For an agent reading the system through Figma to rebuild the calendar view, in a live demo, February 2026.

90–95%

How closely what the agent built matched the Figma design, in the proof of concept.

27

Components in the first release, March 2026, with tokens coming from Figma and each component mapped to code.

"The board is very happy with the design system. Eight to ten days saved per implementation."

The board, February 2026. The days saved are an estimate, not a measurement.

A system written for two readers.

Designers read the Figma library. Agents read the same system as tokens, a component map and rules.

COLOR Aa TYPE SPACE surface/action-primary text/default border/default text/action-primary

The system, layer by layer

  1. 4The screen people seeBuilt only from the system
  2. 3Components27 in the first release, each mapped to code
  3. 2Semantic tokensNamed by the job they do
  4. 1FoundationsColor, type and space
Primitives hold the raw values, like purple.500 · #812DF2 and grey.600 · #2C3941. Semantic tokens say what each one is for, like surface/action-primary, text/default and text/action-primary, and fill, text, focus ring, spacing and radius all point to them. Figma is the source, and code for CSS, Tailwind and React Native is generated from it with Style Dictionary. Each of the 27 components is mapped to code with Code Connect. Token names and values as they are in the system's token files.

One component, every state.

Every state drawn, so nobody, human or model, has to guess one.

From the Figma library. Button comes in primary, secondary, destructive and ghost versions, in two sizes and icon-only, each with default, hover, focus, loading and disabled states. Dialog has a desktop and a mobile layout, and on mobile the actions stack with the primary first. Input has default, focus, filled, error and disabled states, with the label, helper text and error color taken from tokens.

The rules, and getting people to use them.

Most of the work was making implicit knowledge explicit, so a model could follow it too. Adoption was designed like the rest of the system.

The rules I designed it around

  1. 01

    Name things by what they do.

    “Action primary” tells an agent where to use a color. “Purple 500” doesn't.

  2. 02

    Shape first, name last.

    The agent identifies a component by its form, then its context, and only then by its layer name.

  3. 03

    One source, many outputs.

    Tokens live in Figma and are generated for web and mobile, so design and code can't drift apart quietly.

  4. 04

    Not in the system? Ask.

    If a screen needs something the system doesn't have, the agent flags it instead of inventing a new one.

For the agent, the system comes with a map of every component, its parts and its tokens. It learns it in five layers, each needing the one below and each with a pass mark: inventory 95%, anatomy 100%, token map 90%, visual reference 100%, and relationships with no orphans.

Getting people to use it

  • One Figma organization: 12 teams, and every project file in the same four parts, context, flow, screens and edge cases.
  • Shared ownership: a core team owns the system, product teams can propose and contribute, with clear owners for each decision.
  • Adoption tracked with Figma's library analytics, not by asking around.
  • Training for designers and product managers to build front end with AI, using the system.

I designed the system, the rules written for machines and the adoption plan. Mapping the product's front-end components to code was shared work: part of it was done by an engineer on the team. The AI agents team was the first to adopt it.