Design System Control Center
Source
Connect a real Figma file
Enter your Figma personal access token and file key. The token is sent only to this Vercel API request and is not stored by the app.
Need the file key? Open a Figma file and copy the part after `/file/` or `/design/` in the URL.
Library
Published components, local component sets, and AI-discovered component-like frames from the connected file.
No component selected
AI discovery will explain why a node was surfaced after connection.
Design tokens
Build
Generate implementation scaffolds from the selected component and compare the output to the Figma export.
Connect a Figma file, select a component, then generate code.
Selected Figma component
Generated UI simulation
Review
Score implementation code against the connected Figma component, token scale, props, and accessibility signals.
Issues
How scoring works
Token fidelityFlags raw hex/RGB colors and token variables that do not exist in the connected Figma file.
Scale matchChecks pixel values against Figma variable values for spacing, radius, and type scale.
Component contractChecks whether Figma component props and node traceability are represented in the code.
AccessibilityLooks for native semantic elements, ARIA attributes, or role metadata.
Responsive behaviorLooks for width constraints, flex/grid, or media-query signals.
Penalty modelError -25, warning -12, info -4. Scores 90+ are merge-ready, 70-89 need cleanup, below 70 needs redesign.
Agent setup
Use this config to connect Claude Code, Codex, or another MCP-capable agent to the long-running MCP runtime for the same Figma file.
Step-by-step usage
- Connect a live file: add your Figma token and file key in Source. Expect component counts, token counts, and AI discovery counts to populate.
- Pick a component: open Library and select a component. Expect a Figma export preview, metadata, props, and the reason it was discovered.
- Generate code: open Build, choose framework and team package. Expect tokenized React/Vue/Svelte scaffold code plus a visual generated simulation.
- Validate code: send generated code to Review or paste your implementation. Expect a score, penalties, and issue-level details.
- Use with an agent: copy the config below into Claude Code/Codex MCP settings, then ask the agent to read tokens and component resources before coding.
What to expect from the agent
- It should use Figma tokens instead of raw hex values and arbitrary spacing.
- It should reference the selected component’s props, layout hints, and accessibility metadata.
- It should call validation after generating code and fix drift before handing work back.
- If a component is not published in Figma, AI discovery can still surface likely reusable frames from design-system pages.