Overview
Building a design system used to be a slow and demanding process, shaped by manual cleanup, repeated decisions, and long hours of maintenance.
With the rise of AI-assisted workflows, that process is changing. It can now move faster and become far more practical, but it is still not as simple as starting from scratch.
This case study comes from a real experience of building a design system inside an existing product environment: one with multiple partial systems, messy files, and visible inconsistencies across the interface. The task was not only to bring order, but to create a clearer, more scalable foundation out of complexity.
That environment was the vendor platform I owned as a senior product designer: see the wider qlub product work.
This is the approach I followed, the tools I used, and how Figma, Claude, Claude Design, and MCP-based workflows helped shape that transformation into an agentic design system.
The problem
The product had grown through multiple contributors, which introduced several challenges. The issue was not only visual inconsistency; it was operational. Without a strong system, every new screen required more decision-making, more manual cleanup, and more design debt.
- Inconsistent UI patterns across the product
- Multiple partial system approaches instead of one reliable source of truth
- Repeated components built in slightly different ways
- Weak token structure and inconsistent naming
- Slower handoff between design and development
- More time spent rebuilding decisions that should already have been standardized
Why an agentic design system
A traditional design system would have improved consistency, documentation, and reuse. But I wanted the system to do more than hold components.
In an AI-native workflow, the system itself becomes infrastructure. It should be understandable not only to designers, but also to AI-assisted tools that help generate, refine, and scale design output. That meant the system needed to be structurally clear, semantically meaningful, and usable in workflows connected to Claude, Claude Design, and Figma. That is why I approached this as an agentic design system: a design system built for both human teams and AI-assisted workflows.
My role
As the designer leading this effort, I owned the direction end to end, from diagnosis to a working, AI-ready foundation.
- Auditing the existing interface and identifying inconsistencies
- Defining the system architecture
- Structuring and rebuilding tokens, semantics, and component patterns in Figma
- Using Figma Console MCP so agents could inspect and update the system directly inside Figma
- Creating and refining the component library in Figma
- Maturing the system into a reliable design foundation
- Bringing that system into Claude Design so it could support future design generation
The system architecture
The three-layer token model
A key part of this work was structuring the system into three token layers, so components never pointed straight to raw values but followed a clearer chain of meaning.
The layers
1 · Primitives
The raw foundational values: colors, spacing units, radii, font sizes, line heights, shadows, and other base decisions.
2 · Semantics
Tokens that give primitives meaning. Instead of referencing a raw value directly, semantic tokens define intent such as surface/default, text/primary, border/subtle, or spacing/card/padding. This makes the system easier to scale, theme, and reason about.
3 · Components
The tokens closest to actual UI usage. They map decisions to component behavior: button padding, input radius, card spacing, or badge color roles, keeping components consistent while inheriting meaning from the semantic layer. That separation made the system more maintainable, easier to scale, and far more useful for AI-assisted generation.
The workflow
The workflow was built across three layers, each with a distinct job.
- Figma remained the source of truth for tokens, components, and system structure.
- Figma Console MCP gave live access to inspect and repair the system directly inside the Figma file, at scale.
- Claude Design became the generation layer, once the system was mature enough to support more reliable outputs.
The loop in practice
- Structure the system in Figma
- Use agents through Figma Console MCP to inspect and accelerate system work
- Mature the design system
- Bring that system into Claude Design
- Generate more consistent outputs from a cleaner foundation
Managing the system in Figma
Figma became the core environment where the system was rebuilt and governed: restructuring variables and token groupings, improving naming logic, cleaning up repeated patterns, standardizing component behavior, and aligning component-level decisions to shared system logic.
A major difference in this project was that I did not rely only on manual Figma work. Through Figma Console MCP, agents were able to work directly inside the Figma environment to inspect the file, analyze inconsistencies, and help structure semantics, token relationships, and system patterns. That dramatically reduced repetitive manual cleanup and made the process both faster and more cost-efficient.
Using Claude, Claude Design, and MCP
I used Claude, Claude Design, and Figma Console MCP as a connected workflow rather than as separate tools.
Figma remained the source of truth, where I structured the system, refined the core logic, and built the component library. Through Figma Console MCP, agents could inspect and update the live Figma file directly, which made it possible to analyze system structure, create semantic organization, and accelerate the heavy lifting inside the design system itself.
Once the system had matured enough in Figma, I brought it into Claude Design. From there, the system became more than a library: it became a usable generation layer. Because the foundation was now cleaner and more consistent, Claude Design could produce more reliable design outputs based on the system.
Outcome
The result was a stronger, more scalable design system that improved both consistency and workflow maturity.
- Clearer token architecture, with stronger separation between primitive, semantic, and component layers
- More consistent reusable patterns and better system governance inside Figma
- A more scalable foundation for AI-assisted design work
- Reduced manual cleanup through agent-assisted structuring inside Figma
- Significant time and cost savings in the system-building process
- Less repeated UI cleanup, and more focus on real product problem-solving
Why it matters
Design systems are changing. In an AI-assisted environment, a weak system only scales inconsistency faster, but a well-structured one becomes a multiplier. It improves consistency, accelerates production, and creates a more dependable foundation for both designers and AI-assisted tools. This work was not just about system cleanup; it was about creating a stronger operating model for how design can work now.
Reflection
What started as a need for consistency became a much broader systems project. The more structured the design system became, the more useful AI became within the workflow. Instead of rebuilding patterns manually, the process moved closer to defining intent, validating structure, improving governance, and using AI where it could accelerate quality work.
For me, that is the most exciting part of the shift: not replacing design craft, but giving it better leverage. This project began as a need for a stronger, more reliable design system. It evolved into something more valuable: an agentic design foundation built for consistency, scale, and a more AI-native future of product design.