14 MCP Servers for UI/UX Engineers

As LLMs' capabilities continue to expand through Anthropic’s Model Context Protocol (MCP), UI/UX engineers have access to a growing ecosystem of specialized tools that can significantly enhance their workflows. These MCP servers bridge the gap between AI assistants and the design/development tools that form the backbone of modern UI/UX work. Anthropic has native support for MCP, and support from OpenAI and other companies is coming. Popular frameworks like LangChain also support the protocol for developers. 

I'll explore 14 open-source MCP servers for UI/UX professionals. Some are farther along in their development than others, but because all of them are open source, anyone can expand their functionality by opening a pull request. From seamless Figma integration to vector graphics automation with Adobe Illustrator scripting to browser automation, these tools represent the next evolution in AI-assisted design and development.

We can begin to see a new AI-forward workflow in the UI/UX domain:

Ver descrição da imagem

Design Tool Integrations

1. Cursor Talk to Figma MCP by Sonny Lazuardi (2.4k ⭐ on Github)

This powerful integration implements Model Context Protocol between Cursor AI and Figma, enabling designers and developers to read and modify Figma designs through natural language commands. (It can most likely be made to work with MCP clients that are not Cursor, but it has been designed with Cursor in mind.)

Available Tools:

External APIs: Figma Plugin API, WebSocket, Bun, TypeScript, Zod

Configuration Requirements: No explicit API keys are needed, but they require Figma plugin installation and Cursor installation (or otherwise, some tweaks may be involved in getting it to work with other MCP clients).

This MCP server provides an impressive array of tools for interacting with Figma, enabling everything from creating essential elements to managing complex component systems. The integration works through a WebSocket connection between Cursor AI and the Figma plugin, creating a seamless bridge for AI-powered design manipulation.

2. Framelink Figma MCP Server by GLips (4.4k ⭐ on Github)

Designed to bridge Figma design files with AI-powered coding tools, this server enables assistants like Cursor, Windsurf, and Cline to access and understand Figma design data.

Available Tools:

External APIs: Figma REST API, MCP SDK, Express.js, Zod, Remeda

Configuration Requirements: A Figma API access token is required, provided via command line argument or environment variable.

What sets this implementation apart is its simplification of complex Figma API responses into AI-friendly formats. It extracts essential layout information, simplifies styling data, handles image references, and organizes the node hierarchy in a clean, LLM-parsable structure.

Play Video

3. Figma MCP Server with Chunking by archimedescrypto (1 ⭐ on GitHub)

This MCP server specializes in handling large Figma files efficiently through advanced memory management capabilities, including chunking and pagination.

Available Tools:

External APIs: Figma API, MCP, Node.js, TypeScript, Axios, Docker

Configuration Requirements: A Figma API access token is required (FIGMA_ACCESS_TOKEN).

This implementation is particularly valuable for enterprise users with large design systems, complex illustrations with thousands of vector nodes, and team-wide design repositories under memory and LLM context constraints. However, with Gemini supporting context sizes in the millions, this may be less and less of a problem. 

4. MCP Figma to React Converter by studentofjs (4 ⭐ on GitHub)

This specialized MCP server bridges design and development by converting Figma designs directly into React components, streamlining the UI/UX development workflow.

Available Tools:

External APIs: Figma API, React, Tailwind CSS, TypeScript, Express.js, Zod, Axios, Prettier

Configuration Requirements: A Figma API Token from the Figma account settings page is required.

This tool is particularly valuable for UI/UX engineers who need to convert design to code, maintain component libraries, or accelerate prototyping. It automatically adds accessibility attributes and converts Figma styles to Tailwind CSS classes.

5. Framer Plugin MCP by Sheshiyer (7 ⭐ on Github)

This specialized MCP server facilitates the creation and management of Framer plugins with integrated web3 capabilities, bridging Framer's design ecosystem and web3 components like crypto wallets and smart contracts.

Available Tools:

External APIs: MCP SDK, Framer SDK, Web3 technologies, Node.js ecosystem (fs-extra), TypeScript

Configuration Requirements: No external API keys are required for basic operation.

This server enables developers to build Framer plugins incorporating blockchain features like Wallet Connect integration, smart contract interaction, and NFT display components.

6. Illustrator MCP Server by Spencer Hubert (14 ⭐ on Github)

This innovative bridge enables AI assistants to interact with Adobe Illustrator through JavaScript execution and visual feedback.

Available Tools:

External APIs: Python, MCP, AppleScript, Adobe Illustrator JavaScript API, httpx, Pillow

Configuration Requirements: Requires macOS (due to AppleScript dependency) and Adobe Illustrator.

This server opens exciting possibilities for AI-driven design, including automated vector creation, design prototyping, and graphic element generation. The bidirectional communication enables a potentially powerful design feedback loop with an assistant who can understand design concepts and translate them directly into vector graphics. 

7. MCP-Miro by evalstate (33 ⭐ on Github)

This comprehensive MCP server connects Claude Desktop (and other clients) to the Miro whiteboard collaboration platform, enabling AI assistants to interact with Miro boards and create visual content.

Available Tools:

External APIs: Miro REST API, Node.js, TypeScript, MCP

Configuration Requirements: Requires a Miro OAuth Token (via an environment variable or command-line argument).

This server enables powerful workflows like visual brainstorming, diagram creation, information organization, and board analysis. The author notes that it is particularly useful for "taking a photo of stickies and asking Claude to create a MIRO equivalent."

8. Photoshop Python API MCP Server by loonghao (11 ⭐ on Github)

This MCP server provides a bridge between Python applications and Adobe Photoshop, allowing programmatic control for automating tasks and integrating Photoshop into workflows.

External APIs: Python, Poetry (dependency management), Nox (testing/building), pytest, GitHub Actions

Configuration Requirements: No specific API keys are required for basic configuration.

While this repository appears to be in an early stage of development, it represents an important seed for UI/UX engineers who need to integrate Photoshop operations into automated workflows, design systems, or custom tools. I wouldn’t install this one just yet, but if open-source contributions flesh it out, it could be a game changer, so I decided to keep this one on the list. All it would take is some time delving into the Photoshop API.

Ver descrição da imagem

Browser and Testing Integration

9. Playwright MCP by Microsoft (7k ⭐ on Github)

This extension to the Playwright browser automation framework enables AI agents to interact with web browsers in a structured, reliable way. This one is the official implementation from Microsoft, but many unofficial implementations centered around Playwright with MCP also exist. 

Available Tools (Snapshot Mode):

Available Tools (Vision Mode):

External APIs: Playwright, MCP, Node.js, Zod, TypeScript

Configuration Requirements: No API keys are required, but offers various configuration options for browsers and modes.

This tool is particularly valuable for UI/UX engineers for automated web testing, data extraction, form automation, and UI/UX research. Its accessibility-first approach and deterministic interactions make it ideal for testing accessible designs. The vision mode also represents an interesting shift towards a multimodal feedback loop. 

10. MCP Selenium Server by Angie Jones (78 ⭐ on Github)

This MCP implementation enables browser automation through the widely-used Selenium WebDriver framework, bridging AI assistants and browser automation.

Available Tools:

External APIs: Selenium WebDriver, MCP SDK, Node.js, Chrome/Firefox browsers

Configuration Requirements: No API keys are required, but it needs browser selection and configuration.

This server is valuable for automated UI testing, workflow automation, cross-browser compatibility testing, and accessibility testing. It provides a strong foundation for browser automation through the well-established Selenium WebDriver framework.

11. Vibe-Eyes by monteslu (22 ⭐ on Github)

This innovative MCP server acts as the "eyes" for LLMs during vibe coding sessions with browser-based games and applications, solving the problem of visual context for AI assistants. I thought this one was really creative, so I wanted to include it in this list. 

Available Tools:

External APIs: @neplex/vectorizer, Socket.IO, Express, SVGO, MCP SDK, Zod

Configuration Requirements: No specific API keys are required, but has configurable server and client settings.

Vibe-Eyes uses a client-server architecture where a browser client captures canvas content and debug information, sends it to a Node.js server, which then vectorizes the images and makes them available to LLMs through MCP. This creates a visual feedback loop that's particularly valuable for debugging games and interactive applications in the browser.

Framework and Development Tools

12. Storybook MCP Server by dannyhw (4 ⭐ on Github)

This MCP server bridges LLMs and Storybook, the popular UI component development framework, providing AI assistants with access to component information. Storybook itself is also open source and free to use.

Available Tools:

External APIs: MCP SDK, Storybook, Bun, TypeScript, Zod

Configuration Requirements: No API keys are required for basic functionality.

While currently in early development, this server shows significant potential for AI-assisted UI development, component discovery, documentation assistance, and automated testing suggestions.

13. MCP Server Flutter by Anton Malofeev (18 ⭐ on Github)

This MCP server is specifically designed to interact with Flutter applications, bridging AI language models and Flutter app development.

Available Tools:

External APIs: MCP SDK, Flutter, TypeScript, Node.js, Zod

Configuration Requirements: A valid path to a Flutter repository is required.

This server is handy for automated Flutter development workflows, AI-assisted app development, and integration of AI capabilities into Flutter applications. Though it only provides one tool, the commands accessible to that tool are numerous – create, pub, run, and screenshot.

14. MCP-Toolbox by AI-ZeroLab (9 ⭐ on Github)

This comprehensive collection of tools extends LLM capabilities through MCP, providing UI/UX engineers with a wide range of functions for external services and APIs.

Available Tools:

External APIs: Figma API, Whisper by OpenAI, Tavily API, DuckDuckGo Search API, Flux API, XiaoyuZhouFM API, FastEmbed, NumPy, httpx, Pydantic

Configuration Requirements: Various API keys depending on functionality: FIGMA_API_KEY, TAVILY_API_KEY, DUCKDUCKGO_API_KEY, BFL_API_KEY.

This comprehensive toolkit provides UI/UX engineers with various capabilities, from Figma integration to image generation, file operations, and advanced search. It's a versatile addition to any UI/UX workflow. (Hence the name ‘toolbox’.)

Comparative Analysis

Primary Focus, Technologies, and Use Cases

Tool Capabilities and MCP Ecosystem Integration

Using These MCP Servers Together

The real power of MCP servers for UI/UX engineers comes from combining them in AI agent workflows. Here are some (completely hypothetical) scenarios showing how these tools could work together:

Scenario 1: Full-Stack Design-to-Implementation Pipeline

1. Start with Cursor Talk to Figma to explore and understand a design's structure or even to help with creating a design

2. Use Figma to React Converter to generate component code from the design

3. Test the components with Playwright MCP or MCP Selenium

4. Document the components with Storybook MCP

5. Create a visual presentation for stakeholders with MCP-Miro

This workflow would dramatically streamline the process from design handoff to implementation, with AI assistance at every step.

Scenario 2: Cross-Platform Design System

1. Use Figma MCP with Chunking to extract design system components from large Figma files

2. Generate web components with Figma to React Converter

3. Create mobile implementations with MCP Server Flutter (perhaps then one would not even need the React Converter, and could just use the Flutter app on the web as well)

4. Test across browsers with Playwright MCP

5. Document everything with MCP-Toolbox's Markdown conversion tools

This approach would ensure consistency across platforms while maximizing productivity through AI assistance.

Scenario 3: Advanced Visual Asset Creation

1. Generate initial concepts with MCP-Toolbox's image generation capabilities

2. Refine vector graphics with Illustrator MCP

3. Apply photo effects with Photoshop Python API (if development on it is ever finished)

4. Integrate into prototypes with Framer Plugin MCP

5. Get visual feedback during testing with Vibe-Eyes

This workflow would enable seamless creation and refinement of visual assets across multiple creative tools.

Why Use MCP Servers for UI/UX Engineering?

The integration of MCP servers into UI/UX workflows offers several compelling advantages:

1. Bridging Design and Development: These tools eliminate the traditional friction between design and code, enabling seamless transitions between creative and technical phases.

2. Automating Repetitive Tasks: By programmatically controlling design and development tools, MCP servers free engineers from tedious manual work like design-to-code conversion and cross-browser testing.

3. Enhanced Collaboration: These tools create a common language between designers, developers, and AI assistants, facilitating better communication and shared understanding.

4. Accessibility Improvements: Many of these servers (like Playwright MCP) have built-in support for accessibility, ensuring that applications are built to be more inclusive by default. When accessibility becomes part of your optimal debugging loop, it is bound to be better implemented.

5. Workflow Acceleration: By providing AI assistants with direct access to the tools UI/UX engineers use daily, these MCP servers might help to compress development timelines.

The New UI/UX Engineering Workflow

The 14 MCP servers described in this article represent a significant evolution in how UI/UX engineers can work with AI assistants. By providing Claude and other LLMs with direct access to tools like Figma, Illustrator, browsers, and development frameworks, these servers transform AI from a passive advisor to an active participant in the design and development process.

As the MCP ecosystem grows, we can expect even deeper integrations and more sophisticated workflows. UI/UX engineers who embrace these tools today will be well-positioned to lead the next generation of AI-assisted design and development practices. The rewards for UI/UX engineers willing to invest in setting up these integrations are substantial: accelerated workflows, reduced technical debt, enhanced collaboration, and more time for the creative problem-solving that humans do best.

Whether you're focused on design, development, testing, or the entire product lifecycle, there's an MCP server (or combination of servers) that can enhance your workflow and unlock new creative possibilities. The future of UI/UX engineering is collaborative, automated, and powered by AI — and MCP servers are the bridge to that future.

Secure Your AI-Generated Apps with Snyk

Whether you’re using a Flutter, React, or React Native MCP server to convert your designs into functional code, you’ll want to check the security of that code using the best tools available. You can scan your code with Snyk right in your IDE. 

If you want enterprise access to Snyk’s top-of-the-line tools – an experience without the same rate limits as the free tier – you can apply to gain enterprise access for your open-source project free of cost. This offering comes from our Secure Developer project.