When the Design System Writes the Code
How We Build
Caroline Hilman is a Design Director at Fantasy. She wanted to know whether a design system built for a human team could brief an AI directly. Then she built a solution to prove it could.
With the system exported to a single file, Claude Code produced responsive, animated components and assembled a full page from a list.
Why make a design system AI-ready?
The question showed up in Fantasy’s Slack months before the experiment, while her team was deep in base styles on a client project.
“I’m wondering if Claude can generate the primitives and semantics tokens for the dev team (JSON file) based on the design provided. We’re working through the base styles right now and have been exploring naming conventions that would work for the LLM. All manual work that hopefully can be automated?”
The design system her team went on to deliver that spring gave her the test case. It was, in her words, “a really solid DS,” which made it a fair test.
“My theory was that a well-structured design system could become more than a reference for designers, it could serve as the source of truth for AI. If we build the right foundation (design tokens with clear and simple naming conventions, component variants, states, behaviors, and design intent documentation), AI should be able to read and generate live, production-ready components.”
How does a design system become machine-readable?
A Figma plugin called DesignBridge handled the translation.
“DesignBridge extracts the design system into a structured .md file that acts as a machine-readable representation of the system. The file includes design tokens (color, typography, spacing, radius, elevation), component definitions, variants, states, relationships between components, and any guidance we’ve documented.”
From there the steps were short: upload the file to Claude, prompt it to generate new components (responsive, with states and micro-animations), then assemble a full page by listing the components she wanted.
Do you name tokens differently for an LLM?
“Interestingly, I didn’t find much of a difference. The key wasn’t naming them differently for an LLM, it was naming them well. Clear, consistent, and scalable token names worked equally well for both AI and human developers.”
What does this solve for a design team?
For Caroline’s team, the biggest win comes with the handoff. Preparing primitives and semantics tokens as a JSON file for developers, the manual work originally described, is the kind of translation the extracted file covers. Beyond the handoff, the team gets a way to test ideas as working components and pages while the design system itself does the briefing.
“I see AI as amplifying designers rather than replacing them. As the technology evolves, designers will spend less time producing repetitive UI components and more time defining the robust systems, design principles, and experiences that AI can continuously build from.”
What would make the output production-ready?
While she found it useful for exploration, Caroline found that the tool she used Claude to build, and its deliverables, would have a hard time being production-ready without a human designer’s pass.
“For me, production-ready means the output is ready to ship with only minimal adjustments. AI is already capable of generating highly usable results, and some are even production-ready. However, a designer is still needed to review and refine the details, such as alignment, spacing, visual consistency, and ensure the final quality.”
Where is the line between AI and the designer now?
“I think that line is definitely moving, and it’s moving fast. Today, AI is capable of generating production-ready components, implementing design systems, and assembling pages, as long as it has the right structured foundation. Where designers still add the most value is in shaping the user experience, establishing the visual language, defining the system itself, and deciding what should be documented in the system.”
AI is great at executing the system, but it doesn’t define the vision behind it.Caroline Hilman, Design Director, Fantasy
So, can the design system write the code?
Most of it, yes. But it’s certainly not perfect. Caroline shared her takeaway to the team alongside the experiment demo links via Slack:
“The results still feel like vibe-coded design rather than polished high-quality work that requires designers’ craft. They’re still useful for visual exploration and prototyping, but lack the detail for complex design.”
“AI was great at generating something that looked right, but it often missed fundamental design details, such as alignment and spacing, that a designer would never miss.”
The system Caroline created needed nothing extra to brief the model, and the token handoff her team had always done by hand became an export and a prompt. But the gap that remained was a designer’s review, which is roughly where a design leader would want the gap to be.
How to generate UI components from a Figma design system with Claude Code
Caroline’s hypothesis held because the design system was already well structured. Clear, consistent token names, defined component variants and states, and documented design intent are what let the AI read the system correctly. Skip this step and you’ll get the vibe-coded output Caroline describes above.
Use DesignBridge, a free Figma plugin that scans your file and exports a single DESIGN.md covering your tokens, component anatomy, variants, and states, with a Tailwind config included. This file is what the AI reads as context.
Caroline found that the same names that serve a human developer serve the AI equally well, so there’s no separate naming scheme to invent for the model.
Upload the DESIGN.md and ask for components with the states and micro-animations you need. To build a page, give it the list of components the page should contain, the way Caroline assembled a full mobile page.
The output may look right, but it can still miss fundamentals like alignment and spacing, so always plan time for a designer to refine details and check visual consistency before anything ships.
Frequently asked questions
Yes, if the system is well structured. In a Fantasy test, Design Director Caroline Hilman extracted a design system to a machine-readable file and prompted Claude Code with it. The components came back working and responsive, a full page could be assembled from a component list, and the output still needed a designer’s pass before shipping.
DesignBridge is a free Figma plugin that exports a design system into a structured DESIGN.md file: design tokens (color, typography, spacing, radius, elevation), component anatomy, variants, and states, plus a Tailwind config. AI coding tools like Claude Code read that file as context and generate code from it.
It removes manual translation work and opens the system to AI tools. Caroline’s starting point was preparing primitives and semantics tokens for developers by hand; extracting the system to a structured file covers that handoff and gives a tool like Claude Code the context to generate working components for exploration and prototyping.
No. Caroline went in expecting a difference and didn’t find much of one; token names that are clear, consistent, and scalable for a human developer worked for the LLM as written.
Some of it, and the rest is close. Production-ready, as Caroline defines it, means ready to ship with only minimal adjustments, and getting there still takes an experienced designer reviewing alignment, spacing, and visual consistency.