Codex für Design.

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.
• Eine offizielle Frontend-skill: Der openai/skills-Katalog liefert eine kuratierte frontend-skill aus, die echten Geschmack erzwingt: kartenlose Layouts, randvolle Heroes, markenorientierte Hierarchie, zurückhaltende Bewegung, höchstens zwei Schriftarten und eine Akzentfarbe — und Codex eine visuelle These schreiben lässt, bevor es baut.
• 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.

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

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for 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 \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

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 + 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.

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.

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.