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.
Top comments (0)