MCP erklärt: Von Figma zu WordPress mit Elementor

Kernaussage

Was Entscheider mitnehmen sollten

MCP standardisiert, wie eine KI-Anwendung verfügbare Informationen und Werkzeuge entdeckt, gezielt aufruft und Ergebnisse zurückerhält. Welche Schritte zum Auftrag passen, entscheidet der KI-Assistent innerhalb seiner Freigaben.
Im Figma-Elementor-Workflow liefert Figma den Designkontext, während die Elementor-Anbindung die Umsetzung mit bearbeitbaren Website-Bausteinen ermöglicht.
Prüfen Sie vor einem größeren Auftrag an einem typischen Seitenabschnitt, ob die vorhandenen Elementor-Bausteine unterstützt werden und das Ergebnis im Editor pflegbar bleibt.
Bauen Sie zunächst auf einer getrennten Testseite und geben Sie erst nach Inhalts-, Funktions- und Mobilprüfung zur Veröffentlichung frei.

Was ist MCP eigentlich?

MCP steht für Model Context Protocol. Es ist ein offener Standard, mit dem eine KI-Anwendung auf Informationen und Funktionen anderer Programme zugreifen kann. Ein Assistent kann damit beispielsweise einen Entwurf aus einem Designwerkzeug abrufen oder einen Baustein in einem Website-Editor anlegen. Er muss dann nicht nur erklären, was ein Mensch anklicken soll, sondern kann zugelassene Arbeitsschritte selbst ausführen.

Ein Protokoll ist dabei eine gemeinsame Vereinbarung darüber, wie Programme miteinander sprechen: Wie fragt eine Anwendung nach verfügbaren Funktionen? Welche Angaben braucht ein Auftrag? Wie kommt das Ergebnis zurück? MCP legt dafür ein einheitliches Verfahren fest. Dadurch muss nicht jede KI-Anwendung für jedes angebundene Werkzeug einen völlig eigenen Verständigungsweg entwickeln.

Wenn von einem MCP für Figma oder Elementor die Rede ist, ist meist der jeweilige MCP-Server gemeint. Das ist ein Programm, das ausgewählte Funktionen und Informationen zugänglich macht; es kann auf dem eigenen Rechner oder beim Anbieter laufen. Die KI-Anwendung verbindet sich damit über einen sogenannten MCP-Client. Diesen Verbindungsteil bringt eine geeignete Anwendung mit. Nutzer arbeiten weiterhin mit ihrem Assistenten.

Die Rollen sind unterschiedlich: Das KI-Modell beurteilt den Auftrag und schlägt passende Arbeitsschritte vor. Die KI-Anwendung organisiert die Aufrufe und mögliche Freigaben. Der MCP-Server führt die angebotenen Funktionen aus beziehungsweise vermittelt sie an das angeschlossene System. MCP selbst plant keine Website und beurteilt auch nicht, ob sie gelungen ist.

Was eine MCP-Anbindung bereitstellen kann

Man kann sich das Angebot eines MCP-Servers als beschriebenen Werkzeugkasten vorstellen. Die KI-Anwendung kann abfragen, was vorhanden ist und welche Angaben dafür erforderlich sind. Der Standard unterscheidet drei Arten von Angeboten; nicht jede Anbindung muss alle drei bereitstellen.

Informationen: Sogenannte Ressourcen stellen Inhalte bereit, zum Beispiel eine Datei oder eine Beschreibung des Datenbestands. Die KI-Anwendung kann daraus passenden Kontext für den Auftrag auswählen.
Werkzeuge: Aufrufbare Funktionen können gezielt Informationen abrufen oder etwas verändern, etwa einen Seitenabschnitt anlegen. Ein Werkzeugaufruf bedeutet also nicht automatisch einen Schreibzugriff. Entscheidend ist, was die konkrete Funktion tut.
Vorlagen: Ein Server kann vorbereitete Anweisungen für wiederkehrende Aufgaben anbieten. Solche Vorlagen helfen, einen Auftrag zu formulieren; sie sind keine Garantie für einen vollständig oder korrekt ausgeführten Arbeitsablauf.

Wie Figma und Elementor dabei zusammenspielen

Figma dient in unserem Beispiel als Designwerkzeug: Dort werden Seitenaufbau, Farben, Schriften und wiederkehrende Gestaltungselemente vorbereitet. WordPress verwaltet die Website und ihre Inhalte. Elementor ist der visuelle Editor, mit dem das Team die Seiten in WordPress gestaltet und später weiterpflegt.

Über Figmas MCP-Server kann ein geeigneter KI-Assistent strukturierte Informationen zu einem ausgewählten Design erhalten, etwa zu dessen Aufbau und Gestaltungsvorgaben. Über Elementors offiziellen MCP-Zugang kann er Seitenstrukturen und unterstützte Elemente bearbeiten. Das Ergebnis kann dadurch aus regulären Elementor-Bausteinen bestehen, die Menschen anschließend im Editor ändern können.

Figma und Elementor synchronisieren sich dabei nicht automatisch miteinander. In diesem Workflow verbindet der Assistent beide Seiten: Er liest den Designkontext, übersetzt ihn in einen Umsetzungsplan und nutzt die verfügbaren Elementor-Werkzeuge. Diese Übersetzung kann Fehler enthalten. Ein ähnlich aussehender Entwurf ist deshalb erst ein Zwischenstand.

Was bei einem Auftrag im Hintergrund passiert

Angenommen, der Auftrag lautet sinngemäß: Setze diesen freigegebenen Figma-Abschnitt auf unserer Elementor-Testseite um. Die KI-Anwendung ermittelt zunächst die verfügbaren Werkzeuge und deren Beschreibungen. Daraus kann der Assistent ableiten, welches Werkzeug Designinformationen liefert und welche Funktionen für die Umsetzung infrage kommen.

Für den Abruf wird aus dem allgemeinen Auftrag eine konkrete Anfrage mit den benötigten Angaben, etwa zur Figma-Datei und zum ausgewählten Abschnitt. Der Figma-Server liefert die angefragten Designinformationen zurück. Sie stehen dem Assistenten nun als Arbeitsgrundlage zur Verfügung. Das Modell wird dafür nicht neu trainiert.

Anschließend plant der Assistent die Umsetzung und lässt passende Elementor-Werkzeuge mit konkreten Angaben aufrufen, etwa zur Zielseite und zum gewünschten Inhalt. Je nach Einrichtung verlangt die KI-Anwendung vorher eine Bestätigung. Die Rückmeldung kann ein Ergebnis oder einen Fehler enthalten. Daraufhin kann der Assistent den nächsten Schritt wählen, Angaben korrigieren oder nachfragen. So entsteht die Seite durch mehrere aufeinander bezogene Aufrufe.

Eine Erfolgsmeldung bedeutet zunächst, dass die angefragte Operation ausgeführt wurde. Sie beweist noch nicht, dass der Button gut lesbar ist oder eine Anfrage beim richtigen Team ankommt. Deshalb folgen im praktischen Workflow eine Prüfung im Browser und eine fachliche Abnahme.

Schritt 1: Den Auftrag am Kundenziel ausrichten

Nehmen wir einen fiktiven Weiterbildungsanbieter. Er möchte eine neue Seite für ein Führungskräfteseminar. Interessenten sollen erkennen, für wen das Angebot gedacht ist, welche Inhalte sie erwarten und wie sie einen Termin anfragen können. Das Marketing liefert freigegebene Texte und Bilder; das Designteam bereitet die Darstellung für große und kleine Bildschirme in Figma vor.

Ich würde zuerst diese Grundlage klären: Welche Fassung ist freigegeben? Welche Elemente sollen aus der bestehenden Website übernommen werden? Wohin führt der Anfragebutton? Die bloße Anweisung, aus Figma eine schöne Website zu machen, lässt genau die Entscheidungen offen, die später Zeit kosten.

Sinnvoll benannte Gestaltungselemente und einheitliche Vorgaben für Farben, Schriften und Abstände erleichtern die Übergabe. Auch Verhalten gehört zum Auftrag: Eine Seminarübersicht soll auf dem Smartphone beispielsweise gut lesbar untereinander erscheinen. Die KI sollte solche Anforderungen möglichst vor der Umsetzung kennen.

Schritt 2: Die Arbeitsumgebung passend verbinden

Die technische Betreuung verbindet einen von beiden Anbietern unterstützten KI-Assistenten mit Figma und Elementor. Für den beschriebenen Ablauf wird Figma als Designquelle genutzt; Änderungen am freigegebenen Design sind kein Teil des Auftrags. Die Website entsteht zunächst auf einer getrennten Testkopie, häufig Staging genannt.

Vorher ist zu prüfen, ob die installierten Versionen und gebuchten Funktionen passen. Elementor beschreibt seine MCP-Umsetzung insbesondere für die neueren Atomic-Bausteine, also die Elemente seines neueren Editors. Daraus folgt keine pauschale Zusage, dass sich jede ältere Seite oder jedes Zusatzmodul unverändert bearbeiten lässt. Eine Bestandsseite braucht deshalb einen gezielten Kompatibilitätscheck.

Ebenso wichtig sind die tatsächlichen Zugriffsrechte. Wer den Assistenten verbindet, darf nicht davon ausgehen, dass ein MCP-Zugang automatisch auf harmlose Änderungen begrenzt ist. Die Betreuung prüft den verbundenen Benutzer, die erreichbare Website und die angebotenen Aktionen. Ein Satz im Auftrag ersetzt keine technisch gesetzte Grenze.

Schritt 3: Einen typischen Abschnitt bauen lassen

Beim Weiterbildungsanbieter würde ich mit dem Einstiegsbereich beginnen: Überschrift, Seminarbild, kurze Einordnung und Anfragebutton. Der Assistent liest den passenden Figma-Ausschnitt und prüft, welche Gestaltungsvorgaben und geeigneten Bausteine auf der Testseite bereits vorhanden sind.

Der Auftrag wird konkret: Diesen Bereich als bearbeitbare Elementor-Struktur umsetzen, freigegebene Texte verwenden, vorhandene Gestaltungsvorgaben nach Möglichkeit übernehmen und offene Abweichungen benennen. Nicht unterstützte Funktionen sollen als offene Punkte zurückkommen, damit das Team eine Lösung wählen kann.

An diesem Abschnitt lässt sich früh prüfen, ob die Zusammenarbeit trägt. Kann die Marketingmitarbeiterin die Überschrift selbst ändern? Bleibt der Button bei einem längeren Text gut bedienbar? Verwendet die Umsetzung gemeinsame Formatvorgaben oder viele voneinander unabhängige Einzelwerte? Diese Fragen entscheiden darüber, wie teuer spätere Änderungen werden.

Schritt 4: Die Seite ergänzen und im Browser prüfen

Erst wenn der Probeabschnitt überzeugt, folgen Seminarinhalte, Ablauf, Referentenprofil und Anfragebereich. Der Assistent kann die Arbeit abschnittsweise fortsetzen. Für gestalterische Feinheiten darf das Team weiterhin direkt in Elementor arbeiten; nicht jede kleine Korrektur braucht einen neuen KI-Auftrag.

Geprüft wird die tatsächlich dargestellte Seite im Browser. Der Figma-Entwurf zeigt die beabsichtigte Gestaltung, aber noch nicht, ob Links funktionieren, Bilder angemessen laden oder die Seite mit längeren Inhalten auf kleinen Bildschirmen zurechtkommt. Bei unserem Anbieter gehört auch eine Testanfrage dazu: Kommt sie beim richtigen Team an und erhält der Interessent eine verständliche Rückmeldung?

Eine wichtige Abgrenzung: MCP-Zugriff auf Elementor ist nicht automatisch eine vollständige Browserprüfung. Wenn ein KI-Assistent zusätzlich die Darstellung oder Bedienung testen soll, benötigt er dafür passende Prüfwerkzeuge. Die Abnahme muss klar ausweisen, welche Kontrollen tatsächlich stattgefunden haben.

Schritt 5: Freigeben und die Pflege übergeben

Vor der Veröffentlichung bestätigt der Anbieter die Inhalte; die technische Betreuung prüft Funktionen, mobile Bedienung und grundlegende Zugänglichkeit, etwa Tastaturbedienung und verständliche Formularbeschriftungen. Die menschliche Kontrolle bezieht sich auf einen konkreten Seitenstand, der anschließend über den vereinbarten Veröffentlichungsweg übernommen wird.

Auf einen angeblich immer sicheren Entwurfsmodus würde ich mich dabei nicht verlassen. Gerade Änderungen an gemeinsam genutzten Vorlagen oder Formatvorgaben können über eine einzelne Seite hinauswirken. Die getrennte Testumgebung und die Prüfung betroffener Seiten bleiben deshalb Teil des Ablaufs.

Zur Übergabe gehört eine einfache Pflegeprobe: Eine zuständige Person ändert einen Seminartext oder ein Bild im Editor und kontrolliert das Ergebnis. Außerdem hält das Team fest, ob künftige Designänderungen zuerst in Figma oder in Elementor erfolgen. MCP allein hält beide Fassungen nachträglich nicht automatisch auf demselben Stand.

Wann sich dieser Workflow lohnt

Der Ansatz ist besonders interessant, wenn ein Unternehmen wiederholt ähnliche Angebots- oder Kampagnenseiten benötigt und bereits klare Gestaltungsvorgaben hat. Dann kann KI Übertragungs- und Aufbauarbeit übernehmen. Bei einer einzelnen kleinen Textänderung kann die direkte Bearbeitung im Editor schneller sein als Einrichtung, Auftrag und Kontrolle des Assistenten.

Für die Wirtschaftlichkeit zählen neben den Kosten der KI-Anwendung auch benötigte Produktfunktionen, Einrichtung, Nacharbeit und laufende Pflege. Eine schnelle erste Seite ist wenig wert, wenn jede spätere Änderung Spezialwissen verlangt. Ich würde einen Pilotauftrag deshalb an der vollständig geprüften und übergebenen Seite bewerten, nicht an der Geschwindigkeit der ersten Generierung.

MCP macht diese Form der Prozessautomatisierung zugänglicher: Designinformationen und Website-Werkzeuge können in einem Arbeitsablauf zusammenkommen. Der eigene fachliche Beitrag liegt darin, den Auftrag sinnvoll zu begrenzen, die Übersetzung zu beurteilen und ein Ergebnis zu hinterlassen, mit dem das Unternehmen weiterarbeiten kann.