Figma to Code

R

ReactBits

Remote

Provides access to 135+ animated React components from ReactBits.dev with intelligent caching, quality scoring, and dependency detection for building modern UI applications with animations, backgrounds, text effects, and interactive elements.

GitHub

Official Remote

Extend your developer tools with the GitHub MCP Server—a powerful Model Context Protocol server enhancing automation and AI interactions with GitHub APIs. It supports diverse functionalities like managing workflows, issues, pull requests, repositories, and security alerts. Customize available toolsets to fit your needs, enable dynamic tool discovery to streamline tool usage, and run the server locally or remotely. With read-only mode and support for GitHub Enterprise, this server integrates deeply into your GitHub ecosystem, empowering data extraction and intelligent operations for developers and AI applications. Licensed under MIT, it fosters flexible and advanced GitHub automation.

Desktop Commander

Official

Desktop Commander MCP transforms Claude Desktop into a powerful AI assistant for managing files, running terminal commands, and editing code with precision across your entire system. It supports in-memory code execution, interactive process control, advanced search and replace, plus comprehensive filesystem operations including reading from URLs and negative offset file reads. With detailed audit and fuzzy search logging, it enables efficient automation, data analysis, and multi-project workflows—all without extra API costs. Designed for developers seeking smarter automation, it enhances productivity by integrating all essential development tools into a single, intelligent chat interface.

Control browsers to perform sophisticated web interactions and visual tasks.

Docfork

Official Remote

Retrieves up-to-date documentation and code examples for any software library through the Docfork API, automatically selecting relevant libraries and providing topic-focused documentation with configurable response size limits.

Chrome DevTools

Official

Provides direct Chrome browser control through DevTools for web automation, debugging, and performance analysis using accessibility tree snapshots for reliable element targeting, automatic page event handling, and integrated performance tracing with actionable insights.

Install and configure additional MCP servers dynamically.

Bridges OpenAI's Codex CLI with structured command execution, brainstorming sessions, and chunked response delivery for code analysis, automated refactoring, and development workflow automation.

Enables AI-driven CAD modeling by providing a remote procedure call (RPC) server that allows programmatic control of FreeCAD, supporting operations like creating documents, inserting parts, editing objects, and executing Python code for generative design workflows.

Integrates with n8n workflow automation platform to provide conversational access to 525+ nodes including AI-capable nodes and triggers, enabling natural language workflow creation, validation, and management without requiring direct platform knowledge.

R

ReactBits

Remote

Provides access to 135+ animated React components from ReactBits.dev with intelligent caching, quality scoring, and dependency detection for building modern UI applications with animations, backgrounds, text effects, and interactive elements.

Enables AI-driven CAD modeling by providing a remote procedure call (RPC) server that allows programmatic control of FreeCAD, supporting operations like creating documents, inserting parts, editing objects, and executing Python code for generative design workflows.

Figma

Official Remote

Bring Figma designs to life with AI-driven code generation and seamless design-to-code workflows. The Figma MCP server helps developers and product teams turn Figma frames into code, extract key design context like variables and components, and maintain consistency with existing codebases. Features like Code Connect, design system rule creation, and support for popular editors make it easy to generate high-quality code matched to your team's standards. Empower your agents to translate, extend, and reuse designs efficiently while ensuring fidelity to your design system.

Magic UI

Official Remote

Provides structured access to Magic UI's component library for generating accurate code suggestions with proper installation instructions for implementing visually appealing UI elements in web applications.

Magic

Official

Create stunning UI components instantly with Magic AI Agent using natural language commands. This powerful tool supports popular IDEs like Cursor, Windsurf, and VSCode, generating modern, customizable React components inspired by 21st.dev’s library. Enjoy real-time previews, full TypeScript support, and access to professional brand assets via SVGL. Magic AI Agent seamlessly integrates generated components into your project, respecting your code style, and handles designs from simple buttons to complex interactive forms. Stay up to date with new community-published components and enhance your UI development workflow effortlessly.

S

Shadcn UI

Remote

Provides tools for managing and installing shadcn/ui components directly through assistants, enabling efficient component discovery, documentation retrieval, and installation command generation with multiple package manager support.

Unlock seamless design-to-code with Framelink Figma MCP Server, letting AI coding tools access your Figma files directly. It simplifies Figma API data to supply only relevant design layouts and styles, boosting AI accuracy in implementing designs across frameworks. Specifically built for use with tools like Cursor, it transforms design metadata into precise code in one step. This server streamlines the workflow by providing clean, focused context, enabling faster and more reliable design-driven development. Enjoy a powerful bridge between design and coding that enhances productivity and code quality with minimal fuss.

S

shadcn/ui

Remote

Provides direct access to shadcn/ui v4 components, blocks, and demos through GitHub API integration with automatic framework detection for React, Svelte, and Vue, enabling rapid UI development with component source code, installation scripts, and complete block implementations.

Icons8

Official Remote

Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects

MasterGo Design

Official

Extracts design file metadata from MasterGo files using a personal access token, enabling direct retrieval of design element details for analysis and code generation.

Figma

Official Remote

Bring Figma designs to life with AI-driven code generation and seamless design-to-code workflows. The Figma MCP server helps developers and product teams turn Figma frames into code, extract key design context like variables and components, and maintain consistency with existing codebases. Features like Code Connect, design system rule creation, and support for popular editors make it easy to generate high-quality code matched to your team's standards. Empower your agents to translate, extend, and reuse designs efficiently while ensuring fidelity to your design system.

Unlock seamless design-to-code with Framelink Figma MCP Server, letting AI coding tools access your Figma files directly. It simplifies Figma API data to supply only relevant design layouts and styles, boosting AI accuracy in implementing designs across frameworks. Specifically built for use with tools like Cursor, it transforms design metadata into precise code in one step. This server streamlines the workflow by providing clean, focused context, enabling faster and more reliable design-driven development. Enjoy a powerful bridge between design and coding that enhances productivity and code quality with minimal fuss.

Interact with Figma design files through the Figma REST API for design analysis, feedback, and collaboration.

Integrates with Figma's design API to extract images, styles, SVG data, and design elements from Figma files for automated design asset extraction and development workflows.

Integrates with Figma's API to enable viewing, manipulating, and collaborating on design files through comprehensive access to file operations, comments, components, and team resources.

Automates Figma design-to-code workflows by extracting design data, downloading SVG assets, analyzing color variables, and generating API models with design token conversion for CSS frameworks like UnoCSS and TailwindCSS.

Extracts and analyzes components from Figma design files, enabling seamless integration between Figma designs and React Native development through component hierarchy processing and metadata generation.