Kann die KI Claude selbstständig funktionierende Elementor-Module aus einem Figma-Styleguide bauen? Ich habe getestet, wie weit Claude in Chrome aktuell ist und ob sich unser Workflow von Figma zu Elementor damit optimieren lässt.
Das Ergebnis zeigt: Der Ansatz ist technisch anspruchsvoll, bietet aber grosses Potenzial für mehr Effizienz.
Es gibt bereits verschiedene Plugins wie Figmentor und UiChemy, die ein Design aus Figma in Elementor umsetzen. Dafür wird jedoch ein vollständiges Figma Webseiten-Design mit korrektem Auto-Layout benötigt. Ich teste nun, was mithilfe von Claude in Chrome, MCP-Integration und einem Figma Styleguide alles möglich ist. Die KI soll nicht nur ein Design exakt nachbauen, sondern selbstständig Module generieren.
Der grosse Vorteil: Der Workflow würde deutlich optimiert werden, wenn Claude diese Grundmodule direkt anhand eines Moodboards generieren könnte. So wäre in kurzer Zeit eine Basis geschaffen, um bestimmte Elemente weiterzuverwenden oder als Grundlage zu nutzen.
Von Figma-Variablen bis zur fertigen Section – so läuft der Prozess
Damit Claude passende Inhalte produzieren kann, habe ich eine Inhaltsstruktur für eine Test-Website definiert und exakt angegeben, welche Module erstellt werden sollen.
Damit Claude weiss, wie die Webseite aussehen soll, erstellte ich ein Moodboard in Figma. Darin definierte ich Variablen für Farben und Schriften sowie Varianten für Buttons. Das Moodboard soll den Brand repräsentieren und ein Gefühl für die Designsprache geben. Einige Module aus der Inhaltsstruktur, zum Beispiel eine Kontakt-Section, designte ich bereits auf dem Moodboard. Andere habe ich noch gar nicht angedacht und möchte so bewusst sehen, was Claude anhand des Moodboards generiert.
Moodboard :
Claude kann über das sogenannte Model Context Protocol (MCP) auf das Figma-Design zugreifen. MCP ist ein offener Standard, der von Anthropic entwickelt wurde, um die Kommunikation zwischen KI-Modellen und externen Systemen oder Datenquellen zu vereinheitlichen. So kann Claude auf detaillierte Informationen von Figma zugreifen und das gesamte Dokument mit den einzelnen Frames, Layers und definierten Variablen lesen. Dafür wird ein Figma-MCP-Server benötigt, der die Verbindung zwischen Claude und Figma herstellt. Das ist nicht standardmässig enthalten, sondern muss einmalig eingerichtet werden.
Damit Claude diese ganzen Informationen korrekt interpretieren kann, muss das Figma-File strukturiert aufgebaut sein:
Wenn das alles steht, kommt Claude ins Spiel. Die Verbindung von Claude zu Elementor läuft über “Claude in Chrome”. Das ist eine Browser-Extension, die Claude erlaubt, den Browser direkt zu steuern und Elementor wie ein User zu bedienen. So kann „Claude in Elementor“ die Grundeinstellungen (Site Settings) gemäss Figma anpassen. Zudem soll die KI alle geforderten Module nachbauen oder anhand des Moodboards generieren.
Damit das funktioniert, braucht Claude klare Anweisungen, also einen exakten Prompt. Dieser enthält Schritt-für-Schritt-Anleitungen und klare Angaben, wo was zu finden ist. Auch der Link zum Figma-File ist angegeben, sowie die Berechtigung, die Site Settings von Elementor anpassen zu dürfen.
Für diesen Test habe ich eine WordPress-Umgebung auf einer Testdomain eingerichtet, in der Claude in Chrome keinen Schaden anrichten kann.
Ein korrektes Auto-Layout und definierte Variablen vereinfachen den Prozess enorm. Anhand dieser Daten erkennt Claude die Abstände und kann die Module entsprechend generieren. Dennoch konnte Claude die Module allein anhand des Designs noch nicht in jedem Fall fehlerfrei aufbauen.
Ein solches Vorhaben benötigt viele Tokens. Es ist sinnvoll, den Task in mehrere Prompts zu unterteilen, um Teilergebnisse vor dem Limit zu sichern. So kann nach dem Reset der Tokens weitergearbeitet werden. Bricht der Task wegen fehlender Credits ab, muss er wieder von vorne gestartet werden. Damit du Tokens sparen kannst, haben wir dir hier 5 Tipps zusammengefasst.
Noch ist das Erstellen von Modulen mithilfe von Claude kein „Ein-Klick-Prozess“. Der Output kann zur Inspiration oder als Grundlage dienen, ist aber noch kein fertiges Produkt.
Output von Claude in Chrome:
In Figma designen, in Elementor erstellen lassen: Claude designt die Module zuerst in Figma. Danach prüft und korrigiert man das Layout manuell. Erst dann baut Claude das Design in Elementor nach. Dieser Zwischenschritt sorgt für mehr Kontrolle über das Layout.
In Claude Design erstellen, in Elementor nachbauen lassen:
Man lässt Claude das Layout in der eigenen Design-Umgebung erstellen. Da Claude dort direkt mit sauberem Code arbeitet, versteht die KI die Struktur. Diese Code-Basis nutzt man danach, damit Claude die Module präziser in Elementor umsetzt.
Kontaktiere uns gerne. Wir freuen uns, deine Fragen mit dir zu besprechen.
Kontaktiere uns jetzt.
Buche eine Schulung bei uns.
