Screenshot zu Figma mit Cursor und dem Figma MCP Server: Der Workflow für KI-Coding-Agents

Workflow2026-05-10

Wenn Sie KI-Coding-Agents (Cursor, Claude Code, Windsurf, Codex) nutzen, um UIs aus Designs zu bauen, kennen Sie wahrscheinlich dasselbe Problem wie alle anderen: Einen Screenshot in den Chat zu werfen funktioniert bei trivialen Komponenten, bricht aber bei allem Realen schnell zusammen. Der Agent interpretiert; die Interpretation ist falsch; Sie korrigieren; Tokens gehen drauf; Sie geben auf und bauen es per Hand neu.

Es gibt eine bessere Pipeline. Verwenden Sie Codia AI, um den Screenshot zuerst in eine strukturierte Figma-Datei zu verwandeln. Verbinden Sie dann den Figma MCP Server mit Ihrem Agenten. Der Agent konsumiert jetzt strukturierte Layoutdaten, Variablen, Komponenten und Design-Tokens — nicht mehr ein flaches Bild. Die Ausgabequalität steigt, die Iterationsschleifen werden kürzer, und die Arbeit fühlt sich weniger an wie ein Kampf mit dem Tool.

Mit Codia Screenshot to Figma wandelst du Screenshots und UI-Bilder in bearbeitbare Figma-Ebenen um, bevor du das Interface redesignst, vergleichst oder übergibst.

Was ist der Figma MCP Server?

Der Figma MCP Server ist die offizielle Brücke zwischen Figma-Dateien und KI-Agents, die das Model Context Protocol unterstützen. Er stellt Ihre Figma-Dateien, Komponenten, Variablen und Design-Tokens als strukturierte Daten bereit, die der Agent direkt lesen kann — statt alles aus einem Screenshot zurückzuentwickeln.

Im Rekonstruktionsschritt öffnest du Codia Screenshot to Figma und wandelst die Referenz erst in bearbeitbare Ebenen um, bevor du das Design verfeinerst.

Editoren mit MCP-Unterstützung heute: VS Code, Cursor, Windsurf, Claude Code, Codex.

Das Problem, das MCP löst

Wenn Sie einen Screenshot in Cursor oder Claude Code einfügen und sagen „baue das“, macht der Agent Folgendes:

Betrachtet das Bild mit Vision
Errät die Layoutstruktur
Errät die Abstände
Errät die Farben
Errät die Komponenten
Schreibt Code auf Basis dieser Vermutungen

Jedes „errät“ ist der Punkt, an dem sich Token-Kosten aufsummieren und die Qualität sinkt. Echte Designdateien enthalten all diese Informationen als Daten, nicht als Pixel. MCP legt diese Daten offen.

Das Problem, das Codia löst

MCP braucht eine Figma-Datei, um nützlich zu sein. Wenn Sie keine haben — nur einen Screenshot der Referenz-UI, die Sie bauen wollen — kann MCP nicht helfen. Dann sind Sie wieder beim Einfügen eines Bildes.

Codia schließt diese Lücke. Screenshot → Codia → strukturierte Figma-Datei (mit Variablen, Auto Layout, benannten Komponenten) → MCP-fähig.

Die Drei-Schritte-Pipeline

Schritt 1: Den Screenshot mit Codia konvertieren

Nehmen Sie Ihren Referenz-Screenshot — eine Wettbewerbsseite, ein Inspirationsbild, einen bestehenden Produktionsscreen — und konvertieren Sie ihn mit Codia AI nach Figma:

Laden Sie ihn in das Codia Figma Plugin oder die Web-App hoch
Starten Sie die Konvertierung (~10 Sekunden für einen sauberen Vollbild-Screen)
Öffnen Sie das Ergebnis in Figma

Das Ergebnis sind echte Frames, echte Textebenen, Auto Layout dort, wo die Analogie passt, und Komponenten für wiederkehrende Elemente. Entscheidend: Es hat Struktur, und genau das konsumiert MCP.

Mehr zur eigentlichen Konvertierung finden Sie in Screenshot to Figma: Der vollständige Leitfaden.

Schritt 2: Die Figma-Datei für MCP bereinigen

MCP belohnt eine saubere Figma-Datei unverhältnismäßig stark. Investieren Sie fünf Minuten:

Wenden Sie Variablen an für Ihre Farben. Rohe Hex-Werte liefern dem Agenten Strings; Variablen liefern Tokens. Die Ausgabe des Agenten nutzt dann Ihr Designsystem statt eines erfundenen.
Prüfen Sie Auto Layout für alle Container, die responsive sein sollen. MCP überträgt das direkt in das Verständnis des Agenten, wie sich das Layout verhalten soll.
Benennen Sie Komponenten aussagekräftig. PrimaryButton, NavItem, PricingCard — nicht Group 47. Der Agent verwendet diese Namen im generierten Code.
Gruppieren Sie wiederholte Elemente als Komponenten, nicht als ad-hoc-Instanzen. MCP stellt Komponenten als eigenständige Konzepte bereit.

Wenn Sie mit einer von Codia konvertierten Datei starten, ist vieles davon bereits erledigt — die Konvertierung erzeugt Auto Layout, benennt Elemente und gruppiert Muster. Die fünf Minuten Bereinigung sind nur Feinschliff.

Schritt 3: MCP mit Ihrem Editor verbinden und generieren

Installieren und konfigurieren Sie den Figma MCP Server in Ihrem bevorzugten Editor. Der offizielle Einrichtungsleitfaden: Figma MCP Server Guide.

Referenzieren Sie dann in Ihrem Prompt die Figma-Datei oder Auswahl:

"Verwende die Figma-Datei [Link oder Auswahl-ID], um eine React-Komponente zu bauen, die dieses Design exakt trifft. Nutze die Designsystem-Variablen. Stimme die Abstands-Tokens ab."

Der Agent hat jetzt:

Echte Layer-Hierarchie
Echte Abstands-Werte aus Auto Layout
Echte Farb-Tokens aus Variablen
Echte Komponentendefinitionen
Optionale Screenshots der Auswahl (zur visuellen Bestätigung)

Die Ausgabe ist deutlich näher am Design als der Baseline-Ansatz „Screenshot einfügen“.

Warum diese Pipeline „Screenshot in den Chat werfen“ schlägt

Ansatz	Was der Agent bekommt	Ausgabequalität	Token-Kosten
Screenshot in den Chat einfügen	Pixel + Ihr Prompt	Niedrig bis mittel, viel Interpretation	Hoch — viele Korrekturen
Codia → MCP → Agent	Strukturierte Layoutdaten + Variablen + Komponenten + Screenshot	Mittel bis hoch, weniger Interpretation	Niedrig — weniger Korrekturen
Codia → MCP → Agent + saubere Figma-Datei	Dasselbe plus Designsystem-Daten	Hoch	Am niedrigsten

Praktischer Effekt: Teams, die die komplette Pipeline nutzen, berichten von etwa 50–70 % weniger „bitte korrigieren“-Iterationen bei UI-Generierung im Vergleich zu Screenshot-only-Prompts. Der Tokenverbrauch sinkt entsprechend.

Schritt-für-Schritt in Cursor

Ein konkretes Beispiel mit Cursor:

In Figma öffnen Sie die von Codia erzeugte Datei. Wählen Sie den Frame aus, den Sie bauen möchten.
In Cursor installieren Sie den Figma MCP Server (Einstellungen → MCP → Server hinzufügen).
Im Cursor-Chat schreiben Sie: „Verwende den Figma MCP Server, hole den ausgewählten Frame aus meiner Figma-Datei und generiere eine React + Tailwind-Komponente, die das Design exakt trifft. Nutze Variablen als Tailwind-Theme-Tokens.“
Der Agent ruft das MCP-Tool auf, holt strukturierte Daten plus einen Screenshot der Auswahl.
Er generiert die Komponente. Der erste Durchlauf liegt viel näher am Design als ein Screenshot-Prompt.
Iterieren Sie, indem Sie gezielte Änderungen auf dieselbe Figma-Quelle beziehen.

Zusammen mit Claude Code

Die gleiche Pipeline, nur mit anderer Oberfläche. Claude Code unterstützt MCP nativ. Der Figma MCP Server wird auf dieselbe Weise installiert. Die Prompt-Struktur ist identisch.

Wenn Sie Claude Code ohnehin für Backend-Arbeit verwenden, ermöglicht der Figma MCP Server demselben Agenten, UI aus Ihren von Codia konvertierten Figma-Dateien zu bauen.

Zusammen mit Windsurf

Auch hier gilt dasselbe. Windsurfs MCP-Unterstützung sorgt dafür, dass der Figma MCP Server auf die gleiche Weise eingebunden wird wie in Cursor oder Claude Code.

Typische Stolperfallen

Variablen überspringen. Wenn Ihre Figma-Datei überall rohe Hex-Werte nutzt, gibt MCP dem Agenten rohe Strings zurück. Wenden Sie Ihre Designsystem-Variablen an — das ist der Unterschied zwischen „die richtige Markenfarbe“ und „irgendwie nah dran an Ihrer Markenfarbe“.

Auto Layout vergessen. Ohne Auto Layout kann MCP Positionen beschreiben, aber keine responsive Absicht. Auto Layout macht daraus „das ist eine Flex-Zeile mit 16 px Abstand“ — verwertbar für den Agenten.

Zu viel in einem Prompt verlangen. „Baue das ganze Dashboard“ ist zu groß. „Baue die Sidebar-Komponente passend zur Figma-Auswahl“ funktioniert deutlich besser. Arbeiten Sie auf Komponentenebene und setzen Sie danach zusammen.

In Figma nicht präzise auswählen. MCP holt, was Sie ausgewählt haben. Vage Auswahl → vager Kontext. Wählen Sie exakt den Frame, den Sie brauchen.

Screenshot-Prompts mit MCP mischen. Wenn MCP eingerichtet ist, nutzen Sie es. Fügen Sie nicht zusätzlich einen Screenshot ein — der Agent sieht dann zwei Wahrheitsquellen und nimmt, was gerade bequemer erscheint.

Über Einzelscreens hinaus: eine Komponentenbibliothek aufbauen

Die Pipeline skaliert:

Konvertieren Sie einen Satz repräsentativer Screenshots mit Codia
Machen Sie das Ergebnis in Figma komponentenfähig
Wenden Sie Ihre Variablen und Ihr Designsystem an
Nutzen Sie MCP, um eine entsprechende Komponentenbibliothek im Code zu erzeugen

Für Batch-Konvertierungen nutzen Sie die Visual Struct API — bis zu 1.000 Bilder pro Batch.

Wann Sie diese Pipeline NICHT nutzen sollten

Einfache Buttons oder Icons. Manchmal ist es schneller, einfach einen Screenshot direkt an den Agenten zu geben.
Designs, die Sie bereits nativ in Figma haben. Codia überspringen; direkt zu MCP gehen.
Codegenerierung ohne hohe Designtreue. Wenn „ungefähr richtig“ reicht, genügt möglicherweise der Screenshot-Weg.

FAQ

Muss ich für den Figma MCP Server bezahlen?

Der offizielle Figma MCP Server ist Teil der Figma-Plattform; prüfen Sie die Figma-Planstufen auf die MCP-Verfügbarkeit.

Sieht der Agent die echte Figma-Datei oder nur die API?

Der MCP Server gibt dem Agenten strukturierte Daten aus Ihrer Figma-Datei — Ebenen, Namen, Positionen, Variablen, Komponenten — und kann zur visuellen Bestätigung Screenshots ausgewählter Bereiche zurückgeben.

Kann ich das mit meiner eigenen Figma-Datei nutzen, nicht nur mit einer von Codia?

Ja — MCP funktioniert mit jeder gut strukturierten Figma-Datei. Codia ist die Brücke für den Fall, dass Sie nur einen Screenshot und keine bestehende Figma-Quelle haben.

Was ist, wenn meine konvertierte Figma-Datei chaotisch ist?

Investieren Sie fünf Minuten in Bereinigung: Komponenten benennen, Variablen anwenden, Auto Layout prüfen. Die Ausgabequalität des Agenten skaliert mit der Dateiqualität.

Funktioniert das mit Cursor Auto / Claude / GPT-Modellen?

Ja. MCP ist modellagnostisch; der Server liefert strukturierte Daten an das Modell, das der Editor gerade verwendet.

Wie verhält sich das im Vergleich zu Figma Make?

Figma Make generiert UI aus Prompts direkt in Figma; die Codia + MCP-Pipeline generiert Code außerhalb von Figma und nutzt Ihre Figma-Datei als Design-Quelle der Wahrheit. Andere Tools, andere Ausgaben.