Design-to-code MCP servers for Figma and UI work
MCP servers that pass Figma frames, design tokens, and component specs to coding agents, so generated UI code matches the design file.
What to know about Design to code MCP servers
Design-to-code servers give a coding agent structured access to design files. Instead of guessing from a screenshot, the agent reads frame dimensions, auto-layout rules, colours, typography, and component names straight from Figma or a similar tool, then writes markup that follows them.
Figma's official Dev Mode server and several community servers lead this topic. They differ in how much they send: some return a compact description of the selected frame, others export the full node tree or rendered images. Compact output fits more design into context; image export helps with illustrations and complex visual details.
Results improve when the design system and the codebase agree. If Figma components map to real components in your repository and tokens share names, the agent can reuse existing code rather than generating new styles for every screen.
Design to code MCP servers
The 12 strongest of 858 matching servers. Servers that name the topic directly come first, then by trust score.
- 77Trust score 77 of 100, Good
Roast My Design System
by gregkozakiewicz · JavaScript
Audit your Design System and serve your Agent the rules that keep AI-written UI on-system.
RegistryLicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: Not graded. No README or tool list has been captured yet.Maintenance: A. Last commit or release 22 days ago. - 71Trust score 71 of 100, Good
mcp-design-system-extractor
by freema · TypeScript
MCP server for Storybook design systems — extract component HTML, styles and metadata.
RegistryLicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: Not graded. No README or tool list has been captured yet.Maintenance: A. Last commit or release 13 days ago. - 69Trust score 69 of 100, Good
Proxy MCP for Playwright, Figma, DevTools, Shopify Dev, Context7 — fewer tokens, caching
RegistryLicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: Not graded. No README or tool list has been captured yet.Maintenance: A. Last commit or release 8 days ago. - 67Trust score 67 of 100, Good
monomem
by calasdan-sketch · TypeScript
Local shared memory for AI coding agents: SQLite notes with writer provenance, undo, search.
RegistryLicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: Not graded. No README or tool list has been captured yet.Maintenance: A. Last commit or release 5 days ago. - 67Trust score 67 of 100, Good
figjam-mcp
by ecestnrkl · TypeScript
Query FigJam board context, source-cited answers and snapshot changes through five local MCP tools.
RegistryLicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: A. 90/100 for listing completeness. Lost points: short summary, no docs link.Maintenance: A. Last commit or release yesterday. - 66Trust score 66 of 100, Good
Figma CodeKit MCP
by mehmoodqureshi · JavaScript
Figma to pixel-verified code: HTML/React/Tailwind + tokens, then a render + pixel-diff verify loop.
RegistryLicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: Not graded. No README or tool list has been captured yet.Maintenance: A. Last commit or release 23 days ago. - 55Trust score 55 of 100, Fair
figma-mcp-bridge
by kolganovr · JavaScript
Write to a live Figma canvas, get a screenshot back, and roll back mistakes. Zero deps, free plan.
RegistryDeprecatedLicenseQualityMaintenanceLicense: A. MIT is a permissive open source license.Quality: A. 95/100 for listing completeness. Lost points: short summary.Maintenance: F. The listing is marked deprecated. 
55Trust score 55 of 100, FairCompares a mobile app screen (Android or iOS Simulator) with its Figma design and suggests fixes.
RegistryLicenseQualityMaintenanceLicense: Not graded. No license is recorded for this server.Quality: Not graded. No README or tool list has been captured yet.Maintenance: Not graded. No commit or release date has been recorded.- 55Trust score 55 of 100, Fair
MCP server that reads local Figma .fig files, fully offline
RegistryLicenseQualityMaintenanceLicense: Not graded. No license is recorded for this server.Quality: Not graded. No README or tool list has been captured yet.Maintenance: Not graded. No commit or release date has been recorded. - 55Trust score 55 of 100, Fair
Compliance-filtered crypto exchange fee comparison and rebate-link routing for AI agents.
RegistryRemoteLicenseQualityMaintenanceLicense: Not graded. No license is recorded for this server.Quality: Not graded. No README or tool list has been captured yet.Maintenance: Not graded. No commit or release date has been recorded. - 55Trust score 55 of 100, Fair
Figma REST API client: files, nodes, images, styles, components, projects and comments.
RegistryLicenseQualityMaintenanceLicense: Not graded. No license is recorded for this server.Quality: Not graded. No README or tool list has been captured yet.Maintenance: Not graded. No commit or release date has been recorded. - 55Trust score 55 of 100, Fair
Claude in your Figma file. Builds with your components, checks what it wrote. Runs on your computer.
RegistryLicenseQualityMaintenanceLicense: Not graded. No license is recorded for this server.Quality: Not graded. No README or tool list has been captured yet.Maintenance: Not graded. No commit or release date has been recorded.
How to install one
- Compare the shortlist. Roast My Design System leads this topic. Open two or three listings and compare their tools, transport, and required API keys.
- Copy the config for your client. Each listing has an install guide, for example Claude Desktop, Claude Code, Cursor, or VS Code. The client guides show where each config file lives.
- Scope credentials, then restart. Use the narrowest token or folder the server needs, restart the client, and check that the new tools appear.
Design to code MCP questions
Does Figma have an official MCP server?
Yes. Figma's Dev Mode MCP server gives agents access to selected frames, variables, and components. The Figma use case compares it with community alternatives.
How close is the generated code to the design?
Layout and spacing usually land close when the design uses auto-layout. Expect to adjust responsive behaviour and interaction states, which design files rarely describe fully.
Can MCP servers sync design tokens into code?
Some servers read Figma variables and output CSS variables or a token file. That works best when names already match your code's theme structure.