The design-to-code gap is where quality goes to die. This project closes the loop: tokens flow from Figma to Tailwind config, components are scaffolded via Code Connect and Cursor, and every interactive element ships with a stable test contract.
The design-to-code handoff is where quality degrades at every step. Designers export assets. Engineers interpret them. Tokens drift between the Figma file, the codebase, and a Notion doc — and none of them agree. Accessibility gets noted in a comment and retrofitted after the fact, if at all. Tests use CSS class names that change on the next refactor.
This isn't a process failure — it's an architecture failure. The typical handoff has no single source of truth for tokens, no machine-readable contract between the design component and the React component, and no test layer aware of what the component is supposed to do. Each abstraction layer introduces a new version of the truth.
Three connected systems had to close the loop simultaneously.
Token pipeline — Style Dictionary pulls primitives from Figma and generates Tailwind config. One canonical value for each color, spacing step, and font size, living in exactly one place.
Component contract — Figma Code Connect maps each design component to its React counterpart. Cursor uses the Figma Dev Mode MCP server as live context — pulling the spec, not interpreting a screenshot.
Agent integration — every interactive element gets a stable data-agent-id, a manifest entry defining its expected success event, and an ARIA live region announcement. Playwright reads the manifest at runtime. No hardcoded selectors.
The framing: design tokens are not a styling concern. They are the shared language between design and engineering. Everything else flows from treating them that way.