Best Design Tools MCP Servers

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.

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.

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

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 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.

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.

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.

Icons8

Official Remote

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

Renders Mermaid diagrams in real-time with live preview capabilities, automatic browser refresh, and WebSocket-based updates, supporting SVG, PNG, and PDF formats with pan/zoom functionality and collaborative editing integration.

Enables AI agents to programmatically generate, edit, and view Excalidraw diagrams with real-time browser synchronization. It provides a suite of tools for adding shapes, text, and arrows to diagrams through natural language interactions.

Bridges Figma design files to code generation, enabling direct conversion of designs into HTML, CSS, and other assets with customizable output paths and file organization.

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.

Provides image generation across multiple AI providers (OpenAI DALL-E, Google Gemini, Replicate Flux) with unified parameter handling, automatic file saving, and provider-specific features like transparent backgrounds and seed control for flexible visual content creation.

Bridges Sketch design files with development workflows through dual-component architecture, enabling file parsing, component extraction, layer management, and real-time design element creation directly from natural language commands.

H

Heroicons

Remote

Exposes the Heroicons library for searching, listing, and generating usage examples of icons in React applications

Enables creation and manipulation of PowerPoint presentations with functions for adding slides, formatting content, reading metadata, and exporting to PDF using pptxgenjs and officegen libraries.

Recraft AI

Official

Integrates with Recraft's image generation API to create and edit raster and vector images, apply custom styles, manipulate backgrounds, upscale images, and perform vectorization with fine-grained control over artistic properties.

M

Modus Design System

Remote

Provides access to Trimble's Modus design system documentation, component specifications, design rules, and implementation guides for HTML/React projects through automated indexing and structured search capabilities.

Processes and optimizes 3D glTF/GLB models with analysis, validation, format conversion, compression, and geometry simplification tools for web, mobile, and game engine compatibility.