Es sah immer sehr cartoonhaft aus und war somit immer unbrauchbar. Schriften waren kaum lesbar, haben halluziniert und es wirkte eher wie ein Skribble oder Draft. Sprich, nicht brauchbar.

Letzte Woche hat OpenAI jedoch ein größeres Update herausgebracht. Durch einen Medium Artikel wurde ich auf das Thema UI mit ChatGPT aufmerksam.

Ich konnte auf der Grundlage des Prompts des Artikels viel viel bessere UI-Mockups erstellen wie die damaligen Cartoon-Ergebnisse. Ich konnte sogar mehrere Designoptionen für meine Bedürfnisse erstellen:

In diesem Artikel zeige ich die Experimente, die ich mit ChatGPT durchgeführt habe, die Prompts, die ich verwendet habe, und einige Überraschungen und Erkenntnisse, die ich dabei gewonnen habe.

Der Kontext

OpenAI hat bekannt gegeben, dass man in ChatGPT jetzt qualitativ hochwertige Bilder mit GPT-4o anstelle des älteren DALL-E-Modells erzeugen kann.

GPT-4o ist besser in der Lage, Anweisungen zu befolgen, und leistet bessere Arbeit bei der Darstellung von Text in Bildern.

Anhand des Medium Artikels wurde ich auf ChatGPT UI aufmerksam und dachte mir:

„Was kann man alles mit ChatGPT UI machen?“

Meine ChatGPT UI Experimente

Erstellung eines detaillierten Prompts

Ich habe ChatGPT verwendet, um eine detaillierten Prompt für die gewünschte Benutzeroberfläche/ das UI zu erstellen:

Design ein modernes, sauberes B2B SaaS Dashboard für die Bestellverwaltung.

Zielgruppe: Shop-Betreiber und Lagerpersonal im E-Commerce B2B-Umfeld.

Stil: Minimalistisch, helles Theme, weiche Schatten, abgerundete Kanten, dezente Farben für Statusanzeigen (z.B. Grün für “Completed”, Orange für “Pending”, Blau für “In Progress”).

Hauptkomponenten:

• Seitenleiste (Sidebar): Klare Icons, kleine Labels darunter oder beim Hover, Badge für Benachrichtigungen.

• Top Bar: Unternehmensauswahl-Dropdown, User-Avatar mit Dropdown-Menü.

• Hauptbereich:

• Übersichtskarten (Summary Cards): Metriken wie „Alle Bestellungen“, „Abgebrochene Warenkörbe“, „Retouren“, „Beschädigt“, „Kunden“, „Erledigt“, „Offen“. Mit Icons, kleinem Trendindikator (% hoch/runter).

• Bestellliste (Customer Orders Table):

• Spalten: Kundenname, Bestelldatum, Bestellart, Tracking-ID, Bestellwert, Aktion (Dropdown: Completed / Pending / In Progress), Status (farbige Label).

• Funktionalitäten: Filter, Suche, Bulk-Actions, Export/Share-Button, Pagination.

• Aktionselemente: Primärer Button „Neue Bestellung erstellen“ prominent oben rechts.

Details:

• Einheitliche Abstände und klare Typografie.

• Tooltips bei Icons für bessere Usability.

• Interaktive Filter mit Multi-Select und Reset-Option.

• Responsives Design, skalierbar für Tablets.

Farbschema:

• Hintergrund: #F9FAFB

• Primärfarbe: #4F46E5 (Indigo)

• Akzentfarben für Status:

• “Completed”: #34D399 (Grün)

• “Pending”: #FBBF24 (Orange)

• “In Progress”: #60A5FA (Blau)

Ziel: Ein Dashboard, das sofortigen Überblick über den Bestellstatus gibt, schnelle Interaktion ermöglicht und sich für tägliche Nutzung angenehm anfühlt.

Erstelle das UI als Code, so das ich es direkt in einer GPT live Vorschau sehen kann

Dann habe ich es in ein neues Chat-Fenster in ChatGPT eingefügt und auf das Symbol „Erzeugen“ geklickt.

2. Eine Code-gestützte UI wird generiert

Überraschenderweise öffnete ChatGPT ein zusätzliches Panel auf der rechten Seite und löste damit seine Canvas-Funktion aus. Dann begann ChatGPT, Code zu schreiben für das fiktive B2B SaaS Dashboard Design.

Dann klickte ich auf die Schaltfläche „Vorschau“ in der oberen rechten Ecke.

Eine responsive, codegestützte Benutzeroberfläche wurde erstellt.

Zuerst wusste ich nicht, ob ich den Code von ChatGPT kopieren und auf einer Testumgebung selbst laufen lassen muss. Nach dem ich einen Medium Artikel zu der Erstellung las, hatte ich erst verstanden, dass man den “generieren” Button rechts oben klicken muss. Erst dann, wird der Code von ChatGPT als Live-Vorschau angezeigt.

3. ChatGPT nach einem Mockup fragen

Da ich lediglich ein Bild (ein visuelles Mockup) und keine Code-gestützte Benutzeroberfläche erstellen wollte, bat ich um eine weitere Anforderung, um dies zu korrigieren:

„Erstelle stattdessen ein visuelles Mockup.“

Hier ist das Ergebnis:

Das Ergebnis war überraschend gut, vor allem im Vergleich zu dem, was ChatGPT (DALL-E) zuvor ausgespuckt hatte. Das war wirklich eine enorme Verbesserung. Aber: Es war nicht eins zu eins das UI Design, was ich ursprünglich in Figma hatte und zu einem Prompt geformt hatte. Zudem weichte es auch von der Live-Vorschau ab.

Dennoch, meine Gedanken fingen an zu Sprudeln, was alles möglich ist.

5. Erstellung weiterer UI Designs

Dann wurde ich kreativer... Ich fragte mich, wie es wäre, wenn ich ChatGPT bitten würde, mehrere Designoptionen zu erstellen, die ich in Betracht ziehen könnte. Das wäre noch hilfreicher!

„Was, wenn es keine UI Design inspiration mehr braucht (bei Dribbble, Behance, Pinterest etc.), und ich stattdessen einfach ChatGPT den genauen Kontext und meine individuelle UI-Challenge nennen kann? Egal ob komplexe B2B SaaS Produkte oder B2C Ecommerce Seiten.“

Also schrieb ich:

"Erstelle drei Designoptionen. Verwende denselben Inhalt, aber variiere das Layout, die UI-Elemente und die visuelle Betonung gemäß den folgenden Beschreibungen:
Option 1. Kühn und fesselnd
Option 2. Funktional und schnell
Option 3. Persönlich & warm"

Hier das Ergebnis:

Auch hier war ich von der Verbesserung der Bilderzeugung von GPT-4o positiv überrascht.

Die drei Optionen sehen zwar immer noch recht ähnlich aus, aber wenn man genau hinsieht, gibt es kleine Details - wie das „Suchen“-Symbol, den Social Proof und den Text - die versuchen, jede Version von den anderen zu unterscheiden.

Das Ergebnis könnte allerdings noch verbessert werden. Da zum Beispiel sehr viele Informationen in ein Bild gepackt wurden, hatte ChatGPT Probleme mit der Präzision. Sie werden feststellen, dass ein Teil des Textes unkenntlich/verzerrt wurde.

Komplexe UI B2B SaaS Lösungen mit ChatGPT?

Da es im B2B SaaS Design häufig sehr komplexe, sehr individuelle und besondere Fälle gibt, bei denen es selten gute Beispiele oder “Best Practice” zu finden gibt, wäre ChatGPT doch besonders interessant.

Ich teste also ein komplexeres B2B SaaS Beispiel:

“Erstelle mir ein Prompt für ein B2B SaaS Projektübersicht, welches ein Multi Level Dropdown mit Filter hat. Nutzer möchten in dieser Suche sowohl nach Kunde, Projekt aber auch Bereich suchen und filtern. Die B2B SaaS Projektübersicht soll modern, schlicht und möglichst benutzerfreundlich sein. Die Nutzer haben häufig Schwierigkeiten mit dem Multi Level Dropdown, da es bisher sehr klein und schwer nutzbar war. Der Prompt soll als Vorlage dienen für eine ChatGPT Live Vorschau.”

Das Ergebnis:

Das Ergebnis ist stark! Klar, hier fehlt immer noch sehr viel Kontext zum realen Produkt und man erhält eher eine Komponente, statt einen richtigen Screen mit Navigation, Top Bar etc.

Auch hier könnte man sich erneut mehrere Varianten ausspucken lassen und den Prompt variieren.

Mein Fazit zu ChatGPT UI

Die Fähigkeit von ChatGPT, visuelle UI-Mockups zu erstellen, ist eine große Verbesserung. Es bietet eine viel bessere Präzision wie zuvor und Einhaltung der gewünschten Aufforderungen im Vergleich zum damaligen DALL-E-Modell.

Schwachstellen

Allerdings ist die Geschwindigkeit etwas langsam, und die Genauigkeit könnte noch deutlich verbessert werden. Manchmal bricht das Bild auf halber Strecke ab, es gibt Fehler aus oder generiert nicht, manchmal sind die Ergebnisse zufällig und folgen nicht genau den Anweisungen.

Als ich ChatGPT bat, ein 3D-Mockup auf der Grundlage der Designoptionen zu erstellen, war das Ergebnis ein wenig verzerrt und seltsam - aber mit den nächsten Updates von ChatGPT werden auch diese Fehler mit Sicherheit weniger und die Ergebnisse sauberer.

Ich finde es ein riesiger Sprung und ein großartiges Upgrade. Ich bin jetzt in der Lage, Dinge zu generieren, die ich vorher nicht konnte.

Und das alles passiert direkt im ChatGPT-Chatfenster. Das finde ich sehr praktisch und conventient.

KI und UX – Chance oder Risiko für den Designprozess?

Die Integration von Künstlicher Intelligenz (KI) in den Designprozess wirft nicht nur technische, sondern auch konzeptionelle Fragen auf. Besonders im UX Design für B2B SaaS Plattformen ist es entscheidend, Nutzerbedürfnisse präzise zu analysieren und in intuitive Interfaces zu überführen. Hier können KI-gestützte Tools wie ChatGPT dabei helfen, schnell erste UI-Vorschläge zu generieren – doch echte User Experience entsteht erst durch qualitative Nutzertests, iterative Optimierung und strategische Gestaltung.

UX Designer bleiben daher unverzichtbar – nicht trotz, sondern gerade wegen der neuen Tools. Sie bringen Empathie, Nutzerverständnis und Marken-Know-how mit, das keine KI replizieren kann. Die Rolle verändert sich aber: Designer werden immer mehr zu Kuratoren und Strategen im Umgang mit generativer KI.

Ich denke es ist nur noch eine Frage der Zeit, bis die Tools deutlich stärker miteinander arbeiten. Ein ChatGPT der mit meiner Figma Datei, meiner Kundendatenbank und dem Code des Produkts verknüpft ist, würde auch sehr individuelle und umfangreichere Fragen beantworten und lösen können. Dann brauche ich keine großen Prompts schreiben, Statistiken zur Nutzung auswerten, PDF’s hochladen oder UI Screens reinladen, wenn bereits alles miteinander verknüpft ist. Der Kontext ist dann direkt gegeben und muss nicht aufwendig in ChatGPT reingegossen werden.

Langfristig zeichnet sich eine spannende Entwicklung ab: Die Kombination aus Designsystemen, KI und Automatisierung könnte dazu führen, dass sich Interfaces teilweise selbst generieren und anpassen – je nach Nutzerverhalten, Device oder Zielgruppe. Erste Ansätze sieht man schon heute in No-Code-Tools, die UI-Komponenten auf Basis von Content automatisch anordnen.

Dennoch bleibt die kreative und konzeptionelle Arbeit von Menschen essenziell. Kein KI-System kann bislang echte Markenidentität, emotionale Ansprache oder differenzierte User-Flows vollständig selbst entwickeln. Design wird nicht ersetzt – es wird erweitert.

UI-Design mit ChatGPT 4o: Sind UI/UX Designer jetzt überflüssig?

Ist es für ChatGPT überhaupt möglich, UI zu generieren?

Der Kontext