KI-Design: Figma MCP und das Agenten-Team – Ein neues Zeitalter der Kreation
Figma hat sein MCP-Server-Update veröffentlicht, das nun Designs schreiben kann. Dazu ein Blick auf Google Stitch und ein Konzept für Agenten-Teams.
Als jemand, der seit Jahren die Entwicklungen im Tech-Bereich verfolgt, habe ich schon viele Versprechen bezüglich KI und Design gehört. Oft waren es beeindruckende Demos, die im echten Produktivalltag dann doch nicht hielten, was sie versprachen. Doch was ich in den letzten Tagen bei Figma und Google gesehen habe, lässt mich aufhorchen. Wir stehen meiner Meinung nach am Beginn eines ganz neuen Kapitels im Designprozess.
Figma MCP: Von Read-Only zu kreativer Power
Erinnern wir uns: Figma hatte schon länger einen MCP-Server, der aber in einem reinen Read-Only-Modus arbeitete. Das Szenario war bekannt: Designer oder auch ich selbst erstellten die Mockups, und dann fütterte der Entwickler einem Agenten einen Figma-Link. Der Agent zerlegte die Datei in Ebenen, extrahierte Struktur, Farben, Abstände, Schriftarten und generierte daraus Code, der dem Gezeichneten mehr oder weniger entsprach. Eine gute Hilfe, aber eben passiv.
Gestern nun hat Figma seinen MCP-Server aktualisiert, und das ist eine echte Game-Changer-Nachricht: Er kann jetzt nicht nur lesen, sondern auch selbst Designs erstellen! Und hier reden wir nicht von einer einzelnen Schaltfläche oder einem simplen Bildschirm. Dieser Agent ist in der Lage, eine vollständige Landingpage zu entwerfen oder sogar komplexe UX-Flows über mehrere Bildschirme hinweg aufzubauen. Das Geniale daran: Er tut dies im Rahmen des bestehenden Design-Systems. Er greift auf eure Komponenten, eure Tokens, eure Stile zurück und erstellt daraus ein Layout, das nahtlos als Teil eures Produkts wirkt und nicht wie ein generiertes Relikt aus dem Jahr 2015.
Vor diesem Update waren alle Versuche, Design per KI zu generieren, eher ernüchternd. Die Ergebnisse waren fehlerhaft, visuell veraltet, und die Komponenten stammten nicht aus unserem UI Kit, sondern aus generischen Bibliotheken. Für den produktiven Einsatz war das unbrauchbar, bestenfalls für erste Skizzen. Die Situation hat sich grundlegend geändert. Man schließt sein Design-System (UI Kit) an, und der Agent erstellt Mockups, die tatsächlich brauchbar sind.
Ich persönlich sehe darin einen riesigen Schritt nach vorne, besonders für schnelle Experimente und das Validieren von Hypothesen.
Parallel dazu hat auch Stitch von Google Updates erhalten. Auch hier gibt es neue Funktionen zur Oberflächengenerierung, die sich gut für Brainstorming-Phasen eignen: verschiedene Varianten ausprobieren, unterschiedliche Ansätze für einen Bildschirm betrachten, Ideen schnell visualisieren. Aber es gibt einen fundamentalen Unterschied zwischen Stitch und dem aktualisierten Figma: Stitch generiert einzelne Bildschirme. Es kennt euer Design-System nicht, kann keine verknüpften Flows zwischen Bildschirmen erstellen und arbeitet nicht mit euren Komponenten.
Effektive Nutzung des Figma-Updates
Wie kann man das neue Figma-Update am effektivsten nutzen? Es funktioniert aus Cursor, aus Claude Code und aus jedem Agenten-System, das MCP unterstützt. Egal, welches Tool ihr für Entwicklung oder Design verwendet: Wenn ihr dort einen MCP-Server anschließen könnt, ist Figma dort integrierbar.
Wie richtet man das ein? Die Antwort findet sich in diesem Artikel von Figma selbst: the figa canvas is now open to agents
Man muss den Artikel nicht einmal selbst lesen, sondern kann dem Agenten einfach den Link geben und schreiben: "Richte mir Figma MCP ein." Er wird damit klarkommen.
Es gibt jedoch einen wichtigen Punkt: Neben dem MCP-Server selbst müssen Figma Skills installiert werden – ein Satz von Fähigkeiten für den Agenten. Ohne diese würde der Agent zwar eine Verbindung herstellen, aber eher „dumm“ arbeiten. Die Skills geben ihm das nötige Verständnis, wie er korrekt mit der Figma API umgeht: github.com/figma/mcp-server-guide/tree/main/skills
Nach der Installation ist alles unkompliziert. Man schreibt dem Agenten einen Prompt, zum Beispiel: "Erstelle einen 4-stufigen Onboarding-Flow für eine mobile App." Der Agent geht in Figma, erstellt Frames, platziert Komponenten, füllt Texte ein. Man sieht das Ergebnis direkt in der eigenen Figma-Datei. Das ist das Basisszenario, und es funktioniert bereits hervorragend.
Das Agenten-Team: Ein fortschrittliches Szenario
Für dieses Szenario benötigt man ein Tool, das die Ausführung mehrerer Agenten ermöglicht. Ich nutze hier Claude Code als Beispiel, um die Idee zu veranschaulichen: Man stellt ein Mini-Team aus drei Agenten zusammen, jeder mit einer spezifischen Rolle und voneinander abhängig.
Der erste Agent: Der Designer. Dieser ist der Ausführende. Er erhält die Spezifikation und erstellt die Mockups entsprechend – kreativ und mit den eigenen Komponenten. Steht im Prompt "Registrierungsbildschirm mit drei Feldern und einem Button", dann erstellt er genau das. Seine Aufgabe ist es, eine textuelle Beschreibung schnell und präzise in ein visuelles Design zu übersetzen.
Der zweite Agent: Der UX-Redakteur. Er kommt zum Einsatz, nachdem der Designer seine Arbeit abgeschlossen hat. Seine Aufgabe ist es, alle Texte in den Mockups zu überprüfen und zu optimieren. Dabei hinterlässt er nicht nur Kommentare wie "hier besser umformulieren", sondern nimmt die Überarbeitung selbst vor – gemäß der vorgegebenen redaktionellen Richtlinien und dem Tone of Voice. Alle Buttons, Überschriften, Tooltips, Fehlermeldungen – alles wird in einem einheitlichen Stil angepasst. Das ist eine Aufgabe, die manuell extrem viel Zeit in Anspruch nimmt und oft bis zum letzten Moment aufgeschoben wird.
Der dritte Agent: Der Art Director. Er betrachtet das Endergebnis mit den Augen eines erfahrenen Designers. Er prüft Komposition, Konsistenz und die Einhaltung des Design-Systems. Auch hier kommentiert er nicht, sondern korrigiert selbst. Er verschiebt Elemente, ändert Abstände, richtet aus.
Wenn die Mockups diese drei Stufen durchlaufen haben, erhält man ein Ergebnis, das mehrere Kontrollebenen passiert hat. Die Wahrscheinlichkeit eines groben Fehlers sinkt mit jedem Schritt. Im Grunde ist dies derselbe Prozess wie in einem großen Produktteam, nur ohne die Personalbeschaffung und die wochenlangen Iterationen.
Wer profitiert davon?
- Startups ohne eigenen Designer: Dies ermöglicht es, plötzlich hochwertiges Design zu erstellen, anstatt nur eine provisorische Implementierung "auf dem Knie".
- Teams mit überlasteten Designern: Wenn ein Designer drei Projekte gleichzeitig betreut, nehmen die Agenten ihm die Routine ab. Der Designer kann sich wieder auf das konzentrieren, was er am besten kann: komplexe Interaktionen durchdenken, anstatt Pixel zu verschieben.
Die Time-to-Market wird erheblich verkürzt. Zwischen "Wir haben eine Hypothese" und "Wir haben ein Mockup zum Testen" liegen jetzt Minuten statt Tage. Das ist ein Design-First-Ansatz in seiner reinsten Form.
UX ist kein Kunsthandwerk – Es ist Ingenieurskunst
Und zu guter Letzt, das ist wichtig: UX ist meiner Meinung nach keine kreative Kunst. UX ist eine mechanische Fähigkeit. Wenn wir über das Entwerfen benutzerfreundlicher Schnittstellen sprechen, sprechen wir über eine Reihe von Regeln, Mustern und bewährten Lösungen: die richtigen Größen für Touch-Bereiche, vorhersehbare Navigation, lesbare Typografie, verständliche Elementzustände. Das ist eine Ingenieurdisziplin und keine Kunst. Und genau deshalb bin ich überzeugt, dass Agenten diese Aufgaben hervorragend meistern werden. Wir sind in einer neuen Phase angekommen, in der die Tools reif genug sind, diese Mechanik zu automatisieren.
Probiert es selbst aus!