UI-Design mit Codex: So geht’s.
Codex kann App-Screens und Webseiten nicht nur programmieren, sondern auch gestalten. Der Trick: Behandle Codex wie einen Designer, den du briefst, nicht wie einen Knopf, den du drückst. Gib Kontext, frag nach Optionen und gib Feedback, mit dem Codex etwas anfangen kann.
Aktualisiert am 1. November 2026 · 8 Min. Lesezeit
Was Codex im UI-Design kann
Codex ist der Coding-Agent von OpenAI. Er liest und schreibt Dateien und führt Befehle in deinem Projekt aus. Für UI-Arbeit heißt das, Codex kann:
- Screens als HTML und CSS schreiben. Eine eigenständige HTML-Datei ist der schnellste Weg zu einem realistischen, klickbaren Mockup, das sich in jedem Browser öffnen lässt.
- Mit Bildern arbeiten. Häng einen Screenshot, eine Skizze oder eine Referenz an, die dir gefällt, und bitte Codex, Layout oder Stimmung aufzugreifen.
- Auf Zuruf überarbeiten. „Mach die Karten weicher“ oder „Zieh die Abstände enger“ reicht, wenn Codex die Datei sieht, die es selbst geschrieben hat.
- Das Ergebnis in deine Codebasis übernehmen. Steht eine Richtung fest, baut derselbe Agent sie mit deinem Framework und deinen Komponenten nach.
Was Codex allein nicht bietet, ist ein Ort, an dem du mehrere Designs gleichzeitig siehst. Jede HTML-Datei öffnet sich in einem eigenen Tab, und das macht den Vergleich von Richtungen mühsam. Genau deshalb haben wir Codex Design gebaut, ein Canvas-Plugin für Codex. Du kannst dieser Anleitung mit oder ohne Plugin folgen.
Schritt 1: Ein Design-Briefing schreiben
Vage Anfragen liefern generische Ergebnisse. Ein gutes Briefing beantwortet fünf Fragen: Was ist das Produkt, wer nutzt es, welche Screens brauchst du, wie soll es sich anfühlen, und welche Vorgaben gibt es, etwa Bildschirmgröße, Markenfarben oder Schriften.
Gestalte den Startscreen einer Kaffee-Abo-App namens Ember & Bean. Die Nutzer brühen schon zu Hause und wollen alle zwei Wochen eine neue Single-Origin-Packung. Der Startscreen zeigt die nächste Lieferung, zwei für sie ausgewählte Röstungen und einen kurzen Brühtipp. Mach daraus einen mobilen Screen in 390×844 als eine eigenständige HTML-Datei mit Inline-CSS. Verwende Systemschriften. Keine externen Bilder: Zeichne die Kaffeepackungen mit CSS.
Die Bitte um eine einzige eigenständige Datei ist wichtig. So bleibt jeder Screen portabel, schnell zu überarbeiten und leicht in der Vorschau anzusehen.
Schritt 2: Nach mehreren Richtungen fragen, nicht nach einer
Das erste Design ist selten das beste. Frag nach drei Richtungen, die sich bewusst unterscheiden. Dann wählst du zwischen echten Alternativen statt zwischen Varianten derselben Idee.
Erstelle drei Richtungen für diesen Screen, jede in einer eigenen Datei: A – warm und editorial, mit einer Serifen-Überschrift B – kräftig und dunkel, mit einer einzigen leuchtenden Akzentfarbe C – weich und ruhig, mit abgerundeten Karten und viel Luft Lass den Inhalt identisch, damit wir nur den visuellen Stil vergleichen.
Schritt 3: Die Designs nebeneinander prüfen
Stell die Richtungen nebeneinander, bevor du sie bewertest. Unterschiede in Hierarchie, Dichte und Tonalität erkennst du auf einen Blick viel leichter als Tab für Tab.
- Ohne Plugin: Öffne jede HTML-Datei im Browser oder bitte Codex, eine Vergleichsseite zu bauen, die alle drei Screens in einer Reihe einbettet.
- Mit Codex Design: Bitte Codex, die Screens auf ein Canvas zu legen. Sie erscheinen nebeneinander als Live-HTML, und du kannst Referenzbilder danebenlegen. Installiere Codex Design mit einem einzigen Prompt, um es auszuprobieren.
Wähle eine Richtung oder benenne, was dir an welcher gefällt: „Die Lieferkarte aus B mit den ruhigeren Farben aus C“ ist ein völlig brauchbares nächstes Briefing.
Schritt 4: Mit konkretem Feedback verfeinern
Codex reagiert am besten auf Feedback, das ein Element und eine Änderung nennt. Vergleiche diese beiden Anfragen:
- Schwach: „Mach es schöner.“
- Stark: „Vergrößere die Begrüßung auf 32px, reduziere das Padding der Karten auf 16px und mach den Lieferfortschritt zum Ersten, was man sieht.“
Verfeinere Richtung C: - Mach die Begrüßung größer und das Datum kleiner. - Zeig den Lieferfortschritt vor den Röstungsempfehlungen. - Verwende ein einziges Akzentgrün, und zwar nur für aktive Zustände. - Lass alles andere unverändert.
„Lass alles andere unverändert“ lohnt sich bei fast jeder Überarbeitung. Damit verhinderst du, dass der Agent Teile neu gestaltet, mit denen du schon zufrieden warst.
Schritt 5: Details von Hand feinjustieren
Manche Änderungen sind schneller gemacht als beschrieben: eine Schriftgröße minimal anpassen, drei Abstufungen einer Farbe ausprobieren oder das Padding um ein paar Pixel verschieben. Bearbeite das HTML direkt, oder wähle mit Codex Design ein Element auf dem Canvas aus und ändere Schrift, Farbe und Abstände im Eigenschaften-Panel. Codex sieht die aktualisierte Datei, sobald du die nächste Änderung anfragst.
Schritt 6: Das Design in Produktionscode umsetzen
Ein Mockup ist eine Spezifikation, nicht der finale Code. Ist eine Richtung abgenommen, bitte Codex, sie in deiner App nachzubauen:
Setz den abgenommenen Startscreen in unserer React-Native-App um. Verwende unsere bestehenden Komponenten Button und Card und die Farben aus theme.ts. Halte dich bei Layout und Abständen an das Mockup in asset/coffee-home-soft.html.
Tipps für bessere Ergebnisse
- Gib echte Größen an. 390×844 für ein Smartphone, 1440×900 für eine Desktop-Seite. Ohne diese Angaben gerät das Layout ins Rutschen.
- Verwende echte Inhalte. Plausible Namen, Preise und Daten decken Layoutprobleme auf, die „Lorem ipsum“ versteckt.
- Zeigen statt nur beschreiben. Ein Referenz-Screenshot vermittelt einen Stil schneller als ein Absatz voller Adjektive.
- Benenne deine Tokens. Wenn du Markenfarben, Schriften oder eine Abstandsskala hast, schreib sie ins Briefing, damit jede Richtung sie nutzt.
- Ein Screen pro Datei. So bleibt jede Überarbeitung klein und leicht zu prüfen.
Häufige Fragen
Kann Codex wirklich UIs gestalten oder nur Code schreiben?
Beides. Codex schreibt das HTML und CSS, aus dem ein Screen besteht, und kann deshalb komplette visuelle Designs erstellen. Die Qualität hängt vom Briefing ab und davon, wie konkret dein Feedback ist.
Brauche ich noch Figma?
Nicht, um Richtungen zu erkunden und zu testen. Viele Teams behalten Figma für gemeinsame Designsysteme und die Übergabe. HTML-Mockups haben einen Vorteil: Sie sind schon Code.
Brauche ich ein Plugin, um mit Codex zu gestalten?
Nein. Alles in dieser Anleitung funktioniert mit einfachen HTML-Dateien. Ein Canvas-Plugin wie Codex Design macht es schneller, mehrere Screens zu vergleichen und zu verfeinern.