Develop an AI-readable design system with MCP

Pierre Bremell — Tue, 19 Aug 2025 08:50:00 +0000

Cross-posted from Medium. Read the full article there, especially for visuals and deeper examples.

Why traditional design systems fall short in the AI-first era

Since 2022, I’ve worked with large-scale systems like Fuse at The Very Group and the Volvo Group Design System. These systems helped teams move faster and stay aligned—but they were built for people, not for machines. In today’s AI-powered world, that is no longer enough.

When each layer—documentation, design, and code—requires human translation, it creates friction. We need systems that don’t just document rules, but activate them.

Reframing your design system for machine collaboration

To make design systems behave as AI-friendly environments, two core capabilities are essential:

Structured data — so AI tools can reason with the content in each layer.
Intelligent retrieval — via well-defined APIs.

1. Documentation as structured data

Move guidelines and docs into a RAG-ready database. Attach metadata—component refs, platforms, tags (like accessibility or states), authorship, update history, canonical URLs. Every image should include alt text, license info, and a source link. This makes guideline lookup fast, accurate, and traceable.

2. Figma assets and tokens need to be computable

Use stable naming for variants, minimal nesting, smart use of Auto Layout, concise descriptions, and semantic variables. Structure Variables as tokens. By making intent explicit, both designers and AI agents can reason at the same level of clarity.

3. Coded components must be machine-discoverable

Expose a consistent schema for props, variants, accessibility specifics, token linking, and naming conventions. AI tools should be able to query components, select variants, bind tokens, and produce reliable code—without ambiguity.

Introducing MCP: a layer-agnostic bridge

Model Context Protocol (MCP) is a portable interface layer that presents each data source—documentation, Figma, component catalog—as a machine-readable API.

Editors like Cursor or Windsurf can either:

connect directly to each MCP server
go through a lightweight gateway
or operate via a unified MCP surface

Each option offers a different balance between flexibility, observability, and governance.

How IDE rules orchestrate AI behavior

Behavior orchestration should live in your IDE rules:

instruct AI tools to consult Figma first, then docs, then components
enforce content and accessibility rules via queries
disable token invention
require pull requests instead of direct pushes
return traceability (guideline IDs, token versions, component references) back to the user

Differences this makes for your team

For designers:

Prototypes fly from Figma to runnable code with token fidelity
Accessibility and brand compliance are enforced early
Variant naming is consistent, and guided by system conventions
Contributions validate against system rules and can auto-sync changes

For developers:

Components map correctly, respecting props, states, and design tokens
Pull requests link back to mapping decision sources
Migrations and deprecations become safer and incremental
Governance is baked into the generation pipeline—no more invented tokens

From systems to AI collaborators

The goal is not to remove humans. It’s to remove friction.

When your design system becomes machine-reasonable, it transforms from a library to a conversation:

“You ask. The system responds with facts, visuals, the right components. It cites sources. It respects your rules. It helps you move forward faster—and with confidence.”

What do you think?

Do you have any experience of this setup, or any thoughts? Please comment below.

DEV Community: Pierre Bremell