14 MCP-Server für UI/UX-Engineers

Da die Fähigkeiten von LLMs durch Anthropics Model Context Protocol (MCP) immer weiter wachsen, steht UI/UX-Engineers ein wachsendes Ökosystem spezialisierter Tools zur Verfügung, mit denen sie ihre Workflows deutlich verbessern können. Diese MCP-Server schließen die Lücke zwischen KI-Assistenten und den Design- und Entwicklungstools, die das Rückgrat moderner UI/UX-Arbeit bilden. Anthropic unterstützt MCP nativ. Auch die Unterstützung durch OpenAI und andere Unternehmen ist in Arbeit. Beliebte Frameworks wie LangChain unterstützen das Protokoll ebenfalls.

Ich stelle Ihnen 14 Open-Source-MCP-Server für UI/UX-Fachleute vor. Einige sind weiter entwickelt als andere. Da sie jedoch alle Open Source sind, kann jeder ihre Funktionalität erweitern, indem er einen Pull Request erstellt. Von nahtloser Figma-Integration über die Automatisierung von Vektorgrafiken mit Adobe-Illustrator-Skripten bis hin zur Browser-Automatisierung: Diese Tools stehen für die nächste Entwicklungsstufe KI-gestützten Designs und Developments.

Im UI/UX-Bereich zeichnet sich ein neuer, KI-zentrierter Workflow ab:

Bildbeschreibung anzeigen

Design-Tool-Integrationen

1. Cursor Talk to Figma MCP von Sonny Lazuardi (2,4 Tsd. ⭐ auf GitHub)

Diese leistungsstarke Integration implementiert das Model Context Protocol zwischen Cursor AI und Figma. Designer und Entwickler können damit Figma-Designs über natürliche Sprachbefehle lesen und bearbeiten. (Wahrscheinlich lässt sich die Integration auch mit anderen MCP-Clients als Cursor verwenden. Sie wurde jedoch speziell für Cursor entwickelt.)

Verfügbare Tools:

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

Konfigurationsanforderungen: Es sind keine API-Schlüssel erforderlich. Allerdings müssen das Figma-Plugin und Cursor installiert werden. (Für die Verwendung mit anderen MCP-Clients sind möglicherweise Anpassungen nötig.)

Dieser MCP-Server bietet eine beeindruckende Auswahl an Tools für die Arbeit mit Figma – von der Erstellung grundlegender Elemente bis hin zur Verwaltung komplexer Komponentensysteme. Die Integration verbindet Cursor AI über WebSocket mit dem Figma-Plugin und schafft so eine nahtlose Schnittstelle für KI-gestützte Designbearbeitung.

2. Framelink Figma MCP Server von GLips (4,4 Tsd. ⭐ auf GitHub)

Dieser Server verbindet Figma-Design-Dateien mit KI-gestützten Coding-Tools. Assistenten wie Cursor, Windsurf und Cline können so auf Figma-Designdaten zugreifen und diese verstehen.

Verfügbare Tools:

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

Konfigurationsanforderungen: Ein Figma-API-Zugriffstoken ist erforderlich. Es wird als Befehlszeilenargument oder Umgebungsvariable übergeben.

Diese Implementierung zeichnet sich dadurch aus, dass sie komplexe Figma-API-Antworten in KI-freundliche Formate umwandelt. Sie extrahiert wichtige Layoutinformationen, vereinfacht Styling-Daten, verarbeitet Bildreferenzen und strukturiert die Knoten-Hierarchie übersichtlich und LLM-lesbar.

Play Video: Creating a UI with Figma to Cursor MCP Server

3. Figma MCP Server with Chunking von archimedescrypto (1 ⭐ auf GitHub)

Dieser MCP-Server verarbeitet große Figma-Dateien besonders effizient. Dafür nutzt er fortschrittliche Speicherverwaltung mit Chunking und Paginierung.

Verfügbare Tools:

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

Konfigurationsanforderungen: Ein Figma-API-Zugriffstoken (FIGMA_ACCESS_TOKEN) ist erforderlich.

Diese Implementierung ist besonders für Enterprise-Nutzer mit großen Designsystemen, komplexen Illustrationen mit Tausenden von Vektorknoten und teamweiten Design-Repositories wertvoll, wenn Speicher- und LLM-Kontextgrenzen eine Rolle spielen. Da Gemini Kontextgrößen von mehreren Millionen Tokens unterstützt, dürfte dies jedoch zunehmend weniger problematisch sein.

4. MCP Figma to React Converter von studentofjs (4 ⭐ auf GitHub)

Dieser spezialisierte MCP-Server verbindet Design und Entwicklung, indem er Figma-Designs direkt in React-Komponenten umwandelt und so den UI/UX-Entwicklungsworkflow optimiert.

Verfügbare Tools:

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

Konfigurationsanforderungen: Ein Figma-API-Token aus den Figma-Kontoeinstellungen ist erforderlich.

Dieses Tool ist besonders nützlich für UI/UX-Engineers, die Designs in Code umwandeln, Komponentenbibliotheken pflegen oder Prototypen schneller erstellen möchten. Es fügt automatisch Barrierefreiheitsattribute hinzu und überträgt Figma-Stile in Tailwind-CSS-Klassen.

5. Framer Plugin MCP von Sheshiyer (7 ⭐ auf GitHub)

Dieser spezialisierte MCP-Server erleichtert die Entwicklung und Verwaltung von Framer-Plugins mit integrierten Web3-Funktionen. Er verbindet das Framer-Design-Ökosystem mit Web3-Komponenten wie Krypto-Wallets und Smart Contracts.

Verfügbare Tools:

Externe APIs: MCP SDK, Framer SDK, Web3-Technologien, Node.js-Ökosystem (fs-extra), TypeScript

Konfigurationsanforderungen: Für die grundlegende Nutzung sind keine externen API-Schlüssel erforderlich.

Mit diesem Server können Entwickler Framer-Plugins mit Blockchain-Funktionen erstellen, etwa Wallet-Connect-Integration, Smart-Contract-Interaktionen und NFT-Anzeigeelemente.

6. Illustrator MCP Server von Spencer Hubert (14 ⭐ auf GitHub)

Diese innovative Schnittstelle ermöglicht KI-Assistenten die Interaktion mit Adobe Illustrator – über JavaScript-Ausführung und visuelles Feedback.

Verfügbare Tools:

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

Konfigurationsanforderungen: macOS (aufgrund der AppleScript-Abhängigkeit) und Adobe Illustrator sind erforderlich.

Dieser Server eröffnet spannende Möglichkeiten für KI-gestütztes Design, darunter die automatisierte Erstellung von Vektorgrafiken, Design-Prototyping und die Generierung grafischer Elemente. Die bidirektionale Kommunikation ermöglicht einen leistungsstarken Design-Feedback-Loop: Ein Assistent kann Designkonzepte verstehen und direkt in Vektorgrafiken umsetzen.

7. MCP-Miro von evalstate (33 ⭐ auf GitHub)

Dieser vielseitige MCP-Server verbindet Claude Desktop und andere Clients mit der Miro-Plattform für die Zusammenarbeit am Whiteboard. So können KI-Assistenten mit Miro-Boards interagieren und visuelle Inhalte erstellen.

Verfügbare Tools:

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

Konfigurationsanforderungen: Ein Miro-OAuth-Token ist erforderlich (als Umgebungsvariable oder Befehlszeilenargument).

Dieser Server ermöglicht leistungsstarke Workflows für visuelles Brainstorming, die Erstellung von Diagrammen, die Organisation von Informationen und die Analyse von Boards. Der Autor merkt an, dass das Tool besonders nützlich ist, um „ein Foto von Haftnotizen zu machen und Claude zu bitten, ein entsprechendes MIRO-Board zu erstellen“.

8. Photoshop Python API MCP Server von loonghao (11 ⭐ auf GitHub)

Dieser MCP-Server verbindet Python-Anwendungen mit Adobe Photoshop. So lässt sich Photoshop programmgesteuert steuern, um Aufgaben zu automatisieren und es in Workflows einzubinden.

Externe APIs: Python, Poetry (Abhängigkeitsverwaltung), Nox (Testen und Erstellen), pytest, GitHub Actions

Konfigurationsanforderungen: Für die grundlegende Konfiguration sind keine bestimmten API-Schlüssel erforderlich.

Dieses Repository befindet sich offenbar noch in einer frühen Entwicklungsphase. Dennoch ist es ein wichtiger Ansatzpunkt für UI/UX-Engineers, die Photoshop-Vorgänge in automatisierte Workflows, Designsysteme oder benutzerdefinierte Tools integrieren möchten. Ich würde dieses Tool zwar noch nicht installieren, aber wenn Open-Source-Beiträge es weiter ausbauen, könnte es vieles verändern. Deshalb habe ich es in die Liste aufgenommen. Dafür müsste man sich lediglich etwas Zeit nehmen, um sich in die Photoshop API einzuarbeiten.

Bildbeschreibung anzeigen

Browser- und Test-Integrationen

9. Playwright MCP von Microsoft (7 Tsd. ⭐ auf GitHub)

Diese Erweiterung des Playwright-Frameworks zur Browser-Automatisierung ermöglicht KI-Agenten eine strukturierte und zuverlässige Interaktion mit Webbrowsern. Dies ist die offizielle Implementierung von Microsoft. Daneben gibt es jedoch auch viele inoffizielle Implementierungen, die Playwright mit MCP kombinieren.

Verfügbare Tools (Snapshot-Modus):

Verfügbare Tools (Vision-Modus):

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

Konfigurationsanforderungen: Es sind keine API-Schlüssel erforderlich. Es stehen jedoch verschiedene Konfigurationsoptionen für Browser und Modi zur Verfügung.

Dieses Tool ist für UI/UX-Engineers besonders wertvoll, wenn es um automatisierte Webtests, Datenextraktion, Formularautomatisierung und UI/UX-Recherche geht. Der Barrierefreiheit-fokussierte Ansatz und die deterministischen Interaktionen machen es ideal zum Testen barrierefreier Designs. Der Vision-Modus steht zudem für einen interessanten Wandel hin zu einem multimodalen Feedback-Loop.

10. MCP Selenium Server von Angie Jones (78 ⭐ auf GitHub)

Diese MCP-Implementierung ermöglicht die Browser-Automatisierung mit dem weitverbreiteten Selenium-WebDriver-Framework und verbindet so KI-Assistenten mit der Browser-Automatisierung.

Verfügbare Tools:

Externe APIs: Selenium WebDriver, MCP SDK, Node.js, Chrome-/Firefox-Browser

Konfigurationsanforderungen: Es sind keine API-Schlüssel erforderlich. Browserauswahl und -konfiguration sind jedoch notwendig.

Dieser Server eignet sich für automatisierte UI-Tests, Workflow-Automatisierung, browserübergreifende Kompatibilitätstests und Barrierefreiheitstests. Mit dem bewährten Selenium WebDriver-Framework bietet er eine solide Grundlage für die Browser-Automatisierung.

11. Vibe-Eyes von monteslu (22 ⭐ auf Github)

Dieser innovative MCP-Server dient LLMs bei Vibe-Coding-Sessions mit browserbasierten Spielen und Anwendungen als „Augen“ und löst damit das Problem des fehlenden visuellen Kontexts für KI-Assistenten. Ich fand diese Idee sehr kreativ und wollte sie deshalb in diese Liste aufnehmen.

Verfügbare Tools:

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

Konfigurationsanforderungen: Es sind keine bestimmten API-Schlüssel erforderlich, aber Server- und Client-Einstellungen lassen sich konfigurieren.

Vibe-Eyes verwendet eine Client-Server-Architektur: Ein Browser-Client erfasst Canvas-Inhalte und Debugging-Informationen und sendet sie an einen Node.js-Server. Dieser vektorisiert die Bilder und stellt sie LLMs über MCP zur Verfügung. So entsteht eine visuelle Feedbackschleife, die besonders beim Debugging von Spielen und interaktiven Browser-Anwendungen hilfreich ist.

Frameworks und Entwicklungstools

12. Storybook MCP Server von dannyhw (4 ⭐ auf Github)

Dieser MCP-Server verbindet LLMs mit Storybook, dem beliebten Framework für die Entwicklung von UI-Komponenten, und verschafft KI-Assistenten Zugriff auf Informationen zu Komponenten. Storybook selbst ist ebenfalls Open Source und kostenlos nutzbar.

Verfügbare Tools:

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

Konfigurationsanforderungen: Für die grundlegende Funktionalität sind keine API-Schlüssel erforderlich.

Obwohl sich dieser Server noch in einer frühen Entwicklungsphase befindet, bietet er viel Potenzial für KI-gestützte UI-Entwicklung, das Auffinden von Komponenten, Unterstützung bei der Dokumentation und Vorschläge für automatisierte Tests.

13. MCP Server Flutter von Anton Malofeev (18 ⭐ auf Github)

Dieser MCP-Server wurde speziell für die Interaktion mit Flutter-Anwendungen entwickelt und verbindet KI-Sprachmodelle mit der Entwicklung von Flutter-Apps.

Verfügbare Tools:

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

Konfigurationsanforderungen: Erforderlich ist ein gültiger Pfad zu einem Flutter-Repository.

Dieser Server ist praktisch für automatisierte Flutter-Entwicklungs-Workflows, KI-gestützte App-Entwicklung und die Integration von KI-Funktionen in Flutter-Anwendungen. Zwar bietet er nur ein Tool, doch die über dieses Tool zugänglichen Befehle sind zahlreich – create, pub, run und screenshot.

14. MCP-Toolbox von AI-ZeroLab (9 ⭐ auf Github)

Diese umfassende Sammlung von Tools erweitert die Möglichkeiten von LLMs über MCP und bietet UI/UX-Engineers zahlreiche Funktionen für externe Dienste und APIs.

Verfügbare Tools:

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

Konfigurationsanforderungen: Je nach Funktion sind verschiedene API-Schlüssel erforderlich: FIGMA_API_KEY, TAVILY_API_KEY, DUCKDUCKGO_API_KEY, BFL_API_KEY.

Dieses umfassende Toolkit bietet UI/UX-Engineers vielfältige Möglichkeiten – von der Figma-Integration über Bildgenerierung und Dateioperationen bis hin zu erweiterten Suchfunktionen. Eine vielseitige Ergänzung für jeden UI/UX-Workflow. (Daher auch der Name „Toolbox“.)

Vergleichende Analyse

Schwerpunkte, Technologien und Anwendungsfälle

Tool-Funktionen und Integration in das MCP-Ökosystem

Diese MCP-Server gemeinsam nutzen

Die eigentliche Stärke von MCP-Servern für UI/UX-Engineers zeigt sich, wenn sie in KI-Agenten-Workflows kombiniert werden. Hier sind einige (rein hypothetische) Szenarien, die zeigen, wie diese Tools zusammenarbeiten könnten:

Szenario 1: Durchgängige Design-to-Implementation-Pipeline

1. Beginnen Sie mit Cursor Talk to Figma, um die Struktur eines Designs zu erkunden und zu verstehen oder sogar bei der Erstellung eines Designs zu helfen

2. Verwenden Sie Figma to React Converter, um aus dem Design Komponentencode zu generieren

3. Testen Sie die Komponenten mit Playwright MCP oder MCP Selenium

4. Dokumentieren Sie die Komponenten mit Storybook MCP

5. Erstellen Sie mit MCP-Miro eine visuelle Präsentation für Stakeholder

Dieser Workflow würde den Prozess von der Designübergabe bis zur Implementierung erheblich beschleunigen – mit KI-Unterstützung bei jedem Schritt.

Szenario 2: Plattformübergreifendes Designsystem

1. Verwenden Sie Figma MCP with Chunking, um Komponenten des Designsystems aus großen Figma-Dateien zu extrahieren

2. Generieren Sie Webkomponenten mit Figma to React Converter

3. Erstellen Sie mobile Implementierungen mit MCP Server Flutter (vielleicht wäre der React Converter dann gar nicht nötig und die Flutter-App könnte auch im Web verwendet werden)

4. Testen Sie in verschiedenen Browsern mit Playwright MCP

5. Dokumentieren Sie alles mit den Markdown-Konvertierungstools von MCP-Toolbox

Dieser Ansatz würde plattformübergreifende Konsistenz gewährleisten und zugleich die Produktivität durch KI-Unterstützung maximieren.

Szenario 3: Erweiterte Erstellung visueller Assets

1. Generieren Sie erste Konzepte mit den Bildgenerierungsfunktionen von MCP-Toolbox

2. Verfeinern Sie Vektorgrafiken mit Illustrator MCP

3. Wenden Sie Fotoeffekte mit Photoshop Python API an (sofern die Entwicklung jemals abgeschlossen wird)

4. Integrieren Sie die Ergebnisse mit Framer Plugin MCP in Prototypen

5. Holen Sie sich während des Testens visuelles Feedback mit Vibe-Eyes

Dieser Workflow würde die nahtlose Erstellung und Verfeinerung visueller Assets in mehreren Kreativtools ermöglichen.

Warum MCP-Server für UI/UX-Engineering nutzen?

Die Integration von MCP-Servern in UI/UX-Workflows bietet mehrere überzeugende Vorteile:

1. Design und Entwicklung verbinden: Diese Tools beseitigen die traditionellen Reibungsverluste zwischen Design und Code und ermöglichen nahtlose Übergänge zwischen kreativen und technischen Phasen.

2. Wiederkehrende Aufgaben automatisieren: Indem MCP-Server Design- und Entwicklungstools programmgesteuert steuern, ersparen sie Engineers mühsame manuelle Arbeit wie die Design-to-Code-Konvertierung und browserübergreifende Tests.

3. Zusammenarbeit verbessern: Diese Tools schaffen eine gemeinsame Sprache für Designer, Entwickler und KI-Assistenten und fördern so bessere Kommunikation und ein gemeinsames Verständnis.

4. Barrierefreiheit verbessern: Viele dieser Server (etwa Playwright MCP) unterstützen Barrierefreiheit bereits integriert. So lassen sich Anwendungen standardmäßig inklusiver gestalten. Wenn Barrierefreiheit Teil des optimalen Debugging-Zyklus wird, lässt sie sich zwangsläufig besser umsetzen.

5. Workflows beschleunigen: Indem diese MCP-Server KI-Assistenten direkten Zugriff auf die täglich genutzten Tools von UI/UX-Engineers geben, können sie Entwicklungszeiten verkürzen.

Der neue UI/UX-Engineering-Workflow

Die in diesem Artikel vorgestellten 14 MCP-Server stehen für eine bedeutende Weiterentwicklung der Zusammenarbeit zwischen UI/UX-Engineers und KI-Assistenten. Indem sie Claude und anderen LLMs direkten Zugriff auf Tools wie Figma, Illustrator, Browser und Entwicklungs-Frameworks ermöglichen, machen diese Server aus der KI eine aktive Teilnehmerin am Design- und Entwicklungsprozess statt einer passiven Beraterin.

Mit dem Wachstum des MCP-Ökosystems können wir noch tiefere Integrationen und ausgefeiltere Workflows erwarten. UI/UX-Engineers, die diese Tools schon heute nutzen, sind gut aufgestellt, um die nächste Generation KI-gestützter Design- und Entwicklungspraktiken anzuführen. Für UI/UX-Engineers, die in die Einrichtung dieser Integrationen investieren, lohnt sich das: schnellere Workflows, weniger technische Schulden, bessere Zusammenarbeit und mehr Zeit für kreative Problemlösungen – eine besondere Stärke von Menschen.

Ob Ihr Schwerpunkt auf Design, Entwicklung, Tests oder dem gesamten Produktlebenszyklus liegt – es gibt einen MCP-Server (oder eine Kombination mehrerer Server), der Ihren Workflow verbessern und neue kreative Möglichkeiten eröffnen kann. Die Zukunft des UI/UX-Engineerings ist kollaborativ, automatisiert und KI-gestützt – und MCP-Server bilden die Brücke dorthin.

Schützen Sie Ihre KI-generierten Apps mit Snyk

Ganz gleich, ob Sie einen Flutter-, React- oder React Native-MCP-Server verwenden, um Ihre Designs in funktionsfähigen Code umzuwandeln: Sie sollten diesen Code mit den besten verfügbaren Tools auf Sicherheitsprobleme prüfen. Scannen Sie Ihren Code direkt in Ihrer IDE mit Snyk.

Wenn Sie im Unternehmen auf die erstklassigen Tools von Snyk zugreifen möchten – ohne dieselben Nutzungslimits wie in der kostenlosen Version –, können Sie für Ihr Open-Source-Projekt kostenlosen Enterprise-Zugang beantragen. Dieses Angebot ist Teil unseres Projekts Secure Developer.