- Conduid
- Marketplace
- #design-to-code
MCP servers tagged design-to-code
60 live MCP servers tagged "design-to-code", ranked by trust score. Tags come from package metadata and repository topics, so this list covers servers across every category that work with design-to-code.
Penpot MCP
Penpot MCP server
Stitch Skills
Claude Code and Codex skills for Google Stitch — generate UI screens, manage design systems, export design tokens, slice components, and build Storybook from Stitch designs
Dembrandt
Extract any website’s design system into tokens in seconds: logo, colors, typography, borders & more. One command.
Ux Ui Agent Skills
Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.
awdr74100/figwright
aware code (reusing your components and tokens), or author frames, text, styles, variables, and whole screens back onto the canvas. 92 tools, any MCP client, no Dev Mode seat or p…
Figma MCP Console
Figma MCP server for AI coding assistants — real-time read/write via a Figma Desktop plugin. No API token, no rate limits.
Caret Desktop
Caret — a design canvas over your real code. Click a headline and retype it, pick a colour, drag an edge: every change lands in your source files. Free, open source, runs on your…
Open Claude Design
Claude Design in Claude Code, Codex, Cursor, and 20+ agents. Designs come from your real components, tokens, and states; approved revisions sync back.
Design To Unity
Design-to-Unity MCP for turning Lanhu, Figma, and PSD/Photoshop UI designs into structured handoff packets, assets, and Unity-ready UGUI prefabs.
Penpot MCP
AI-agent skill for creating, auditing, and maintaining Penpot design systems, prototypes, tokens, and design-to-code workflows via the official Penpot MCP Server.
Ds Base Ui
Playground repo for designers learning AI design system workflows: a small, real design system on Base UI and React, in Storybook and mirrored to Figma.
Tellfigma
The missing piece of the AI + Figma loop. Create and edit designs directly on the Figma canvas from Claude, Cursor, VS Code, or any MCP app. One command. No API key. No plugin. Ju…
Imugi
Give AI eyes to see your frontend. Design → pixel-perfect code with visual verification. MCP server for Claude Code & Cursor.
Figma Context
Model Context Protocol server for Figma integration with smart position info
Sketch MCP Server
A server for processing Sketch files and generating code using MCP tools (forked with stdio protocol fix).
Work With Design Systems
Inspect, build, or extend Figma design systems from Claude Code. Read-only audits with WCAG checks and component scoring, build mode with variable bindings and slots, optional Pha…
Chara
Chara Codes is an AI-powered development environment designed to streamline frontend development workflows.
Figma Rest MCP Server
Local MCP server for reading Figma design data through the Figma REST API.
Jsdesign MCP Server
MCP server that bridges Instant Design (js.design) plugin to Cursor/Claude for design-to-code
Pixso To Triplex Next MCP Server
MCP-сервер: выгрузка макета Pixso по URL и конвертация в компактный формат TDIR для генерации React-кода на дизайн-системе Triplex
Design To Ui
Figma 디자인을 네이티브 UI(Android Compose/XML, iOS SwiftUI/UIKit)로 변환하고, 실기기 캡처를 Figma 원본과 픽셀 대조해 오차를 보정하는 Claude Code 플러그인
Stitchkit
The ultimate Stitch toolkit for Claude Code — generate, sync, and export UI designs with Figma
Figma To Code MCP
Figma-to-Code converter powered by Model Context Protocol. Features: 11 AST transforms, dual output modes (Tailwind/Pure CSS), Puppeteer validation, shadcn/ui dashboard.
Figma To Code MCP
Figma-to-Code converter powered by Model Context Protocol. Features: 11 AST transforms, dual output modes (Tailwind/Pure CSS), Puppeteer validation, shadcn/ui dashboard.
Allcrew Figma Plugin
AllCrew Figma Workspace: local-first design tokens, code export, MCP, and agent-driven Figma workflows
Claude Skills
Agent Skills for Claude Code: Figma-to-code pipeline, git workflow, doc hygiene automation, and design-engineering tools, built from real use.
Gemini Stitch MCP
Unified MCP server for Gemini AI code generation and Google Stitch design — design-to-code pipelines for Claude Code
Prime Skills
Build pixel-perfect local pages from Figma with Prime components, skills, and MCP workflows.
Shadcn Brief
Public repo for MCP-native UI delivery and review across Codex, Claude Code, OpenCode, and OpenClaw.
Design Toolbox
MCP servers that turn Lanhu design specs, Tencent CoDesign prototypes, and Shimo i18n sheets into structured data your AI coding agent can actually consume. 把蓝湖设计稿、CoDesign 原型、石墨翻…
Figle
Turns a Figma selection into a structured Spec and hands it to the AI agent already running in your IDE. Tokens resolved to project tokens, component instances resolved to project…
AI Designer
Chrome extension — chat to redesign any page in real time, then ship the real code via MCP (Tesote ai-dev / developerz.ai). Bun + WXT + SolidJS + Vercel AI SDK + OpenRouter.
Starry Templates
Starry - AI design tool & design-to-code: prompt to UI, AI UI generator, Figma to React (JSX) and HTML export, MCP for Cursor/Claude/Codex. A Figma alternative with native .fig im…
Figloo
Chrome extension + local MCP server that lets coding agents like Claude Code and Codex read Figma designs through the web UI with view access: walk layers, inspect properties, tak…
Pixelwright
MCP server and Figma plugin that let AI agents (Claude Code, Cursor, Codex) read and edit the Figma file you have open, through the Plugin API: no token, no rate limits, any plan.…
Stitch Skills
Claude Code and Codex skills for Google Stitch — generate UI screens, manage design systems, export design tokens, slice components, and build Storybook from Stitch designs
Stitch Kit
Design superpowers for AI coding agents. 35 skills, 5 layers, 7 framework targets. Ideation, batch generation, design systems, iteration loops, and production conversion via Googl…
Buildev
Buildev — Open-source AI-native design-to-code platform. Visual canvas + IDE mode, multi-framework code export (React, Vue, Flutter, SwiftUI, etc.), concurrent AI agents, MCP serv…
Pixso Advanced MCP
Lightweight local MCP bridge for Pixso layouts, built for AI-assisted UI implementation.
Figma Rn
MCP server that turns Figma screens into React Native code, assets, and screenshots through one get_screen call.
GoogleADK Vth LiteLLM
A Figma design-to-code agent built on Google ADK and LiteLLM — extracts design tokens (text, colors, layout) from Figma via a custom MCP server and generates JSX-ready code. Suppo…
Figma Design Bridge
MCP server that lets an AI agent write real designs onto a Figma canvas
Figma Codex Bridge
Local-first, read-only Figma Desktop MCP bridge for Codex. Read the active selection without a Figma API token.
Design To Code Dev
Automate front-end development: a hands-on workshop using Figma, GitHub Copilot, and Azure AI to turn designs into code quickly and consistently.
Paper
Paper — independent third-party profile of a public API surface, by API Evangelist. Paper (paper.design) is a modern, agent-native design tool built on HTML and CSS web standards…
Awesome AI Design Workflows
Curated list of AI tools, standards, patterns, and research for product design teams - every link checked
Figma Taxonomy Gen
Generate event taxonomies from Figma designs. Configurable naming, Excel/CSV/JSON/Markdown exports, drift checks, and optional MCP/AI.
Figma Screen Blueprint
Claude/Codex-style skill for turning full-screen Figma links into validated implementation blueprints before writing code.
Figma MCP Link Bridge
Figma plugin that copies screen and node links for Claude Code, Codex, FrameLink MCP, Figma MCP, and design-to-code workflows.
Mastergo Codex
Community Codex marketplace for MasterGo design workflows