Codex fürs Design: UI mit OpenAI Codex bauen

Was OpenAI Codex wirklich ist (und was nicht)

Zuerst eine Begriffsklärung, über die fast jeder stolpert, der nach „Codex“ sucht. Das ursprüngliche OpenAI Codex war ein Code-Vervollständigungsmodell von 2021, das den frühen GitHub Copilot antrieb und 2023 eingestellt wurde. Darum geht es auf dieser Seite nicht. Das heutige Codex ist OpenAIs agentisches Coding-Tool, es plant, schreibt, führt aus und verifiziert Code aus Aufgaben in natürlicher Sprache.

Das moderne Codex ist über vier Oberflächen verfügbar: eine Terminal-CLI (in Rust neu geschrieben, Apache-2.0-lizenziert), eine IDE-Erweiterung für VS Code, Cursor und Windsurf, eine Cloud-/Web-Oberfläche für delegierte asynchrone Aufgaben und eine Desktop-App mit eingebautem Browser und Computer Use.

• Standardmodell: Stand Mitte 2026 ist das empfohlene Modell gpt-5.5, wobei gpt-5.4 das Modell ist, das OpenAI ausdrücklich für Frontend und Computer Use trainiert hat.
• Anweisungsdatei: Codex liest eine AGENTS.md-Datei in deinem Projekt (ein toolübergreifender Standard) für Projektregeln, der natürliche Ort, um deine Design-Konventionen zu hinterlegen.
• Sandbox: Es läuft in einer Sandbox auf Kernel-Ebene (standardmäßig workspace-write), sodass ein Agent, der deine UI bearbeitet, nicht aus dem Projekt ausbrechen kann.

• Anbieter: OpenAI
• Zugangsdaten: OpenAI-API-Key (BYOK) oder ChatGPT-Abo (Free / Go / Plus / Pro / Business / Enterprise)
• Lizenz der CLI: Apache-2.0, quelloffen

Warum Codex jetzt gut im Design ist

Anfang 2026 kamen drei Dinge zusammen, die Codex von einem generischen Code-Generator zu einem echten Design-Tool machten.

• Ein frontend-trainiertes Modell: OpenAI brachte GPT-5.4, sein erstes Mainline-Modell, das für Frontend und Computer Use trainiert wurde, mit deutlich besserem Bildverständnis über den gesamten Design-Workflow und stärkerer Selbstverifizierung. Es kann sogar Mood-Boards und visuelle Optionen erzeugen, bevor es sich auf finale Assets festlegt.
• Ein offizielles frontend design skill: Der openai/skills-Katalog enthält ein kuratiertes frontend design skill, das echten Geschmack erzwingt: Layouts ohne Karten, randlose Heros, markenorientierte Hierarchie, zurückhaltende Animationen, höchstens zwei Schriftarten und eine Akzentfarbe, und Codex muss vor dem Bauen eine visuelle These formulieren. Dieses frontend design skill hinzuzufügen ist der schnellste einzelne Hebel, um die Ergebnisse von Codex zu verbessern.
• Browser-Verifizierung: Mit der Playwright-skill öffnet Codex einen echten Browser, stellt auf Breakpoints um und gleicht seinen Output mit der Referenz ab, statt nur zu prüfen, ob der Build durchläuft.

Die Lektion hinter allen dreien: Codex hat standardmäßig keinen Geschmack. Es liefert gutes Design, wenn du ihm Vorgaben machst, ein Designsystem, eine ästhetische skill und konkrete Referenzen. Open Design bündelt genau diese Eingaben, deshalb passen die beiden zusammen (mehr dazu weiter unten).

Codex für Designarbeit einrichten, von null

Hier ist der komplette Weg von einer frischen Maschine zu einem Codex, das UI bauen und verifizieren kann.

Lieber den Ein-Klick-Weg? Lade die Open Design Desktop-App herunter, sie bündelt Codex mit einer kuratierten skill- und Design-System-Bibliothek, sodass du einfach Codex als deinen agent auswählst und ganz ohne CLI-Einrichtung mit dem Designen loslegst. Die folgenden Schritte sind der manuelle Weg, falls du Codex lieber selbst einrichten möchtest.

# 1. Codex CLI installieren
npm install -g @openai/codex
# oder: brew install --cask codex
# oder: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authentifizieren (ChatGPT-Anmeldung empfohlen für höhere Limits)
codex            # dann “Sign in with ChatGPT” wählen

# 3. Projektkontext generieren
codex            # im Projekt /init ausführen, um AGENTS.md zu erstellen

# 4. Offizielles Frontend-Skill hinzufügen, dann Codex neu starten
# (in der Codex-App) $skill-installer frontend-skill

# 5. Figma-MCP-Server anbinden (optional, für Design-Handoff)
codex mcp add figma --url https://mcp.figma.com/mcp

• Hinterlege deine Designregeln: Schreibe deine tokens, Primitive und Konventionen in AGENTS.md oder eine DESIGN.md und verweise Codex darauf, damit der Output zu einer Marke passt, statt zu einem generischen Look zurückzufallen.
• Wähle die richtige Reasoning-Stufe: OpenAI weist darauf hin, dass niedrige bis mittlere Reasoning-Stufen oft stärkere Frontend-Ergebnisse liefern als die höchste Einstellung.

Der Screenshot-zu-UI-Workflow

Die wirkungsvollste Design-Schleife mit Codex besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt. OpenAIs eigene Anleitung lässt sich auf fünf Schritte verdichten.

1. Beginne mit den klarsten visuellen Referenzen, die du hast, und nimm mehrere Zustände auf (Desktop und Mobile, Hover, leer, ladend), nicht nur einen Hero-Shot.
2. Sei im Prompt konkret; vage Prompts erzeugen generische UI.
3. Bereite ein Designsystem vor und sag Codex, wo die tokens und kanonischen Primitive liegen.
4. Aktiviere die interaktive Playwright-skill, damit Codex in einem echten Browser rendert und auf Breakpoints umstellt.
5. Iteriere, indem du Codex seine Umsetzung mit den Screenshots abgleichen lässt, nicht bloß bestätigen, dass es baut.

Füttere Bilder, indem du einen Screenshot ins Terminal ziehst oder das Image-Flag nutzt, und prompte dann mit konkreten Vorgaben:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implementiere dieses Design in React + Vite + Tailwind + TypeScript.
   Verwende meine vorhandenen Design-System-Komponenten und Tokens wieder.
   Halte Abstände, Layout und Hierarchie ein; mach es responsiv.
   Nutze das Playwright-Skill, um zu prüfen, ob die UI den
   Referenzen entspricht, und iteriere, bis es passt."

Lass einen Dev-Server in einem zweiten Terminal laufen, halte Prompts klein und fokussiert und committe gute Iterationen / verwirf schlechte (und teile Codex mit, wenn du zurücksetzt), damit jeder Durchlauf auf einer sauberen Basis aufbaut.

Codex für Frontend- und UI-Design

Aus einem Screenshot eine Seite zu machen, ist die Demo; ein echtes Frontend auszuliefern, ist die eigentliche Arbeit. UI-Design mit Codex wird gut, wenn du es als Aufbau eines Systems begreifst, wiederverwendbare Komponenten, responsive Layouts und jeder Interaktionszustand, statt als einzelnen Hero-Shot. Das bessere Bildverständnis und die Selbstverifizierung von GPT-5.4 machen das praktikabel, doch die Struktur kommt weiterhin von dir.

• Komponenten zuerst: Lass Codex atomare, wiederverwendbare Komponenten (Buttons, Inputs, Cards, Navigation) gegen deine tokens bauen, bevor du ganze Seiten zusammensetzt, damit das Frontend konsistent bleibt statt einmalig.
• Standardmäßig responsive: Gib Desktop- und Mobile-Referenzen und benenne die Breakpoints; lass Codex in einem echten Browser die Größe ändern und kaputte Layouts reparieren, statt einem einzelnen Viewport zu vertrauen.
• Jeder Interaktionszustand: Benenne Hover-, Fokus-, Aktiv-, Leer-, Lade- und Fehlerzustände ausdrücklich, genau die Zustände, die eine UI fertig wirken lassen und die generischer KI-Output meist überspringt.
• Barrierefreies Markup: Verlange semantisches HTML, beschriftete Bedienelemente, sichtbare Fokusringe und ausreichenden Kontrast und lass Codex sie als Teil des Builds prüfen.

Prompte gezielt für eine Komponente und ihre Zustände und lass Codex sie dann gegen die Referenz verifizieren:

codex "Baue eine responsive Pricing-Sektion in React + Tailwind + TypeScript.
   Verwende meine design-system-tokens und Button/Card-Komponenten wieder.
   Berücksichtige Hover-, Fokus- und mobil gestapelte Zustände.
   Nutze die Playwright-skill, um sie gegen pricing-desktop.png
   und pricing-mobile.png bei 375px und 1280px zu prüfen, und iteriere, bis sie passt."

Das Muster, das guten Frontend-Output vom „AI-Slop“ trennt, ist Verifizierung: Codex rendert die UI, vergleicht sie über Breakpoints hinweg mit deinen Referenzen und iteriert, statt nur zu bestätigen, dass der Build durchläuft.

Mit Codex ein Designsystem aufbauen

Ein Designsystem ist der größte Einzelhebel für die Output-Qualität, so kennt Codex deine Farben, Schriftskala, Abstände und Komponenten, statt auf den generischen Inter-und-Lila-Look zurückzufallen. Gib Codex ein Designsystem als Vorgabe, und jeder Screen, den es erzeugt, erbt denselben Geschmack.

• tokens definieren: Erfasse Farbe, Typografie, Abstände, Radius und Schatten als benannte tokens, das Vokabular, das Codex wiederverwendet, statt pro Screen Werte zu erfinden.
• Primitive erfassen: Verweise Codex auf deine kanonischen Komponenten (Button, Input, Card, Modal), damit es aus ihnen komponiert, statt jede neu zu zeichnen.
• Schreib es dorthin, wo Codex es liest: Halte die Regeln in einer AGENTS.md oder DESIGN.md fest, die der Agent bei jedem Durchlauf lädt: keine Hero-Cards, höchstens zwei Schriftarten, eine Akzentfarbe, markenorientierte Hierarchie.
• Bei jedem Durchlauf durchsetzen: Lass Codex neue UI gegen das System prüfen und Abweichungen melden, damit das Designsystem real bleibt und nicht nach dem ersten Screen zerfällt.

Du kannst auch andersherum arbeiten: Gib Codex ein paar Referenz-Screens und lass es ein Starter-Designsystem extrahieren, tokens plus Primitive, das du dann verfeinerst. So oder so ist das System das Artefakt, das Ergebnisse wiederholbar macht.

Codex + Figma: Design-↔-Code-Roundtrip

Im Februar 2026 kündigten OpenAI und Figma eine offizielle Partnerschaft an und machten aus der früheren Figma-MCP-Beta eine erstklassige, bidirektionale Integration. Sie funktioniert in beide Richtungen.

• Design → Code: Kopiere in Figma den „link to selection“ eines Frames, füge ihn mit get_design_context in Codex ein und bitte es, das Design mit deiner bestehenden Komponentenbibliothek umzusetzen.
• Code → Design: Das Werkzeug generate_figma_design („Code to Canvas“) verwandelt eine laufende UI zurück in bearbeitbare Figma-Frames, den ganzen Screen, ein ausgewähltes Element oder eine ganze Datei.

Der Figma-MCP läuft als Remote-Server und ist von Rate-Limits ausgenommen. Füge ihn einmal hinzu und er steht Codex, Claude Code, Cursor, VS Code und mehr zur Verfügung, genau die Art portabler, agentenübergreifender Fähigkeit, die Open Design orchestrieren soll.

Codex vs. Cursor vs. Claude Code für Design

Es gibt keinen einzelnen Gewinner für Designarbeit, jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:

Das wiederkehrende Urteil der Community lautet, dass Geschmack von Menschen kommt: Alle drei tendieren ohne skills, Referenzen und Vorgaben zu einer generischen Ästhetik. Das ist das eigentliche Problem, das es zu lösen gilt, und es hat die Form eines Design-Tools, nicht die eines Modells.

Codex-Design-Plugins im Vergleich (inklusive Open Design)

Die Designfähigkeit von Codex ergibt sich fast vollständig daraus, was du daran anschließt. Hier sind die wichtigsten Design-Plugins und -Tools, die du heute mit Codex nutzen kannst, und wo Open Design darin steht:

Wie du wählst: Wenn du OpenAIs eigenen Design-Flow in Codex willst, deckt das Product Design plugin das Erkunden von Richtungen, das Prüfen von Flows und das Prototyping aus einer Live-URL ab. Für die rohe Ausgabequalität ist die frontend design skill die Ergänzung mit dem größten Hebel. Die offizielle Figma-Integration ist unverzichtbar, wenn dein Team in Figma lebt, und sie ist portabel, sodass du sie mit jedem der anderen kombinieren kannst, auch mit Claude Code und Cursor.

Open Design ist die einzige Option, die von Anfang bis Ende Open Source, local-first und BYOK ist. Sie umhüllt Codex mit einer kuratierten skill und Design-System-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI, so ist der Design-Kontext, der Codex gut macht, schon beim ersten Start da, muss nicht in jedem Projekt von Hand zusammengesetzt werden, und jedes Artefakt bleibt in deinem eigenen Repo.

Codex für Designer, die nicht coden

Du musst kein Entwickler sein, um mit Codex zu gestalten. Der Agent nimmt Absichten in natürlicher Sprache und echte Referenzen und liefert funktionierende, responsive UI zurück, was ihn zu einem echten Werkzeug für Designer und Produktleute macht, nicht nur für Frontend-Entwickler. Der Trick ist, ihn wie ein Design-Briefing zu steuern, nicht wie eine Coding-Session.

• In natürlicher Sprache beschreiben: Sag in Design-Begriffen, was du willst, Layout, Hierarchie, Tonalität, das Gefühl, und lass Codex es in Markup übersetzen.
• Von Referenzen ausgehen: Wirf Screenshots, ein Moodboard oder die Website einer Marke hinein; konkrete Referenzen schlagen noch so viel Prosa, wenn es darum geht, den Look richtig hinzubekommen.
• In einem echten Browser vorschauen: Lass Codex das Ergebnis rendern und öffnen, damit du es mit eigenen Augen beurteilst, die Größe änderst und auf das zeigst, was nicht stimmt.
• Sicher iterieren und zurücksetzen: Der Agent läuft sandboxed, sodass du eine Richtung ausprobieren, die guten Durchläufe behalten und die schlechten zurücksetzen kannst, ohne etwas kaputt zu machen.

Fallstricke und wie du den „AI-Slop“-Look vermeidest

Die häufigste Klage über Codex-generiertes Design lautet, dass es generisch aussieht, weiche Verläufe, schwebende Panels, übergroße runde Ecken, dramatische Schatten, eine Inter-und-Lila-Stimmung, die „schreit, dass eine KI das gemacht hat“. Weitere gemeldete Probleme sind kaputte Mobile-Layouts, Anweisungen, die in die UI-Texte durchsickern, und schnell erreichte Nutzungslimits.

• Installiere eine Frontend-skill: Eine kuratierte ästhetische skill zwingt Codex, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
• Aktiviere Playwright-Verifizierung: Lass Codex über Breakpoints hinweg rendern und sich selbst prüfen, damit Layouts nicht stillschweigend auf Mobilgeräten brechen.
• Liefere tokens und Referenzen: Echte Design-tokens und Referenz-Screenshots sind der größte Einzelhebel für die Output-Qualität.
• Hinterlege Regeln in AGENTS.md: Schreibe Regeln im Stil „keine Hero-Cards, höchstens zwei Schriftarten, markenorientierte Hierarchie“ dorthin, wo der Agent sie bei jedem Durchlauf liest.

Beachte: Jede dieser Maßnahmen dreht sich darum, dem Agenten einen kuratierten Design-Kontext zu geben. Diesen Kontext von Hand und pro Projekt zu pflegen, ist genau die Mühsal, die Open Design beseitigt.

BYOK: dein OpenAI-Key, dein ChatGPT-Abo, deine Limits

Codex ist Bring-your-own-Key (BYOK): Du authentifizierst dich mit deinem eigenen OpenAI-API-Key oder deinem ChatGPT-Abo, und deine Zugangsdaten gehören dir. Das ist wichtig für die Kostenkontrolle und den Datenschutz, nichts an deinem Key oder deiner Arbeit muss über einen Dritten laufen.

• Wähle die richtige Reasoning-Stufe: OpenAI weist darauf hin, dass niedrige bis mittlere Reasoning-Stufen oft stärkere Frontend-Ergebnisse liefern als die höchste Einstellung, und weniger kosten.
• Halte Prompts klein und fokussiert: Kurze, konkrete Aufgaben verbrauchen weniger tokens und erzeugen sauberere Diffs als ein einziger riesiger Prompt.
• Committe gute Iterationen: Sichere die Durchläufe, die funktionieren, und verwirf den Rest, damit du nicht dafür zahlst, jedes Mal eine saubere Basis neu zu erzeugen.

Mit Codex in Open Design gestalten

Open Design ist die quelloffene Design-Schicht, nach der der obige Workflow immer wieder verlangt. Es behandelt Codex als First-Party-Adapter und umgibt es mit einer kuratierten skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI, sodass der Design-Kontext, der Codex gut macht, vom ersten Durchlauf an da ist, statt jedes Mal von Hand zusammengebaut zu werden.

1. Installiere Open Design und wähle Codex als deinen Agenten.
2. Authentifiziere dich mit deinem OpenAI-API-Key (BYOK) oder ChatGPT-Abo, die Zugangsdaten bleiben auf deiner Maschine und werden niemals über uns geleitet.
3. Wähle ein Designsystem und eine skill und erzeuge dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
4. Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.

Derselbe Codex-Agent, derselbe Key, plus ein echter, portabler, quelloffener Design-Workflow drumherum. Es ist local-first und Apache-2.0, sodass nichts an deiner Arbeit oder deinen Zugangsdaten deine Maschine verlässt.

Häufig gestellte Fragen

1. 01 Kann OpenAI Codex wirklich Designarbeit leisten? +

   Ja, mit einer Frontend-skill, einem Designsystem und echten Referenzbildern im Kontext liefert Codex (besonders auf GPT-5.4) produktionsreife, responsive UI und kann sie in einem Browser verifizieren. Ohne diesen Kontext fällt es tendenziell auf einen generischen Look zurück, und genau diese Lücke schließt Open Design.

2. 02 Ist das das OpenAI-Codex-Product-Design-Plugin? +

   Nein. Open Design ist ein unabhängiges quelloffenes Projekt, das Codex als Agenten integriert. Es ergänzt OpenAIs eigenes Tooling um eine local-first, offene skill- und Designsystem-Bibliothek.

3. 03 Brauche ich ein ChatGPT-Abo, um mit Codex zu gestalten? +

   Du kannst entweder einen OpenAI-API-Key (BYOK) oder dein ChatGPT-Abo verwenden. Die Anmeldung über ChatGPT gewährt in der Regel großzügigere Limits; Open Design leitet deine Zugangsdaten in keinem Fall weiter.

4. 04 Codex oder Claude Code für Frontend-Design? +

   Beide sind stark. Claude Code ist bekannt für konkrete, codebasis-bewusste Designentscheidungen; Codex hat nach GPT-5.4 starken visuellen Feinschliff und glänzt bei delegierten, sandboxed Builds. Viele Teams nutzen beide, Open Design lässt dich die Agenten wechseln, ohne deinen Design-Workflow zu ändern.

5. 05 Wie verbinde ich Codex mit Figma? +

   Füge den offiziellen Figma-MCP-Server hinzu (codex mcp add figma --url https://mcp.figma.com/mcp). Du kannst dann Figma-Frames mit get_design_context in Code umsetzen und eine laufende UI mit generate_figma_design zurück in bearbeitbare Figma-Frames schieben.

6. 06 Wie vermeide ich die generische „AI-Slop“-Ästhetik? +

   Installiere eine Frontend-skill, liefere echte Design-tokens und Referenz-Screenshots, hinterlege Markenregeln in AGENTS.md und aktiviere Playwright-Verifizierung. Open Design liefert diese als kuratierte Bibliothek aus, sodass du das Setup pro Projekt überspringst.

7. 07 Ist Open Design mit OpenAI verbunden? +

   Nein. Codex ist ein Produkt von OpenAI; Open Design ist ein unabhängiges quelloffenes Projekt, das es als First-Party-Adapter unterstützt. OpenAI und Codex sind Marken von OpenAI.

8. 08 Sind meine Dateien und Zugangsdaten sicher? +

   Ja, Open Design ist local-first. Deine Dateien, Artefakte und DESIGN.md bleiben in deinem eigenen Repo, und deine OpenAI-Zugangsdaten werden direkt von deinem Agenten genutzt, niemals über Open-Design-Server geleitet.

9. 09 Kann Codex responsive Frontend-UI bauen? +

   Ja. Mit Desktop- und Mobile-Referenzen und der Playwright-skill baut Codex responsive Frontend-UI, rendert sie in einem echten Browser bei jedem Breakpoint und iteriert, bis sie passt, inklusive Komponenten, Layouts und Interaktionszuständen. Ihm deine design-system-tokens zu geben, hält den Output konsistent statt generisch.

10. 10 Wie gebe ich Codex ein Designsystem? +

    Halte deine tokens (Farbe, Schrift, Abstände) und kanonischen Komponenten in einer AGENTS.md- oder DESIGN.md-Datei fest, die Codex bei jedem Durchlauf liest, und lass es dagegen bauen. Open Design liefert eine kuratierte Designsystem-Bibliothek, sodass du ein System auswählen kannst, statt eines von Grund auf zu schreiben, und Codex baut dann jeden Screen dagegen.

11. 11 Kann ich Codex fürs Design nutzen, wenn ich nicht coden kann? +

    Ja. Codex verwandelt Briefings in natürlicher Sprache und Referenzbilder in funktionierende UI, sodass Designer und Produktleute es nutzen können, ohne Code zu schreiben. Die Desktop-App von Open Design nimmt Terminal und Setup komplett weg, du wählst einen Agenten, ein Designsystem und eine skill und generierst und schaust dann in einer lokalen UI vor.

12. 12 Unterstützt Open Design BYOK mit Codex? +

    Ja. Open Design ist Bring-your-own-Key: Authentifiziere Codex mit deinem eigenen OpenAI-API-Key oder ChatGPT-Abo, und die Zugangsdaten werden direkt von deinem Agenten genutzt, niemals über Open Design geleitet. Es ist local-first, sodass deine Dateien und DESIGN.md in deinem eigenen Repo bleiben.

13. 13 Wie füge ich Codex ein frontend design skill hinzu? +

    Installiere das offizielle frontend design skill aus dem openai/skills-Katalog: Führe in der Codex-App den skill-Installer für das frontend-skill aus und starte Codex anschließend neu. Das frontend design skill bringt Codex dazu, sich auf eine echte Ästhetik festzulegen, Layouts ohne Karten, markenorientierte Hierarchie, höchstens zwei Schriftarten und eine Akzentfarbe, statt auf den generischen Standard-Look, und es ist der größte einzelne Hebel für die Design-Qualität von Codex.