AI to Figma: UI aus Claude und Cursor per MCP nach Figma

KI-Coding-Assistenten erstellen inzwischen in wenigen Minuten eine überzeugende Landingpage, einen Einstellungs-Screen oder ein Dashboard. Das Problem ist, wo diese UI landet: in einem Code-Editor oder einer lokalen Vorschau, weit weg von der Figma-Datei, in der dein Team Design reviewt, annotiert und verfeinert.

Dieser Leitfaden zeigt, wie du diese Lücke mit einer AI-to-Figma-Verbindung schließt. HTML to Frames bietet eine MCP-Verbindung, über die Claude Code, Claude Desktop, Cursor oder jeder MCP-Client Seiten direkt in dein geöffnetes Figma-Plugin senden kann, wo sie in echte, bearbeitbare Ebenen mit Auto Layout umgewandelt werden.

Was „AI to Figma“ hier bedeutet

Unter „AI to Figma“ verstehen Leute zwei sehr unterschiedliche Dinge:

1. KI, die aus einem Prompt ein Design direkt in Figma erzeugt.
2. KI, die HTML und CSS schreibt, plus eine Brücke, die diesen Code in Figma-Ebenen umwandelt.

HTML to Frames macht das Zweite. Dein KI-Tool tut weiter, was es gut kann – Frontend-Code schreiben –, und das Plugin übernimmt die Umwandlung, die es für jede Webseite macht: Frames, Texte, Vektoren, Bilder, Variablen und Auto Layout. Das Ergebnis hat dieselbe Qualität wie der Import einer Live-Website, weil es durch dieselbe Capture-Pipeline läuft. Eine Produktübersicht findest du unter AI to Figma.

Wie die MCP-Verbindung funktioniert

Das Model Context Protocol (MCP) ist ein Standard, über den KI-Tools externe Tools aufrufen. Wenn du HTML to Frames als MCP-Server verbindest, erhält dein KI-Tool drei Tools:

Die Seite landet in deinem geöffneten Plugin in Figma und wird mit deinem eigenen Plan importiert – es gelten also die üblichen Plan-Regeln: Screens pro Import, Styles und Variablen, Komponenten und so weiter.

Was das KI-Tool zurückbekommt

Die KI bekommt deine Figma-Datei nicht zurück. Sie erhält eine Antwort auf den Tool-Aufruf, die bestätigt, dass die Seite übergeben wurde, und kann mit import_status prüfen, wie es um den Import steht. Die eigentliche Designarbeit passiert in Figma, im Plugin, wo du den Ergebnisbildschirm mit Frames, Ebenen, Auto-Layout-Anteil und eventuellen Warnungen siehst. Das ist Absicht: Das Plugin liest den Inhalt deiner Figma-Datei nicht, daher fließt nichts aus deiner Datei zurück an die KI.

Setup: Verbinde dein KI-Tool über den AI-Tab des Plugins

Das Setup machst du einmal pro KI-Client. Alles beginnt im Plugin.

1. Öffne HTML to Frames in Figma und geh in den Tab AI.
2. Hol dir deinen Token. Der AI-Tab gibt dir einen Verbindungs-Token. Behandle ihn wie ein Passwort.
3. Wähle deinen Client. Der AI-Tab zeigt ein Copy-and-paste-Setup für die unterstützten Clients.
4. Füge das Setup in deinen Client ein, genau wie angezeigt (Details pro Client unten).
5. Starte den Client neu oder lade ihn neu, damit er den neuen MCP-Server übernimmt.
6. Lass das Plugin in Figma geöffnet, während du arbeitest. Seiten werden an das geöffnete Plugin geliefert.

Claude Code

Claude Code liest MCP-Server aus seiner Konfiguration. Kopiere das Setup, das der AI-Tab für Claude Code anzeigt, und führe es wie beschrieben aus oder füge es ein. Starte dann eine neue Sitzung und bitte Claude, seine Tools aufzulisten; du solltest import_html, import_url und import_status sehen.

Claude Desktop

Claude Desktop speichert MCP-Server in seiner Konfigurationsdatei, die du über die Entwicklereinstellungen der App öffnen kannst. Füge das Snippet aus dem AI-Tab in diese Datei ein, speichere und starte Claude Desktop komplett neu. Die Tools erscheinen im Tool-Menü eines neuen Chats.

Cursor

Cursor listet MCP-Server in seinen Einstellungen. Füge mit dem Snippet aus dem AI-Tab einen neuen Server hinzu, speichere und prüfe, ob der Server als verbunden mit drei Tools angezeigt wird.

Jeder andere MCP-Client

Wenn dein Tool MCP spricht, gelten derselbe Token und dasselbe Setup. Nutze das generische Setup aus dem AI-Tab und passe es daran an, wie dein Client Server registriert.

Noch nicht unterstützt: claude.ai-Web-Connectors

claude.ai-Web-Connectors (OAuth) werden noch nicht unterstützt. Wenn du in der Browser-Version von Claude arbeitest, erzeuge das HTML dort, speichere es und importiere es stattdessen über die Quelle Local file oder Paste code des Plugins. Oder verlagere die Aufgabe in Claude Code oder Claude Desktop, die sich schon heute per MCP verbinden.

Datenschutz: Was mit deinem Token und deinen Seiten passiert

KI-Workflows werfen berechtigte Fragen auf, wohin Code und Designs wandern. Das tut die Verbindung:

• Dein Verbindungs-Token wird nur als Hash gespeichert. Der Service kann ihn prüfen, behält aber den Token selbst nicht.
• Seiten warten höchstens 30 Minuten im Arbeitsspeicher. Holt dein Plugin eine Seite in diesem Zeitfenster nicht ab, ist sie weg.
• Das Rendering erfolgt in einem isolierten Sandbox-Browser. Das Ergebnis wird einmal ausgeliefert, dann aus dem Arbeitsspeicher gelöscht und nie auf die Festplatte geschrieben.
• Keine Cookies, kein Tracking, keine Tracking-Pixel in Plugin, Erweiterung oder Website.
• Wir erhalten von Figma nie deinen Namen oder deine E-Mail-Adresse; die Konto-Kennung wird aus deiner Figma-Nutzer-ID abgeleitet.

Die vollständige Aufschlüsselung steht auf der Sicherheitsseite.

Limits, die du kennen solltest

• HTML-Größe: import_html akzeptiert bis zu 2 MB. Bette riesige Base64-Bilder sparsam ein; verlinke gehostete Bilder, wo du kannst.
• Nur öffentliche URLs für import_url. Läuft die Vorschau der KI auf localhost, lass die KI das HTML direkt mit import_html senden oder erfasse die laufende Seite mit der Chrome-Erweiterung, die localhost und Seiten mit Login beherrscht.
• Die Plan-Nutzung gilt. Jede Seite zählt als Import in deinem Plan. Free bietet 10 Importe pro Monat und 1 Screen pro Import; Pro und Team sind im Rahmen von Fair Use unbegrenzt, mit bis zu 4 Screens pro Import. Siehe Preise.
• Dieselben Umwandlungsregeln wie bei jeder Seite. Iframes, WebGL-Canvases und Videos ohne Poster werden zu einem Screenshot-Bild ihres Bereichs. Skew- und 3D-Transformationen werden noch nicht umgewandelt.

Prompts zum Ausprobieren

Sobald die Verbindung steht, sprichst du mit der KI wie gewohnt und sagst ihr, dass sie das Ergebnis an Figma senden soll. Ein paar Prompts, die gut funktionieren:

1. „Bau eine Preisseite mit drei Stufen in reinem HTML und CSS mit Flexbox und sende sie dann mit import_html an Figma.“
2. „Nimm den Einstellungs-Screen, den du gerade gebaut hast, bette das CSS inline ein und importiere ihn in Figma. Prüfe dann import_status.“
3. „Unsere Staging-Website liegt unter dieser öffentlichen URL. Importiere die Preis- und die Registrierungsseite mit import_url in Figma.“
4. „Erstelle zwei Varianten dieses Hero-Bereichs, eine mit linksbündiger Überschrift und eine zentriert. Sende jede als separaten Import an Figma.“
5. „Schreib dieses Karten-Grid mit CSS Custom Properties für die Farben neu und importiere es dann, damit die Variablen mitkommen.“

Prompts für saubere Figma-Ergebnisse

Die KI schreibt bessere Importe, wenn du ihr CSS etwas lenkst:

• Bitte um Flexbox und Grid mit gap statt Margins zwischen Geschwisterelementen. Das lässt sich sauber auf Auto Layout abbilden; siehe CSS Flexbox und Grid zu Auto Layout.
• Bitte um CSS Custom Properties für Farben. Mit aktivierter Option Styles & variables (Pro) wird aus --brand-primary eine Variable brand/primary.
• Bitte um echten Text, nicht in Bilder eingebrannten Text, damit jede Überschrift bearbeitbar bleibt.
• Bitte um eine Seite pro Import; lange Dokumente mit mehreren Screens sind schwerer zu reviewen.

Die Schleife aus Design und Code

Der eigentliche Wert liegt nicht in einem einzelnen Import, sondern in einer Schleife, in der Design und Code nicht mehr auseinanderdriften.

1. Prompt: Die KI baut eine erste Version in Code.
2. Import: Die KI sendet sie mit import_html oder import_url an Figma.
3. Review in Figma: Designer passen Abstände, Typografie, Farbe und Layout mit Auto-Layout-Frames an, kommentieren und erkunden Alternativen.
4. Änderungen zurückmelden: Sag der KI, was sich geändert hat, oder füge die relevanten Werte ein, und lass sie den Code aktualisieren.
5. Re-import, um zu bestätigen, dass der Code jetzt passt, und mit dem vorherigen Frame zu vergleichen.

Wer davon profitiert

• Designer zeichnen KI-Prototypen nicht mehr von Hand nach, sondern starten mit bearbeitbaren Frames.
• Frontend-Entwickler bekommen Design-Reviews auf echtem Output, ohne Screenshots zu exportieren.
• Product Manager machen aus einem Prompt eine reviewbare Figma-Seite für ein Stakeholder-Meeting.
• Solo-Builder behalten eine visuelle Historie jeder Iteration in einer Datei.

AI to Figma im Vergleich mit anderen Wegen

Alle drei Plugin-Wege nutzen dieselbe Engine. MCP spart einfach den Copy-and-paste-Schritt und lässt die KI steuern. Das Auto Layout ist verifiziert: Die Position jedes Kindelements wird auf 2 px genau geprüft, und hält ein Layout nicht, wird ein einfacherer Plan probiert oder der Frame behält absolute Positionen. Das Design bricht nie. Mehr dazu in Auto Layout erklärt.

Fehlerbehebung

• Die KI sagt, das Tool sei nicht verfügbar. Starte den Client nach dem Hinzufügen des Servers neu und prüfe, ob das Snippet unverändert eingefügt wurde.
• Der Import taucht nie auf. Stell sicher, dass das Plugin in Figma geöffnet ist. Seiten warten bis zu 30 Minuten – öffne das Plugin, und es holt sie innerhalb dieses Zeitfensters ab.
• Der Token wurde abgelehnt. Erzeuge im AI-Tab einen neuen Token und aktualisiere das Setup des Clients.
• Das Layout sieht falsch aus. Prüfe die Diagnose auf dem Ergebnisbildschirm, die erklärt, warum ein Frame absolut geblieben ist, und bitte die KI, für diesen Abschnitt Flexbox oder Grid zu nutzen.

Loslegen

Öffne das Plugin, geh in den AI-Tab und verbinde einen Client. Bitte dein KI-Tool, eine kleine Komponente zu bauen und an Figma zu senden; so siehst du, wie es sich verhält, bevor du dich für einen ganzen Screen darauf verlässt. Die Doku erklärt den AI-Tab, und die Funktionsseite listet alles auf, was der Import unterstützt.