UI-Design mit ChatGPT: So geht’s.
ChatGPT bringt eine UI von der groben Idee bis zum funktionierenden Screen, aber jeder Schritt gelingt an einer anderen Stelle am besten. Nutze Chat zum Nachdenken, die Bildgenerierung, um den Look zu erkunden, und Codex, um echte Screens zu bauen, die du öffnen, vergleichen und ausliefern kannst.
Aktualisiert am 2. November 2026 · 7 Min. Lesezeit
Die kurze Antwort
Ja, ChatGPT kann die UI einer App oder Website gestalten. Wähle den Modus, der zum jeweiligen Schritt passt:
| Schritt | Am besten in ChatGPT | Was du bekommst |
|---|---|---|
| Die Idee formen | Chat | Ein Design-Briefing, eine Screen-Liste und einen User Flow |
| Den Look erkunden | Bildgenerierung | Mockup-Bilder einiger visueller Richtungen |
| Echte Screens bauen | Codex | HTML-Dateien, die du öffnen, testen und bearbeiten kannst |
| Vergleichen und verfeinern | Codex mit einem Canvas | Mehrere Screens nebeneinander, schnell überarbeitet |
| Ausliefern | Codex in deiner Codebasis | Das gewählte Design in deinem Framework |
Chat und Work eignen sich gut zum Nachdenken und für Dokumente. Codex ist der Modus für Softwarearbeit: Er liest und schreibt Dateien in deinem Projekt, und genau das macht aus einem Design etwas Echtes. In der ChatGPT-Desktop-App wählst du Codex in der Produktauswahl.
Schritt 1: Die Idee im Chat formen
Fang mit einer Unterhaltung an, nicht mit einem Design. Bitte ChatGPT, aus einer groben Idee ein Briefing zu machen: für wen das Produkt ist, welche Screens es braucht und was jeder Screen zeigen muss.
Ich gestalte eine Habit-Tracking-App für Menschen, die mehr lesen wollen. Hilf mir, ein einseitiges Design-Briefing zu schreiben: Zielgruppe, die fünf wichtigsten Screens, was jeder Screen zeigt, und drei mögliche visuelle Stile mit je einem Satz. Stell mir vorher bis zu drei Fragen, falls etwas unklar ist.
Heb das Briefing auf. Du fügst es in jeden späteren Schritt ein, damit jeder vom selben Kontext ausgeht.
Schritt 2: Den Look mit Bildern erkunden
Bevor jemand Code schreibt, sind Mockup-Bilder ein günstiger Weg, einen Stil zu sehen. Das Bildmodell von ChatGPT erzeugt Interface-Bilder mit gut lesbarem Text, und die neueste Version, GPT Image 2.6, bringt Referenzbilder, GIFs und SVG-Export mit. Im Chat bittest du einfach um ein Bild. In Codex schreibst du $imagegen in deinen Prompt, um den Skill zur Bildgenerierung direkt aufzurufen.
$imagegen Erstelle drei Mockup-Bilder des Startscreens aus diesem Briefing, eines pro visuellem Stil. iPhone-Screen, 390×844, realistische UI mit echt wirkenden Texten und Zahlen, kein Gerätrahmen. Halte den Inhalt in allen drei gleich, damit sich nur der Stil ändert.
Betrachte die Bilder als Moodboards, nicht als Spezifikation. Kleine Schrift und exakte Abstände musst du in generierten Bildern weiterhin prüfen. In Codex verbraucht die Bildgenerierung außerdem drei- bis fünfmal so viel von deinen Nutzungslimits wie ein normaler Durchgang. Erkunde also mit ein paar Bildern statt mit Dutzenden.
Schritt 3: Echte Screens mit Codex bauen
Ein Bild zeigt, wie ein Screen aussehen könnte. Eine HTML-Datei ist ein Screen, den du anklicken, in der Größe ändern und Zeile für Zeile anpassen kannst. Wechsle zu Codex, öffne einen Projektordner und lass dir die Screens als Code bauen:
Baue auf Basis des angehängten Briefings und des Mockup-Bilds, das ich ausgewählt habe, den Startscreen als eine eigenständige HTML-Datei, 390×844, mit Inline-CSS und Systemschriften. Erstelle dann zwei alternative Richtungen in separaten Dateien mit demselben Inhalt: eine kräftiger, eine ruhiger.
Häng das Mockup-Bild an, das dir gefallen hat, damit Codex Layout und Stimmung aufgreifen kann. Eine eigenständige Datei pro Screen hält jede Version portabel und leicht zu überarbeiten.
Schritt 4: Die Richtungen nebeneinander vergleichen
Drei Designs Tab für Tab zu beurteilen, ist mühsam. Leg sie nebeneinander:
- Ohne Plugin: Bitte Codex, eine einzelne Vergleichsseite zu bauen, die alle drei Screens in einer Reihe zeigt.
- Mit einem Canvas-Plugin: Codex Design erweitert Codex um ein Canvas, auf dem Screens als Live-HTML nebeneinander erscheinen, neben deinen Referenzbildern. Installiere es mit einem einzigen Prompt.
Wähle dann eine Richtung oder kombiniere die Teile, die dir gefallen: „Der Header der kräftigen Version mit den Karten der ruhigen Version“ ist eine gute nächste Anweisung.
Schritt 5: Mit konkretem Feedback verfeinern
Nenne das Element und die Änderung. Mit „Lass es mehr knallen“ kann der Agent nichts anfangen. Damit schon:
Verfeinere die ruhige Richtung: - Mach den Streak-Zähler zum Ersten, was man sieht. - Reduziere das Padding der Karten auf 16px und verwende eine einzige Akzentfarbe für aktive Zustände. - Lass alles andere unverändert.
Änderungen, die schneller gemacht als beschrieben sind, etwa eine Schriftgröße oder ein Farbton, nimmst du direkt im HTML vor. Oder du wählst das Element auf dem Codex-Design-Canvas aus und passt es im Eigenschaften-Panel an.
Schritt 6: Das Design in Produktionscode umsetzen
Ist eine Richtung abgenommen, bitte Codex, sie in deiner echten App nachzubauen, mit deinem Framework, deinen Komponenten und Farben. Das HTML-Mockup wird zur Spezifikation:
Setz den abgenommenen Startscreen in unserer SwiftUI-App um. Halte dich bei Layout und Abständen an home-calm.html, verwende die Farben aus Theme.swift und nutze unsere bestehende Card-Komponente.
Tipps für bessere Ergebnisse
- Gib echte Größen an. 390×844 für ein Smartphone, 1440×900 für eine Desktop-Seite.
- Verwende echte Inhalte. Plausible Namen, Zahlen und Daten decken Layoutprobleme auf, die Platzhaltertext versteckt.
- Frag nach Optionen. Drei bewusst unterschiedliche Richtungen sind besser als zehn kleine Varianten einer einzigen.
- Ergänze einen Design-Skill. Skills wie Taste Skill geben Codex eine klarere Haltung zu Typografie und Layout. Siehe die besten Codex-Skills für UI-Design.
Häufige Fragen
Kann ChatGPT eine App für mich gestalten?
Es kann die Screens gestalten und bauen. Chat hilft dir beim Planen, die Bildgenerierung zeigt, wie sie aussehen könnten, und Codex schreibt sie als funktionierenden Code. Die Entscheidungen triffst trotzdem du: welche Richtung, was sich ändern soll und wann es fertig ist.
Gibt es ein UI-Design-Plugin für ChatGPT?
Ja. Plugins funktionieren in der ChatGPT-Desktop-App in Chat, Work und Codex sowie in der Codex CLI. Codex Design ist ein UI-Design-Plugin, das Codex um ein visuelles Canvas erweitert. Im Plugin-Verzeichnis von OpenAI gibt es außerdem ein Figma-Plugin für Teams, die in Figma arbeiten.
Soll ich für UI-Design ChatGPT oder Codex nutzen?
Beides ist ChatGPT. Nutze Chat für Ideen und Briefings und wechsle zu Codex, sobald du echte Dateien willst: Screens, die du öffnen, vergleichen, bearbeiten und in deine Codebasis übernehmen kannst.