AI design systems: from Figma to production-ready code

AI can help you build a design system faster by generating design tokens, scaffolding components, and bridging the gap between Figma and production code through tools like MCP (Model Context Protocol) servers and AI coding agents. But the speed comes from knowing what to direct AI towards, not from handing it the whole brief.

I’m Fergus Hannant , Senior Product Designer at Fifty Five and Five with over seven years of experience creating digital products across legaltech, healthtech, insuretech, and B2B SaaS. I specialise in design systems and have recently been building AI design systems for real clients using Claude Code and Figma MCP. What I’ve found is that AI accelerates the structural, repetitive parts of design system work significantly, but it needs a designer directing the process to produce anything genuinely usable.

The adoption numbers reflect both the opportunity and the gap. 78% of creators say AI enhances their efficiency, but only 32% say they can rely on AI output without review (Figma ). For design systems, where consistency and precision matter more than almost anywhere else in design, that reliability gap is exactly where your judgement as a designer comes in.

This is a deeper look at the design system side of AI for designers . Not a tools list, but what I’ve actually found when building AI design systems on real work, and the things I wish someone had told me before I started.

Design tokens and AI: making your system machine-readable

Design tokens are the foundation of any design system, and they’re the highest-leverage place to start when bringing AI into the process. Tokens are the smallest named values in your system: colours, spacing, typography, border radii. Get the token structure right and AI tools can work with your system effectively. Get it wrong and AI will produce output that looks plausible but breaks your design intent.

The key distinction that matters for AI is between primitive tokens and semantic tokens. A primitive token like blue-500 is a raw value. A semantic token like colour-button-background-brand references that primitive and adds meaning: it explains what the colour is for, not just what it looks like. AI tools need to see both layers, plus descriptions that explain the intent behind each token.

Without that semantic layer, AI doesn’t know that blue-500 shouldn’t be used directly in a component. It will apply raw values wherever they seem to fit, which creates a system that technically works but is painful to maintain. Brad Frost, who has written extensively about AI and design systems, describes AI in this context as “a smart-but-sometimes-unsophisticated junior developer” that requires human review (Brad Frost ). That framing matches what I’ve seen in practice.

Structuring your Figma files matters too. Clear layer naming, consistent auto layout usage, and semantic token references all make your designs readable to AI tools. The more structured your source files are, the better AI can interpret and generate from them. Messy Figma files produce messy AI output.

Figma to code: what the MCP workflow actually looks like

The bridge between Figma and production code is where AI design systems get genuinely practical. MCP, or Model Context Protocol, is what makes this connection work. It sends your design system context directly to AI coding agents: your components, styles, and variables all become available, so the AI can generate code that actually follows your system.

Figma’s MCP server connects to tools like Claude Code, Cursor, and GitHub Copilot. When an AI agent inspects a frame in Figma through MCP, it receives the full context: which components are used, what tokens are applied, how the layout is structured. The more consistently your designs use your design system, the more useful MCP becomes. Designs that follow the system produce better code. Designs that override tokens or use detached styles give AI less to work with.

I tested this workflow recently on a client project at Fifty Five and Five. I was setting up a new design system for Avalara, which is normally a daunting stage because guidelines need following closely and early mistakes are painful to fix later. Using Claude Code and Figma MCP, I created colour and typography variables with a few prompts. I then generated a range of form input components, keeping them on brand by giving Claude Code the Avalara website and design guidelines as reference material.

There was still manual effort involved. Renaming variables, converting generated designs into proper reusable components, checking that everything aligned with the brand guidelines. But the process saved significant time and created consistent output that I could build on with confidence. I would definitely consider doing this going forwards for similar projects.

MCP works best when your design system is already well-structured. If your tokens are semantic, your components are properly built, and your Figma files are clean, MCP gives AI agents the context they need to generate accurate code. If those foundations aren’t in place, the output requires much more manual correction.

The parts of a design system AI can automate (and the parts it can’t)

Design system automation with AI works well for the structural, repetitive tasks that eat up time without requiring much creative judgement. Where it falls short is anywhere that requires understanding context, users, or brand intent.

What AI handles well in design system work:

• Colour variable generation: Creating full colour scales from a base palette, including light and dark mode variants
• Typography scales: Generating type hierarchies with consistent sizing, weight, and line-height values
• Component scaffolding: Building the initial structure of components like buttons, inputs, and cards
• Cross-framework translation: Converting components from React to Vue, Angular to Web Components
• Unit test generation: Writing tests from plain-language descriptions of expected behaviour
• Accessibility review: Checking components against guidelines with contextual recommendations
• Documentation: Generating usage docs from design files and code

Brad Frost’s research puts the speed gain for component code generation at 40-90% faster than writing manually (Brad Frost ). That matches my experience, particularly for the initial scaffolding phase.

What AI doesn’t handle well:

• Spacing and layout decisions: AI often gets spacing wrong. Values that look reasonable in isolation break down when components sit together in real layouts
• Variant completeness: AI generates the obvious states (default, hover, active) but misses edge cases like error states with long text, loading states, or empty states
• Sticking to one library: Without clear direction, AI may pull patterns from different frameworks or libraries, creating inconsistency
• Brand-level decisions: The choices that make a design system feel intentional rather than generic still need a designer

AI handles the repetitive structural work. Designers handle the decisions that require understanding users and brand. Design teams that already use design systems see 31-50% efficiency improvements (Sparkbox ). Adding AI on top of that amplifies the gains, but only for the right tasks.

The AI design tools that work for design system builds

No single AI design tool handles every part of design system work. Most designers building AI design systems end up using two or three tools for different purposes, just as you’d pick different tools for wireframing, visual design, and prototyping.

The tools I’ve found most useful for design system work:

Figma Make: Figma’s built-in AI generator that uses styling context from your existing library to stay on-brand. Every prototype generated through Make is aligned with your design system. Weekly active users grew over 70% quarter-over-quarter (Figma ), which suggests the tool is finding a real place in people’s workflows rather than being a novelty.

Claude Code + Figma MCP: This is the combination I used on the Avalara project. Claude Code handles the code generation while MCP provides the design system context from Figma. Particularly strong for generating production-ready components that follow your existing system.

Figma “Check Designs”: An AI-powered linter launched in late 2025 that recommends design tokens and variables from your system. Useful for catching inconsistencies where someone has detached a style or used a raw value instead of a token.

Supernova: An AI-powered platform that analyses codebases, imports Figma assets, and helps onboard full design systems. Strong for teams that need to bridge an existing codebase with their Figma files.

UXPin Merge: Includes an AI Component Creator that generates code-backed components from text descriptions or images. Useful for teams that want to work with code components directly in the design tool.

85% of designers and developers say AI will be essential to their future success (Figma ). For design system work specifically, the value comes from assembling the right combination of tools rather than looking for one that does everything. Start slow to build understanding of what each tool does well, then move quickly once you know where each one fits.

Why AI still needs a designer’s eye on design systems

AI-generated design system components share a tell: they’re functional but inconsistent. The spacing drifts between components. Naming conventions vary. Variants cover the obvious states but miss the edge cases that real products encounter. The output is technically competent but lacks the considered decisions that make a system genuinely usable across a product.

This is related to something I’ve noticed across AI image generation tools as well: a “too clean” problem where AI output looks polished at first glance but feels flat on closer inspection. In image generation, the issue is missing texture and character. In design systems, the issue is missing intentionality. A well-built design system reflects hundreds of small decisions about hierarchy, emphasis, and interaction patterns that are grounded in how real users behave. AI doesn’t have that context unless you give it explicitly.

A successful design system requires better communication, thorough documentation, and shared patterns. Those same ingredients are what make AI effective. A team with a well-documented, well-structured design system will get significantly more value from AI tools than a team that’s still working from scattered files and undefined patterns.

I built the Fifty Five and Five website from scratch using Claude Code, and even on that project, where I had full control of the design system from the start, there were decisions that needed a designer’s eye. Token naming, component API design, the relationship between spacing values: these are the decisions that compound across a product. Getting them wrong early creates problems that ripple through everything built on top.

A lot of this stuff is down to experimentation. AI design systems are new enough that best practices are still forming. The designers who get the most from these tools are the ones willing to test, evaluate, and refine their approach rather than expecting a polished workflow from day one.

How can AI help you build a design system faster?

The question was how AI can help build a design system faster. The answer is that AI accelerates the structural, repetitive parts of design system work, from generating tokens and scaffolding components to bridging Figma and production code through MCP. The speed comes from knowing what to direct AI towards, not from stepping back and letting it run.

What I’ve found through building AI design systems on real projects:

• Structure your design tokens so AI can read them: semantic naming, clear hierarchy, descriptions that explain intent
• MCP is the bridge between Figma and AI coding tools, and it works best when your design system is already well-structured
• AI handles structural repetition well; design decisions that require understanding users and brand still need a designer
• Build a toolkit (Figma Make, Claude Code, Supernova) rather than relying on one tool for everything
• Start slow to build understanding, then move quickly once you know what works for your projects

This is part of the broader shift we explore in AI for designers . Not replacing designers, but changing what we spend our time on. The repetitive setup work that used to take days can now take hours. That means more time for the decisions that actually matter: how the system serves users, how it scales, and how it holds together as a product grows.

If you’re looking for help building an AI-ready design system, get in touch .

Frequently asked questions