2 min read316 words

Design System MCP

Design System MCP

Usul's design system, wired into AI coding agents so design QA runs while you build.

overview

As Usul's engineers adopted AI coding agents, a gap opened: agents could ship interface code fast, but nothing checked that the result actually matched the design. I built a design-system MCP workflow that gives agents direct access to our Figma source of truth — design context, component metadata, and design tokens — and a repeatable skill that audits code against it.

why

Design review was the bottleneck in an agent-speed workflow. Developers "vibe coding" against a deadline would ship screens that drifted from the system — near-miss colors, off-scale spacing, overridden component variants — and catching that manually meant a designer eyeballing every PR. The system knew the right values; the workflow just couldn't reach them.

how it works

The workflow connects the coding agent to Figma over MCP and runs a structured design check: pull the design's screenshot, reference implementation, and token definitions; read the developer's actual code; then compare across six areas — colors, typography, spacing, shape, layout, and overall visual feel. The agent reports mismatches in plain language ("the blue is too light", "padding is 12px, design says 16px"), always paired with the minimal fix, and can apply the fixes directly and show the diff.

The skill is defensive by design: it guides developers to the right Figma node when links are ambiguous, adapts when components are unnamed, falls back to raw values when tokens are sparse, and — when the code uses the design system — checks that the right component variant is used rather than raw styles overriding the system.

what it changed

Design QA stopped being a human bottleneck and became part of the loop the code was written in: the same agent that builds a screen verifies it against the source of truth before a designer ever sees it. It also made the design system itself more valuable — every token and named component became something agents could enforce, not just reference.