Almar Labs
Book a call
Back to all projects
/Case Study · 04
[Status: In progress]

AI Agentic Design System

Can an AI agent build inside a design system without breaking it?

Role: Product Designer/Company: Leadtech/Product: Passport services design system/Tools: Figma, Claude, Figma MCP
98% token accuracy target
Initiative Status: In progress. I'm proposing this as an internal initiative for the Leadtech design team. The steps and targets below are the plan, not results.
TARGET CRITERIA (PRE-SET EVALUATION BAR)
98%
Semantic token accuracy (target)

The agent applies the right semantic colors, variants and spacing rules without inventing components.

70%
Reduction in time-to-prototype (target)

From days to hours to get a working flow that respects the existing system guidelines.

0
Hardcoded values (target)

No fixed hex colors or arbitrary margins in agent-generated code once the token architecture is in place.

100%
Reuse of existing components (target)

The agent uses only the existing Figma library, with no duplicated or non-standard components.

Status: In progress. I'm proposing this as an internal initiative for the Leadtech design team. The targets are the plan, not results.
/01 // The Question

The core question

Can an AI agent build a new product experience without breaking the design system? AI generates interfaces fast. That speed shows a gap: if an agent doesn’t understand what the system means, it copies the visual patterns and misses the rules behind them.

/02 // Hypothesis

The hypothesis

“If a design system exposes its tokens, components, usage rules and product context in a form a machine can read, an agent should be able to build new product experiences and stay inside the system.”

TOKEN ARCHITECTURE · A single component resolved to its semantic tokens: sizing, spacing, typography, color and radius
A single component resolved to its semantic tokens: sizing, spacing, typography, color and radius
A single component resolved to its semantic tokens: sizing, spacing, typography, color and radius
/03 // Protocol

How I'll test it

1. Audit: Connect Claude to the existing design system through Figma MCP and ask it to describe what it understands: variables, components, variants, naming. What it gets wrong shows where the system is legible to humans but not to an agent.
2. Restructure tokens: Separate primitive tokens (blue/500, spacing/4) from semantic ones (color/action/primary, color/text/primary), so the agent reasons about purpose and not raw values.
3. Document components as product knowledge: For each component: purpose, variants, states, usage rules, do and don’t. A button comes with rules about when and how to use it.
4. Add a product-usage layer: Beyond how a component looks, document when to use it and when not to. An Empty State is for zero results or a required next action, not for loading or errors.
5. Build: Give the agent a brief (e.g. a checkout flow with delivery, pickup and store availability) and evaluate what it produces.
6. Evaluate: Score the output against explicit criteria: correct tokens, existing components reused, no invented components, semantic colors, spacing respected.
7. Iterate and re-test: Fix what the agent got wrong, run the same brief again and compare before and after.
DOCUMENTATION LAYER · Semantic color documentation: primitive-to-semantic mapping organized by App, Surface, Action and Text
Semantic color documentation: primitive-to-semantic mapping organized by App, Surface, Action and Text
Semantic color documentation: primitive-to-semantic mapping organized by App, Surface, Action and Text
MACHINE-READABLE SPECIFICATION · Full component specification: states matrix, token wiring and usage rules for a single component
Full component specification: states matrix, token wiring and usage rules for a single component
Full component specification: states matrix, token wiring and usage rules for a single component
/04 // Strategic Impact

Why it matters

The point isn’t "I used Claude with MCP." It’s understanding how a design system has to change once an AI agent is part of product development. Without an intentional semantic layer, agents invent arbitrary hex codes, duplicate components, and break system consistency.

/05 // Target Benchmarks

Targets

These are the success bar I'm setting before running the real audit and the first agent brief.

98%
Semantic token accuracy (target)
The agent applies the right semantic colors, variants and spacing rules without inventing components.
70%
Reduction in time-to-prototype (target)
From days to hours to get a working flow that respects the existing guidelines.
Zero
Hardcoded values (target)
No fixed hex colors or arbitrary margins in agent-generated code once token architecture is in place.
100%
Reuse of existing components (target)
The agent uses only the existing Figma library, with no duplicated or non-standard components.
Next step: Pitch the proposal to the team, then run the audit and an agent brief to get real before and after numbers.
/06 // Learnings

Takeaways

Design systems have to evolve for AI to consume them.

A visual library isn’t enough. To design or build without breaking consistency, an agent needs a semantic layer that documents the why and when behind each component.

Semantics is the bridge between humans, code and agents.

Separating primitive tokens from semantic tokens lets an AI read design intent (color/action/primary) and not a loose value (#3B82F6).

Testing an agent needs its own criteria.

The question isn’t whether it makes attractive interfaces. It’s whether it respects the system’s boundaries without adding technical debt or visual inconsistency.