A large carved wooden original standing in front of a tall mirror whose reflection is missing a few pieces, while a figure seen from behind writes the missing parts into a small notebook on a lectern beside it, the whole scene drawn with wide empty margins on every side.

UX Collective

Building an AI-ready design system library: Code → Figma with MCP.

Christine Vallaure · 26 October 2026

How-to · design systems · handoff · Agent context files

Takeaway

Designer Christine Vallaure now keeps her design system in code and has an AI agent generate the Figma library from it, with every gap listed for her to review.

Summary

Christine Vallaure, a designer who runs design-system training, found that AI agents turning Figma files into code invent whatever the file leaves out. She now keeps the design system in code. Claude Code, Anthropic's coding agent, builds the Figma library through an MCP connection, a link that lets the agent read and write Figma. A file of gaps and a parity check keep the two in step.

Key points

By her own count, a Figma component can express roughly 17 percent of what a React component can, so an AI agent fills the rest with guesses.
She transfers design tokens first, then builds two test components, using the same names as the code down to the spelling.
Every run writes GAPS.md, a list of what Figma could not express and what the agent was unsure of, which she reviews and annotates with her decisions.
A parity check compares two JSON lists of components, properties and defaults with no AI involved, though she still starts it by hand.

Implication

A design team can stop treating Figma as a second source of truth and review the agent's list of gaps instead of trusting a finished-looking library. That step is an inference from her single sample system, and she says real codebases are messier.

Plays

Design

Ask the AI agent to write a list of everything it could not express or was unsure about each time it builds design-system components, and review that list by hand.

Design

Check the Figma library against the coded components by comparing two lists of names, properties and defaults with a script rather than an AI model.

Derived by Working Surface from the article; more in the Playbook. Source line: Code is the source of truth. Figma mirrors it. Where they differ, Figma is wrong.

Source issue

27 October 2026: AI produces reliable work when a team writes down how its own system works and checks the output against something the AI did not write, from frozen rules to audits.