MCP für Designer: Figma, Token und Code mit Claude und Cursor verbinden

Was MCP ist, im Klartext

In der offiziellen MCP-Dokumentation wird es als Open-Source-Standard für die Verbindung von KI-Anwendungen mit externen Systemen wie Dateien, Datenbanken und Tools beschrieben. Eines seiner eigenen Beispiele ist Claude Code, das eine komplette Web-App aus einem Figma-Design generiert. Für einen Designer ist Folgendes wichtig: Die KI muss nicht mehr raten, wie Ihr Design aussieht. Es kann das Design-Tool direkt fragen.

Entwerfen Sie noch heute Tools mit MCP-Servern

Stand Oktober 2026:

• Figma: ein MCP-Server, der Agenten Designkontext (Variablen, Komponenten, Layout) für die Codegenerierung bereitstellt und native Inhalte zurück in die Leinwand schreiben kann. Figma listet es in Starter- und kostenpflichtigen Tarifen auf; Canvas Writing ist während der Betaversion kostenlos.
• Penpot: ein kostenloser, offener MCP-Server, der mit jedem MCP-Client funktioniert, einschließlich Claude, Cursor, VS Code und OpenAI Codex, und selbst gehostet werden kann.
• ExodeUI (wir machen es): ein MCP-Server, der es KI-Codierungstools ermöglicht, interaktive Animationen mit Zuständen und Federphysik zu erstellen und zu bearbeiten.
• Design-Token: Wenn Ihre Token in einem Repository als JSON gespeichert sind, kann ein KI-Codierungstool sie bereits als Dateien lesen; Ein dedizierter Server ist nur für in einem Tool gespeicherte Token erforderlich.

Wie Designer es tatsächlich nutzen

Die gängigsten Arbeitsabläufe sind eher praktisch als magisch. Entwickler wählen einen Rahmen aus und bitten die KI, ihn mit der vorhandenen Komponentenbibliothek zu implementieren. Designer bitten die KI zu prüfen, ob ein codierter Bildschirm mit dem Design übereinstimmt und Unterschiede auflistet. Teams bitten die KI, die Token einer Komponente in der gesamten Codebasis zu aktualisieren. Und zunehmend nutzen Designer die KI, um Varianten direkt auf der Leinwand zu entwerfen und sie dann manuell zu verfeinern.

Anschließen eines Servers

Claude Code fügt Server mit dem Befehl claude mcp add oder über eine .mcp.json-Datei im Projekt hinzu und unterstützt sowohl Remote-HTTP-Server als auch lokale. Cursor verwaltet MCP-Server in seinen Einstellungen und unterstützt lokale (stdio) und Remote-Server. Remote-Server fordern Sie normalerweise auf, sich einmal mit OAuth anzumelden. Jeder Anbieter dokumentiert den genauen Befehl oder die genaue URL für seinen Server.

Worauf Sie achten sollten

MCP gibt KI-Tools echten Zugriff, also behandeln Sie es wie jede Integration:

• Berechtigungen: Ein Agent, der auf die Leinwand oder das Repository schreiben kann, kann auch Fehler machen. Verwenden Sie den Versionsverlauf und überprüfen Sie Änderungen.
• Datenschutz: Überprüfen Sie, wohin die Designdaten gehen und ob Ihr Plan dies zulässt.
• Kosten: Einige Schreibfunktionen sind in der Betaversion kostenlos und sollen nutzungsbasiert sein.
• Qualität: Die KI-Ausgabe folgt Ihrem Designsystem nur dann, wenn das System gut strukturiert ist und benannte Komponenten und Token enthält.