React Design System MCP · 2 min read

Building a bridge between Bigtincan’s design system and AI agents.

In May 2025 I saw an opportunity to integrate Bigtincan’s design system in Figma with AI via an MCP server.

We had experimented with creating layouts in v0 and Claude by uploading screenshots, but the fidelity was poor and they couldn’t use components from Bigtincan’s design system.

A screenshot showing the outcome of an attempt to build a Figma design from a screenshot — Attempting to recreate Story layout from a screenshot. It's good, but not good enough

Having used Claude to generate code for other projects I figured Claude should be capable of producing layouts based on our design system, but Claude didn’t know anything about our design system. Even when provided a design directly from Figma using an MCP server it struggled to create accurate layouts.

If Claude could access information about our design system it would able to create more accurate outputs.

The bridge

Using Claude, I built an MCP server that could read our React Design System (RDS), tell Claude what components were published, and pull implementation details from Storybook so Claude understood what components were available and how to configure them so they rendered accurately in the browser.

Once Claude was able to generate designs, I ran into an obvious problem: I had no way to see the layouts Claude produced and verify they were accurate. So I also built another tool that could load display them in a browser.

A screenshot showing what the original Figma design — The original file list design in Figma

A screenshot of the file list built be Claude — Claude's attempt at building the file list

What it achieved

The fidelity of what Claude produced was significantly improved. It could build section of a design, using our design system components, noticeably better than screenshot based prompting had been able to.

Where it fell short

A full page layout was too much for Claude to handle. The volume of data coming from Figma exceed what Claude could use within its context limits. Our version of Storybook required significant special case work arounds to make all components accessible, and the documentation wasn't always accurate enough to rely on. When I demonstrated these results to the design team, the reaction was positive, but not urgent.

What I learned

I had successfully demonstrated that giving Claude structured and accurate implementation documentation enabled it to build a design when given a Figma link, but the bigger opportunity was enabling Claude to interpret a description or spec, make layout decisions for itself, and then build it.

Moving from just implementing Figma designs to doing away with the need for one entirely. That requires Claude to understand component APIs as well as how our design system components and patterns work together. The next step is translating our design system documentation into structured markdown documents that a model could reliably reason from.

Explore more of my work.

Home