Die besten Design-MCP-Server für Claude Code und Cursor

Ein Design-MCP-Server ermöglicht es einem KI-Coding-Agenten, Designs zu lesen, UI-Referenzen zu suchen oder Screens über das Model Context Protocol zu generieren. Für ein bestehendes Figma-Design beginnen Sie mit Figma. Für die Referenzsuche nutzen Sie Mobbin. Für neue mobile App-Screens in einem bearbeitbaren Projekt ist Sleek eine genau dafür entwickelte Option.

Dieser Vergleich umfasst die dokumentierten Funktionen und Einrichtungswege von acht Anbietern für Claude Code und Cursor, geprüft am 28. September 2026. Wir entwickeln Sleek. Die folgenden Empfehlungen basieren auf den Funktionen der Integrationen. Sie sind keine Rangliste der Ergebnisqualität aus einem Praxistest.

Was ist ein Design-MCP-Server?

Ein Design-MCP-Server stellt die Tools eines Designprodukts einem KI-Client zur Verfügung. Der Agent kann diese Tools aufrufen und Daten oder Bilder empfangen, ohne dass Sie jedes Detail in den Chat kopieren müssen. Das Protokoll liefert die Verbindung; der Server bestimmt, ob der Agent eine Datei lesen, einen Katalog durchsuchen oder ein Design ändern kann.

Ein gehosteter Server verbindet sich über eine URL. Eine lokale Integration verbindet sich mit Software auf Ihrem Computer. Keine der beiden Bezeichnungen verrät Ihnen, ob sich damit Screens generieren lassen. Prüfen Sie die verfügbaren Operationen, bevor Sie sich für einen Server entscheiden.

Wie schneiden Design-MCP-Server im Vergleich ab?

Figma ist nützlich, wenn das Design in Figma angelegt sein soll. Mobbin liefert Referenzen aus bestehenden Produkten. Stitch und Sleek bieten gehostete Workflows zur Screen-Generierung, während Pencil und Paper einen Agenten mit einem lokalen Canvas verbinden. Einige Funktionen überschneiden sich. Wählen Sie daher nach dem benötigten Ergebnis und Workflow statt nach der längsten Tool-Liste.

Alle folgenden Zugriffsdetails entsprechen dem Stand von September 2026. Die Quellen der Anbieter und die Anleitungen für Clients folgen unterhalb der Tabelle.

Die Tabelle unterscheidet zwischen Generierung und Referenzsuche. Ein Suchergebnis kann einem Agenten helfen, ein Checkout-Muster zu verstehen, ist aber kein neuer Checkout-Screen für Ihre App.

Was leistet der Figma-MCP-Server?

Figma MCP liefert Design-Kontext für die Umsetzung, einschließlich Layout, Variablen und Komponenten. Der Remote-Server ermöglicht es unterstützten Clients außerdem, native Figma-Inhalte zu erstellen und zu bearbeiten. Nutzen Sie ihn, wenn Sie mit einer Figma-Datei arbeiten oder Inhalte darin erstellen möchten. Der Desktop-Server steht weiterhin zum Auslesen von lokalem Design-Kontext zur Verfügung.

Das Help Center von Figma führt Remote-Zugriff für alle Pläne und Seats auf, Desktop-Zugriff für kostenpflichtige Dev- oder Full-Seats sowie kostenlose Bearbeitung der Designfläche während der Beta-Phase. Der Zugriff ist nicht unbegrenzt: Figmas Seite zu Rate Limits nennt für Starter bis zu 20 Lese-Tool-Aufrufe pro Monat, mit höheren Kontingenten für kostenpflichtige Dev- und Full-Seats.

Befehle geprüft am 2026-09-28.

Die Anleitung zur Remote-Installation empfiehlt dieses Claude-Code-Plugin:

claude plugin install figma@claude-plugins-official

Oder fügen Sie nur den Server hinzu:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Öffnen Sie /mcp in Claude Code und authentifizieren Sie sich. Für Cursor dokumentiert dieselbe Anleitung diesen Befehl im Agenten-Chat:

/add-plugin figma

Für den Desktop-Weg aktivieren Sie den MCP-Server im Dev-Mode-Inspect-Panel von Figma. Die Desktop-Anleitung gibt diesen Claude-Code-Befehl an:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Cursors Desktop-Konfiguration lautet:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Fügen Sie den Link zu einem Frame ein und bitten Sie den Agenten, diesen umzusetzen. Das ist der übersichtlichste Ausgangspunkt, wenn das Layout bereits feststeht. Durch seine Schreib-Tools kommt der Remote-Server auch infrage, wenn Sie Inhalte direkt in Figma erstellen müssen.

Was leistet der Google-Stitch-MCP-Server?

Google Stitch bietet eine gehostete MCP-Verbindung für das Arbeiten mit Stitch-Projekten und das Generieren von Screens aus Text. Das resultierende Design verbleibt in einem Stitch-Projekt. Es eignet sich für Entwickler, die den Design-Generator von Google über ihren Coding-Agenten nutzen und Screen-Daten im selben Workflow abrufen möchten.

Die Setup-Anleitung für Stitch MCP dokumentiert die Authentifizierung per API-Key und OAuth. Die Einrichtung per API-Key nutzt einen Schlüssel aus den Stitch-Einstellungen. Das offizielle Stitch-SDK dokumentiert ebenfalls den Remote-Endpunkt, die Generierung sowie den Abruf von Screen-HTML und -Bildern.

Claude Code mit der API-Key-Konfiguration aus der Setup-Anleitung:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor in .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Ersetzen Sie den Platzhalter durch Ihren Schlüssel und nehmen Sie diese Datei nicht in die Versionsverwaltung auf. Prüfen Sie die aktuellen Limits in Ihrem Stitch-Account, bevor Sie eine Batch-Generierung planen. Die Setup-Seite ist eine Verbindungsanleitung.

Was leistet der Mobbin-MCP-Server?

Mobbin MCP ermöglicht es dem Agenten, echte Produktoberflächen zu durchsuchen und Screen-Bilder zu empfangen. Das ist nützlich, bevor Sie einen Flow gestalten oder ein Muster umsetzen, das noch nicht feststeht. Die dokumentierten Tools durchsuchen bestehendes Material; sie generieren kein neues App-Design. Die Ausgabe dient als Referenzmaterial für die nächste Entscheidung.

Die Einführung von Mobbin bestätigt OAuth und Zugriff bei den Plänen Pro, Team und Enterprise. Seine Tool-Liste deckt Screens, Flows und Website-Bereiche ab. URLs für hochauflösende Bilder laufen nach 30 Tagen ab.

Die Claude-Code-Anleitung von Mobbin empfiehlt, den verifizierten Connector zuerst in Claude Desktop oder im Web einzurichten. Sie dokumentiert außerdem diese reine CLI-Alternative:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Öffnen Sie anschließend /mcp, wählen Sie Mobbin aus und authentifizieren Sie sich.

Für Cursor nutzen die Einrichtungsschritte des Anbieters das Marketplace-Plugin anstelle eines JSON-Snippets:

1. Öffnen Sie das Mobbin-Plugin im Cursor Marketplace und wählen Sie „Add to Cursor".
2. Wählen Sie „Add Plugin".
3. Öffnen Sie in Cursor „Customize", dann „Installed", dann „Mobbin".
4. Wählen Sie „Authenticate" und melden Sie sich an.

Fragen Sie nach einer konkreten Referenz, etwa Onboarding-Screens von Banking-Apps. Wählen Sie die nützlichen Muster aus, bevor Sie einen Generator oder Coding-Agenten bitten, Ihren eigenen Flow umzusetzen.

Was leistet der Sleek-MCP-Server?

Sleek MCP ermöglicht es einem Agenten, bearbeitbare iOS- und Android-App-Screens in einem Sleek-Projekt zu generieren. Der Agent kann Screen-HTML abrufen, Bilder rendern und einen Projekt-Link zur Überprüfung zurückgeben. Nutzen Sie ihn, wenn das mobile App-Design der fehlende Schritt zwischen Ihrem Briefing und dem Code ist, den der Agent schreiben soll.

Die Sleek-MCP-README dokumentiert einen gehosteten Server, OAuth-Anmeldung sowie Figma- und Code-Exporte. Geben Sie dem Agenten das vollständige App-Briefing in einer einzigen Nachricht, damit Sleek das Screen-Set als Ganzes planen kann. Die Generierung verbraucht Workspace-Credits; Lesen und Rendern verbrauchen keine.

Claude Code:

claude mcp add --transport http sleek https://sleek.design/api/mcp

Öffnen Sie /mcp, wählen Sie Sleek aus und schließen Sie die Browser-Authentifizierung ab. Für Cursor fügen Sie Folgendes zu .cursor/mcp.json für ein einzelnes Projekt oder zu ~/.cursor/mcp.json für alle Projekte hinzu:

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

Aktivieren Sie den Server und melden Sie sich an. Die README empfiehlt OAuth; API-Keys sind ein Fallback für Clients, die dies nicht unterstützen.

Free-Accounts können die API mit einmalig 60 Credits testen. Unter den öffentlich angebotenen Abonnements erfordert der dauerhafte API- und Agenten-Zugriff Pro oder Team, nicht Starter. Mit Stand September 2026 kostet Pro $69 pro Monat oder $360 pro Jahr und enthält monatlich 20.000 Credits. Figma- und Code-Exporte sind in jedem Plan enthalten, wobei Exporte im Free-Plan auf freigeschaltete Screens beschränkt sind.

Die MCP-README schätzt etwa 30 Credits pro neuem Screen und 5 bis 30 pro Bearbeitung. Pro Projekt kann nur ein Design-Durchlauf gleichzeitig aktiv sein. Der design-Aufruf wartet bis zu 270 Sekunden und meldet bei Bedarf, dass der Vorgang noch läuft; der Agent sollte get_design_run abfragen, anstatt das Briefing erneut zu senden.

Sleek erstellt Designs und exportierbaren UI-Code. Ihr Coding-Agent muss weiterhin die Daten und das Verhalten der App verknüpfen und den Screen-Code anpassen, wenn Sie mit React Native oder SwiftUI entwickeln. Wenn Sie einen REST-API-Workflow bevorzugen, erklärt der Leitfaden zu UI-Design-Skills für Claude Code die separate Skill-Installation von Sleek.

Was macht der ScreensDesign-MCP-Server?

ScreensDesign MCP kombiniert iOS-App-Recherche mit der Generierung von Screens. Die MCP-Seite führt eine Bibliothek von 2.715+ der umsatzstärksten Apps, vollständige UX-Flows, Umsatzsignale und Tools auf, die auf Basis dieser Referenzen Screens generieren (Stand September 2026). Es passt zu einem Briefing, das mit der Analyse bestehender mobiler Muster beginnt.

Der MCP-Zugriff erfordert ScreensDesign Pro. Der gehostete Server unterstützt OAuth oder API-Schlüssel mit begrenzten Berechtigungen. Für Claude Code fügen Sie den HTTP-Endpunkt hinzu und authentifizieren sich über /mcp:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Für Cursor fügen Sie dies zu .cursor/mcp.json hinzu und verbinden anschließend den Server:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Nutzen Sie die Anleitung zur Einrichtung des Anbieters für die kontospezifische Konfiguration. Die Umsatzsignale beschreiben die Referenz-Apps; sie belegen nicht, dass das Kopieren eines Screens die Conversion-Rate Ihrer App verbessert.

Was macht der AIDesigner-MCP-Server?

AIDesigner MCP generiert und verfeinert HTML/CSS-Designs mit Tailwind für mobile oder Desktop-Viewports. Es kann Repository-Kontext nutzen und Ergebnisse mit seinem Canvas teilen. Wählen Sie diesen Server, wenn Sie generierten Interface-Code benötigen, der zu Ihrem bestehenden Projekt passt, und prüfen Sie die Ausgabe, bevor Sie sie als Implementierung behandeln.

Die offizielle Einrichtungsanleitung stellt eine CLI bereit, das den Server und die Agenten-Anweisungen konfiguriert. Führen Sie dies für Claude Code im Stammverzeichnis Ihres Projekts aus:

npx -y @aidesigner/agent-skills init

Für Cursor wählen Sie den Host explizit aus:

npx -y @aidesigner/agent-skills init cursor

Beide verbinden sich mit https://api.aidesigner.ai/api/v1/mcp. Schließen Sie die OAuth-Anmeldung über das MCP-Panel des Clients ab. Die Generierung verbraucht Konto-Credits; prüfen Sie Ihr Guthaben, bevor Sie mehrere Varianten generieren. Die dokumentierte Ausgabe ist Interface-HTML, keine vollständige native mobile App.

Was leistet der Pencil-MCP-Server?

Pencil, jetzt pen.dev, verbindet einen Agenten mit dem .pen-Dokument, das in seiner Desktop-App oder IDE-Erweiterung geöffnet ist. Der Agent kann dieses Canvas prüfen und ändern, während Sie in derselben Datei arbeiten. Dies eignet sich für Entwickler, die ein Design-Dokument neben ihrem Repository und einen interaktiven lokalen Bearbeitungs-Workflow wünschen.

Die Dokumentation zur KI-Integration beschreibt eine lokale stdio-Verbindung zur App. Die Installationsanleitung beschreibt diese Schritte für Claude Code statt einer auf jedem Rechner nutzbaren URL:

1. Öffnen Sie ein .pen-Dokument in pen.dev.
2. Aktivieren Sie Claude Code CLI in den Einstellungen unter „MCP".
3. Starten Sie Claude Code oder starten Sie es neu.
4. Führen Sie /mcp aus und bestätigen Sie, dass pencil verbunden ist.

Nutzen Sie für Cursor den dokumentierten Weg über die IDE-Erweiterung:

1. Öffnen Sie die Erweiterungen („Extensions") und suchen Sie nach pen.dev.
2. Installieren Sie die Erweiterung.
3. Erstellen oder öffnen Sie eine .pen-Datei.

Laut der Preisseite ist pen.dev mit Stand September 2026 kostenlos. Das beinhaltet nicht Ihr separates Abonnement für den Coding-Agenten. Halten Sie das Dokument für diesen MCP-Workflow geöffnet; verwenden Sie für die Verbindung weder einen geratenen gehosteten Endpunkt noch einen von einem anderen Rechner kopierten Pfad zu einer ausführbaren Datei.

Was leistet der Paper-MCP-Server?

Paper MCP ermöglicht es einem Agenten, ein aus HTML und CSS aufgebautes Paper-Design-Dokument zu lesen und zu bearbeiten. Es unterstützt einen gemeinsamen Canvas-Workflow: Der Agent ändert das Design, Sie überprüfen es und der Agent kann das Ergebnis während der Umsetzung nutzen. Paper Desktop muss für diese Dokumenten-Operationen ausgeführt werden und eine Datei geöffnet haben.

Die Anleitung zu Paper MCP dokumentiert diese Plugin-Installationen. Installieren und öffnen Sie zuerst Paper Desktop. Für Claude Code führen Sie Folgendes aus:

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

Öffnen Sie anschließend Claude Code und prüfen Sie /mcp. Für Cursor führen Sie dies im Agenten-Panel aus:

/add-plugin paper-desktop

Laden Sie Cursor neu, falls der Server nicht erscheint. Die ältere Localhost-HTTP-Konfiguration von Paper funktioniert weiterhin, aber aktuelle Plugins nutzen die Paper-CLI. Die CLI kann Tools bereitstellen, während Desktop geschlossen ist; das Lesen und Schreiben von Dokumenten erfordert jedoch weiterhin die App.

Die Preisseite von Paper führt mit Stand September 2026 100 MCP-Aufrufe pro Woche im kostenlosen Plan und 1 Million pro Woche bei Pro auf. Pro kostet monatlich $20 pro Nutzer mit Bearbeitungsrechten oder $16 bei jährlicher Abrechnung. Ein Kontingent an Tool-Aufrufen ist keine Anzahl an Screens: Eine einzelne Design-Aufgabe kann mehrere Aufrufe erfordern.

Welchen Design-MCP-Server sollten Sie nutzen?

Nutzen Sie Figma, um ein bestehendes Figma-Design umzusetzen, Mobbin, um Referenzen zu finden, und Sleek, um mobile Screens in einem Projekt zu generieren, das Sie überprüfen und exportieren können. Stitch ist eine weitere gehostete Generierungsoption. Wählen Sie Pencil oder Paper, wenn Sie mit einem Agenten auf einer lokalen Designfläche am selben Dokument arbeiten möchten.

Beginnen Sie mit der unmittelbaren Aufgabe. Wenn Ihnen ein Teammitglied bereits einen Figma-Frame übergeben hat, bringt ein zweiter Generator eine Design-Entscheidung mit sich, die Sie möglicherweise gar nicht benötigen. Wenn Ihnen ein Layout fehlt, können Referenzen Ihnen vor der Generierung helfen zu entscheiden, was auf den Screen gehört. Verbinden Sie für ein neues mobiles App-Briefing Ihren Agenten mit Sleek und prüfen Sie die resultierenden Screens vor der Umsetzung. Der kostenlose Testzugang deckt etwa einen Design-Durchlauf ab; Pro unterstützt die dauerhafte Nutzung.

Geben Sie dem Agenten alle bestehenden Markenvorgaben als Teil des Briefings mit. Die DESIGN.md-Bibliothek bietet schriftliche Design-Vorgaben, die Sie zusammen mit diesen Tools nutzen können; sie ist eine separate Eingabe unabhängig von der MCP-Verbindung.

Für Optionen jenseits von Agenten-Integrationen lesen Sie das Ranking der besten KI-Tools für mobiles App-Design und die Alternativen zu Claude Design.

Häufig gestellte Fragen