Design & KI

KI im UX/UI-Design: Was drei Bezahltools wirklich liefern, im direkten Test

Wir haben denselben Prompt, dieselbe Aufgabe und dasselbe Designsystem durch Figma Agent, Claude Design und UX Pilot geschickt. Eine ehrliche Bestandsaufnahme aus der Praxis: was heute wirklich Zeit spart und wo noch Handarbeit nötig ist.

Termin vereinbaren

Einleitung: Zwei Geschwindigkeiten

Wer sich beruflich viel mit KI beschäftigt, bekommt schnell den Eindruck, KI hätte UX/UI-Design längst durchdrungen. Jede Woche neue Tools, neue Workflows, neue "So arbeite ich jetzt mit KI"-Posts. In dieser Bubble wirkt es, als sei die Frage "Wo hilft KI im Design-Prozess?" längst beantwortet.

Ein Blick in viele mittelständische Unternehmen zeigt ein anderes Bild. Dort experimentieren einzelne Personen vielleicht mit ChatGPT für erste Texte, aber ein durchdachter, teamweiter Einsatz von KI in UX/UI-Prozessen ist die Ausnahme, nicht die Norm. Es fehlt an Zeit, an Orientierung und vor allem an handfester Erfahrung, was in der Praxis wirklich funktioniert.

Genau diese Lücke wollen wir mit einem konkreten Test schließen. Statt drei Tools abstrakt zu vergleichen, haben wir denselben Prompt, dieselbe Aufgabe und dasselbe Designsystem, unser echtes InvoiceSweep-CI, durch drei kostenpflichtige KI-Design-Tools geschickt und dokumentiert, was dabei herauskommt: was heute wirklich Zeit spart, und wo noch Handarbeit nötig ist.

Unser Anspruch: ein fertiges Figma-Designsystem, keine Insel-Lösung

Bevor wir zu den Ergebnissen kommen, ein wichtiger Punkt zu unserer Methodik. Unser Ziel war nicht "irgendein hübscher Screen", sondern ein Ergebnis, das wir in Figma für die Weiterentwicklung nutzen können, mit echten Komponenten, Farb- und Textstilen, aus denen ein Designsystem wachsen kann.

Warum reicht es nicht, den Output einfach im jeweiligen Tool zu lassen und direkt an die Entwicklung zu übergeben? Drei Gründe:

Drei Gründe, warum der reine Tool-Output für ein weiterentwickelbares Designsystem nicht reicht.

Wichtig dabei: Das gilt vor allem, wenn ein Produkt langfristig im Team weiterentwickelt wird. Für andere Anwendungsfälle sieht die Rechnung anders aus, dazu später mehr im Fazit.

Unsere Vorgehensweise

Schritt 0, Designsystem und CI bereitstellen. Bevor der erste Prompt geschrieben wird, müssen Design-Specs, Produktausrichtung und Feature-Beschreibung schriftlich vorliegen, das fließt direkt in den Prompt ein. Bei uns: die bestehenden InvoiceSweep-Spezifikationen (Farbwelt, Typografie, Produktlogik).

Schritt 1, einen geeigneten Prompt schreiben. Das ist der zentrale Hebel der gesamten Case Study: Ohne guten Prompt kein guter Output, unabhängig vom Tool. Unser Prompt war als strukturiertes Briefing aufgebaut: Produktkontext, gefolgt von der Designsystem-Referenz, gefolgt von einer sehr konkreten Anforderung inklusive Screen-Reihenfolge und Lieferumfang. Ein Ausschnitt aus dem Lieferumfang-Abschnitt, damit ihr eine Idee bekommt, wie konkret das war:

"15) LIEFERUMFANG
a) Ein Style-Sheet: Farben, Typografie, Abstände, Radien, Schatten, Icons, als benannte Variablen/Styles, exakt mit den Namen aus Abschnitt 4.
b) Das komplette Komponenten-Kit aus Abschnitt 6 mit allen Zuständen.
c) Alle Flächen aus Abschnitt 10, je in Desktop (1440) und Mobil (390).
d) Für die drei Kernabläufe je eine Ablauf-Strecke als zusammenhängende Bildfolge.
e) Eine kurze Begründung je Ablauf: welche Entscheidung Mental Load senkt.
Beginne mit a) und b), zeige sie zur Freigabe, und entwirf erst danach die Flächen. Wenn dir Informationen fehlen, triff eine begründete Annahme im Sinne der Abschnitte 3 und 9 und markiere sie, frage nicht nach."

Insgesamt sollten die Tools 16 verschiedene Screens generieren, von Anmeldung & Konto über das Dashboard bis zum Beleg-Abgleich zwischen Bank und Rechnung, dazu drei komplette Kernabläufe als zusammenhängende Bildfolgen (etwa: Registrieren, Erste Schritte, Postfach verbinden, Lexware verbinden, erster Lauf). Diese Präzision war kein Zufall: Je konkreter die Vorgabe, desto vergleichbarer die Ergebnisse zwischen den Tools.

Schritt 2, Prompt in die Tools eingeben.

Schritt 3, Ergebnisse sichten, bewerten, ggfs. nachjustieren.

Schritt 4, Import der Ergebnisse in Figma.

So sieht das in der Praxis aus

Ein Detail aus unserem Test zeigt gut, wie unterschiedlich die Tools mit Nachforderungen umgehen: Beim ursprünglichen Prompt hatten wir explizit geschrieben, bei fehlenden Informationen eine begründete Annahme zu treffen und zu markieren, statt nachzufragen, und alle drei Tools hielten sich in diesem ersten Durchlauf daran.

Dieselbe Aufgabe, drei Ergebnisse: die generierten Start-Screens von Figma Agent, Claude Design und UX Pilot.

Interessant wurde es später, als wir mit Folgeanfragen nacharbeiten mussten, etwa um vergessene Elemente nachzufordern oder Claude Design zu bitten, die zunächst gelieferten Module zu fertigen Desktop-Screens zusammenzubauen. Genau in diesen Momenten stellte Claude Design gezielte Rückfragen, bevor es lieferte, statt einfach loszulegen. Das war kein Abweichen vom ursprünglichen Prompt, sondern ein Verhalten, das erst bei der iterativen Nacharbeit auftauchte. In der Praxis war das Ergebnis danach spürbar treffsicherer, auch wenn der Prozess dadurch einen Schritt länger dauerte. Für Designer:innen heißt das: Der erste Durchlauf läuft bei allen Tools weitgehend autonom, aber sobald man nachjustiert, lohnt es sich, auf Rückfragen der KI vorbereitet zu sein, statt einen linearen Prozess zu erwarten.

Die getesteten Tools

Getestet haben wir drei kostenpflichtige Tools, damit die Ergebnisse vergleichbar sind:

Die drei getesteten Tools im Überblick: Funktionsprinzip und Preis pro Monat zum Zeitpunkt des Tests.

Ein Wort zur Einrichtung: Alle drei Tools waren gleichermaßen einfach zu bedienen. Die Kommunikation läuft überall per Chat-Eingabe, und der jeweilige Output war in allen drei Fällen sofort klar erkennbar. Eine technische Einstiegshürde gab es bei keinem der Tools, das ist selbst eine kleine, aber relevante Erkenntnis: Wer heute mit KI-UI-Generierung starten will, muss keine steile Lernkurve einplanen.

Beobachtungen im Tool-Vergleich

Figma Agent

Stärken: Figma Agent kommuniziert transparent, im Chat beschreibt es laufend, woran es gerade arbeitet. Ein klarer Pluspunkt: Es hält sich exakt an die im Briefing vorgegebene Screen-Reihenfolge, im Gegensatz zu den anderen beiden Tools. Nach rund 9 Minuten standen vier Stylesheets mit allen wichtigen UI-Elementen, inklusive Text-Styles und Shadows, direkt in Figma angelegt, kein Import-Umweg nötig.

Herausforderungen: Die neu angelegten UI-Elemente sind technisch gesehen keine echten Figma-Komponenten und teils etwas buggy (Ebenen überlagern sich, Auto-Layout an manchen Stellen kaputt). Color Styles mussten wir nachträglich manuell anfordern, die kamen im ersten Anlauf nicht mit. Generierter Content landet außerdem immer auf der Page, in der man sich gerade befindet, statt auf der neu angelegten, das erfordert manuelles Umsortieren. Auch die Konsistenz über mehrere Screens hinweg ist nicht durchgehend gegeben. Unser Learning: jeden Screen direkt nach der Generierung prüfen und einsortieren, statt am Ende alles auf einmal aufzuräumen.

Claude Design

Stärken: Claude Design startet direkt mit dem Bau der Stylesheets und liefert nach etwa 5 Minuten sehr saubere Ergebnisse, inklusive markierter Annahmen, die wir manuell prüfen sollten. Der große Unterschied zu den anderen Tools: Claude Design begründet für jedes Paket, warum es welche Entscheidung getroffen hat, das schafft eine Nachvollziehbarkeit, die uns bei den anderen beiden Tools gefehlt hat. Auch der Lieferumfang war im Vergleich am detailliertesten. Der Import per html.to.design-Plugin funktionierte reibungslos: Das Plugin legt Styles und Variables aus dem Designsystem automatisch an und verknüpft nachfolgende Imports direkt damit, jeder weitere Screen bekommt so automatisch die richtigen Farben und Schriften zugeordnet. Und, siehe oben: Bei Nachforderungen fragte das Tool gezielt nach, statt einfach zu raten.

Herausforderungen: Ein Onboarding oder "erste Schritte"-Flow wie bei Figma fehlt hier. Während Figma Agent und UX Pilot von sich aus zuverlässig komplette Desktop-Screens liefern, arbeitet Claude Design zunächst modular, dafür aber inhaltlich umfangreicher als die beiden anderen Tools. Es brauchte eine nachgelagerte, extra Aufforderung, alle Einzelteile zu einem fertigen Produkt in Form von Desktop- und Mobile-Screens zusammenzusetzen. Das hat dann aber zuverlässig funktioniert, und am Ende stand ein gut strukturiertes, sauberes Ergebnis. Für UX-Designer:innen zunächst ein anderer Denkansatz, weil man eher in Screens denkt als in Bausteinen.

UX Pilot

Stärken: UX Pilot generiert schnell und sauber. Ein echtes Plus: UX Pilot legt mehrere Versionen pro Screen an, durch die man sich übersichtlich durchklicken kann, und die generierten Screens sind scrollbar. Design-Entscheidungen werden sowohl im Chat als auch direkt auf dem jeweiligen Screen dokumentiert. Manche Screens enthielten sogar kleine Icon-Animationen.

Herausforderungen: UX Pilot hält sich nicht an die vorgegebene Screen-Reihenfolge aus dem Briefing, teilweise mussten fehlende Screens manuell nachgefordert werden. Insgesamt lieferte UX Pilot deutlich weniger Screens als die beiden anderen Tools, der volle Lieferumfang wurde nicht erreicht. Beim Figma-Export zeigten sich mehrere Reibungspunkte: Mobile Screens werden in Desktop-Größe importiert, nur die erste Version jedes Screens kommt mit, und Animationen werden beim Import statisch. Auch die Style-Übernahme per JSON-Datei funktioniert nur teilweise, Figma-Komponenten müssen daraus manuell gebaut und auf jedem Screen einzeln ersetzt werden, was bei größeren Projekten schnell mühsam wird. Zusätzlich waren beim Plugin-Import die Schriftschnitte teilweise falsch (Light statt Bold).

Für welche Projektgröße eignet sich was?

Eine Frage, die uns während des Tests immer wieder beschäftigt hat: Reicht das für ein einmaliges Design, oder auch für die langfristige Weiterentwicklung eines Produkts?

Eignung für große, langfristig angelegte Projektumfänge – unsere Einschätzung aus dem Test.

UX Pilot eignet sich unserer Einschätzung nach am besten für schnelle Präsentationen, Iterationen und Mockups, also eher für One-off-Anwendungen. Export und Import funktionieren spürbar schlechter als bei den anderen beiden Tools, und der Lieferumfang wurde in unserem Test nicht vollständig erfüllt.

Figma Agent und Claude Design eignen sich dagegen auch für größere, langfristig angelegte Projektumfänge, mit einem wichtigen Tipp: Lieber nicht alles auf einmal generieren lassen, sondern häppchenweise, mit Zwischenprüfung nach jedem Paket. Genau das hat in unserem Test auch am besten funktioniert (siehe "a) und b) zeigen, dann erst weiter" oben im Prompt-Ausschnitt).

Das Gesamtbild: Zeitersparnis trifft auf Nacharbeit

Rein visuell liefern alle drei Tools solide, vergleichbare Ergebnisse. Und der Produktivitätsgewinn ist real, nicht nur eine Marketing-Behauptung: Für spontane Stakeholder-Abstimmungen, Pitches oder um eine Idee schnell zu visualisieren, sparen alle drei Tools enorm Zeit, Aufgaben, die früher Tage gedauert haben, waren hier in Minuten sichtbar. Auch das automatische Anlegen von Styles und Variablen nimmt einem einen großen, mühsamen Arbeitsschritt ab.

Die eigentlichen Unterschiede zeigen sich erst bei Lieferumfang, Struktur, Nachvollziehbarkeit der Entscheidungen und, entscheidend für unseren Anspruch, der Qualität des Figma-Imports.

Ein Manko teilen sich alle drei Tools: Keines erstellt native Figma-Komponenten. Ein echtes, wiederverwendbares Designsystem muss in jedem Fall von Hand angelegt werden, bestehende UI-Elemente müssen händisch durch Figma-Komponenten ersetzt werden, auf jedem einzelnen Screen. Genau hier beginnt die eigentliche Arbeit der UX-Designer:innen, wenn das Ziel ein produktionsreifes, weiterentwickelbares Designsystem ist.

(Randnotiz: ChatGPT haben wir bewusst nicht in den Vergleich aufgenommen. Ohne native visuelle Ausgabe liegen seine Stärken eher bei Konzeptarbeit, Informationsarchitektur und UX-Logik, nicht bei der Generierung von UI-Screens.)

Ausblick: Wohin entwickeln sich KI-Design-Tools?

Die Geschwindigkeit, mit der sich dieser Bereich entwickelt, ist selbst für uns bemerkenswert. Was sich aus aktuellen Branchenbeobachtungen und unserer eigenen Erfahrung ableiten lässt:

Design rückt näher an die Umsetzung heran. Mehrere aktuelle Analysen beschreiben einen Rollenwandel: Designer:innen werden zunehmend zu Orchestrator:innen von Prozessen statt reinen Produzent:innen von Mockups. Wer heute in mehreren Disziplinen (UX, Visual Design, Frontend-Grundlagen, Marken- und Produktverständnis) mithalten kann, wird wertvoller als reine Spezialist:innen für ein einzelnes Gewerk.

Die Grundlagen werden wichtiger, nicht unwichtiger. Typografie, Layout, Hierarchie, Markenkonsistenz, Barrierefreiheit und Storytelling entscheiden weiterhin darüber, ob ein Ergebnis hochwertig wirkt oder wie generischer KI-Output. Die Tools senken die Einstiegshürde für die Erstellung, nicht für die Qualitätsbeurteilung.

Produktivität steigt vor allem in der Konzeptphase. In unserem eigenen Test lag der größte Zeitgewinn nicht am Ende des Prozesses, sondern ganz am Anfang: von der leeren Fläche zur ersten diskutierbaren Version. Diese Phase, die früher Tage dauern konnte, ist mit den getesteten Tools auf Minuten bis Stunden geschrumpft. Die Zeit, die danach für Qualitätssicherung, Konsistenzprüfung und Komponentenaufbau nötig ist, hat sich dagegen kaum verändert.

Human in the Loop wird zum Standardmodus, nicht zur Ausnahme. Der Mensch überwacht und verfeinert KI-Entscheidungen, statt sie komplett zu übernehmen oder komplett zu ignorieren. Für UX-Designer:innen im Mittelstand heißt das ganz praktisch: Jetzt ist ein guter Zeitpunkt, mit echten Projekten zu experimentieren und Prompt-Erfahrung aufzubauen, denn genau diese Erfahrung wird zum Differenzierungsfaktor, nicht die Tools selbst.

Fazit

Kein Tool im Test liefert am Ende ein fertiges, produktionsreifes Figma-Designsystem ganz ohne Nacharbeit, bei manchen Tools ist mehr nötig, bei anderen weniger. Wer als UX-Designer:in mit KI arbeitet, verschiebt die eigene Arbeit dadurch nicht weg, sondern hin: von der reinen Screen-Erstellung zu Qualitätssicherung, Komponenten-Aufbau und der Entscheidung, welchem Tool-Output man in welchem Umfang vertrauen kann.

Wichtig ist dabei aber: Das gilt vor allem, wenn ein Team langfristig im Designsystem weiterarbeiten will. Nicht jeder Anwendungsfall braucht diesen letzten Schritt. Wenn ihr schnell eine visuelle Grundlage für eine Entscheidung, eine Stakeholder-Abstimmung oder einen ersten Eindruck braucht, kann der reine Tool-Output bereits vollkommen ausreichen, ganz ohne Import nach Figma und ohne Nacharbeit am Designsystem. Die Frage ist also weniger "Ist das Tool gut genug?", sondern "Was will ich mit dem Ergebnis eigentlich tun?"

In Teil 2 dieser Reihe gehen wir tiefer in jedes einzelne Tool: mit mehr Detail zu Prompt-Varianten, konkreten Screen-Beispielen und Empfehlungen, wofür sich welches Tool am besten eignet.