Was macht Codex, und was macht OpenDesign?
Codex ist der Agent: Er liest Ihr Briefing, schreibt und führt den Code aus und überarbeitet ihn. OpenDesign ist der Workspace darum herum: Designsysteme, Skills, eine Vorschau, Kommentare und versionierte Dateien. OpenDesign ist ein unabhängiges Open-Source-Projekt und nicht mit OpenAI verbunden.
Was benötige ich, bevor ich starte?
Die Desktop-App, eine funktionierende Codex-Verbindung für Ihren gewählten Modus und eine kleine Testaufgabe. Siehe
Kompatibilität; die Anforderungen für den Build aus dem Quellcode sind separat aufgeführt. Ein Designsystem ist hilfreich; wählen Sie eines aus der Bibliothek, falls Sie noch keines haben.
Ich habe OpenDesign bereits installiert. Wie geht es weiter?
Folgen Sie der Verbindungsanleitung für Ihre installierte Version und führen Sie den kleinen Test im
Einrichtungsabschnitt aus. Bringen Sie dann ein echtes Briefing mit. Der
technische Quickstart behandelt den separaten Ausführungspfad aus dem Quellcode.
Wie unterscheidet sich das Design-Plugin von diesem Leitfaden?
Diese Seite erklärt den UI-Workflow. Das
Plugin-Verzeichnis hilft Ihnen bei der Auswahl von Ressourcen; der
Installationseintrag enthält Anweisungen, die Ihr Agent befolgen soll. Sie erfüllen unterschiedliche Aufgaben.
Wo finde ich weitere Agenten?
Der
Agenten-Hub listet die verfügbaren Agent-Leitfäden auf. Claude Code, Cursor und OpenCode sind oben unter verwandten Agenten verlinkt.
Wie vermeide ich generisch wirkende Codex-Designs?
Geben Sie Codex konkrete Referenzen und Design-Tokens an, legen Sie Markenregeln in Projektanweisungen wie AGENTS.md oder DESIGN.md fest, und überprüfen Sie die gerenderte Seite an den Ziel-Breakpoints. Ein Frontend-Design-Skill kann außerdem eine bewusstere visuelle Richtung bieten. Überprüfen Sie das Ergebnis selbst; Browser-Prüfungen ersetzen keine Design-Urteilskraft.
Kann Codex eine UI aus einem Screenshot oder einem Figma-Design erstellen?
Ein Screenshot kann als visuelle Referenz für eine Implementierung dienen. Figma-Workflows sind getrennt: Verwenden Sie die offizielle Figma-Integration, wenn Sie Kontext aus Design-Dateien oder einen Roundtrip zu bearbeitbaren Figma-Frames benötigen. Dieser Leitfaden konzentriert sich auf die Überprüfung einer gerenderten Weboberfläche, nicht auf die Erstellung einer bearbeitbaren Vektor-Designdatei.
Wie gebe ich Codex ein Designsystem?
Geben Sie die Farb-, Typografie-, Abstands- und Komponentenregeln des Systems in Projektanweisungen wie
DESIGN.md oder
AGENTS.md an und bitten Sie Codex, sie zu befolgen. OpenDesign bietet außerdem eine
Designsystem-Bibliothek, aus der Sie auswählen können, bevor Sie eine Oberfläche generieren.
Kann ich Codex mit Figma verbinden?
Ja. Die Figma-Integration von OpenAI unterstützt die Arbeit zwischen Figma-Designs und Code. Richten Sie sie mithilfe der
aktuellen Codex-Dokumentation ein; genaue Befehle und Funktionen können sich ändern. Der primäre Workflow dieser Seite erzeugt und prüft HTML, nicht bearbeitbare Figma-Dateien.
Was bedeutet BYOK bei der Verwendung von Codex mit OpenDesign?
Bring Your Own Key bedeutet, dass Sie Codex mit Ihrem eigenen OpenAI-Konto oder API-Schlüssel authentifizieren, vorbehaltlich der Abrechnungs- und Nutzungsbedingungen des von Ihnen gewählten Modus. OpenDesign leitet Ihre Anmeldedaten nicht weiter. Suchen Sie den
Kompatibilitätsabschnitt und die aktuelle Authentifizierungsanleitung von OpenAI auf, um die Details zu erhalten, die für Ihre Einrichtung gelten.
Bedeutet Codex UI die Codex-App oder eine mit Codex erstellte Benutzeroberfläche?
Der Begriff kann entweder die Codex-Anwendung von OpenAI oder eine mit dem Codex-Agenten generierte Produktoberfläche bedeuten. Diese Seite behandelt den zweiten Fall: das Entwerfen und Überprüfen einer Web-Benutzeroberfläche mit Codex.
Was sollte ich prüfen, bevor ich eine von Codex generierte Oberfläche ausliefere?
Prüfe die gerenderte Oberfläche in Desktop- und Mobilbreite, teste jede Interaktion und jeden Tastaturpfad, kontrolliere Fokus und Barrierefreiheit und vergleiche das Ergebnis mit dem Briefing und den Referenzen. Ein erfolgreicher Build oder die Browser-Prüfung eines Agenten ist nur ein erster Durchlauf; ein Mensch sollte das Artefakt vor der Übergabe verifizieren.
Was OpenAI Codex tatsächlich ist (und was es nicht ist)
Zunächst eine Abgrenzung, die fast alle verwirrt, die nach „Codex“ suchen. Das ursprüngliche OpenAI Codex war ein Code-Completion-Modell von 2021, das frühes GitHub Copilot antrieb und 2023 eingestellt wurde. Darum geht es auf dieser Seite nicht. Das heutige Codex ist das agentische Coding-Tool von OpenAI: Es plant, schreibt, führt aus und verifiziert Code aus natürlichsprachlichen Aufgaben.
Modernes Codex gibt es auf vier Oberflächen: eine Terminal-CLI (in Rust neu geschrieben, unter Apache-2.0 lizenziert), eine IDE-Erweiterung für VS Code, Cursor und Windsurf, eine Cloud-/Web-Erfahrung für delegierte asynchrone Aufgaben und eine Desktop-App mit In-App-Browser und Computer Use.
Eine zweite Abgrenzung, weil sich Suchen nach „Codex UI“ in zwei Richtungen aufspalten. Die eine ist die eigene Oberfläche von Codex: die Desktop- und Web-App, die OpenAI zum Ausführen des Agenten ausliefert. Die andere, und um die es auf dieser Seite geht, ist die UI, die du mit Codex baust: die Komponenten, Layouts und Bildschirme deines Produkts.
Standardmodell: Stand Mitte 2026 ist das empfohlene Modell gpt-5.5, wobei gpt-5.4 das Modell ist, das OpenAI explizit für Frontend und Computer Use trainiert hat.
Instruktionsdatei: Codex liest eine AGENTS.md-Datei in deinem Projekt (ein werkzeugübergreifender Standard) für Projektregeln, den natürlichen Ort, um deine Designkonventionen zu kodieren.
Sandbox: Es läuft in einer Sandbox auf Kernel-Ebene (standardmäßig workspace-write), sodass ein Agent, der deine UI bearbeitet, nicht außerhalb des Projekts umherwandern kann.
Zugangsdaten: OpenAI-API-Schlüssel (BYOK) oder ChatGPT-Abonnement (Free / Go / Plus / Pro / Business / Enterprise)
Anbieter: OpenAI
Lizenz der CLI: Apache-2.0, Open Source
Warum Codex jetzt gut im Design ist
Drei Dinge kamen Anfang 2026 zusammen und machten Codex zu einem echten Design-Tool statt zu einem generischen Code-Generator.
Ein auf Frontend trainiertes Modell: OpenAI veröffentlichte 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 hinweg und stärkerer Selbstverifikation. Es kann sogar Moodboards und visuelle Optionen generieren, bevor es sich auf finale Assets festlegt.
Ein offizieller Frontend-Design-Skill: Der
openai/skills-Katalog liefert einen kuratierten Frontend-Design-Skill, der echten Geschmack durchsetzt: cardless Layouts, Full-Bleed-Heroes, Brand-First-Hierarchie, zurückhaltende Bewegung, höchstens zwei Schriftarten und eine Akzentfarbe, und Codex dazu bringt, vor dem Bauen eine visuelle These zu schreiben. Diesen Frontend-Design-Skill hinzuzufügen, ist die schnellste einzelne Verbesserung für Codex' Output.
Browser-Verifikation: Mit dem Playwright-Skill öffnet Codex einen echten Browser, passt die Größe auf Breakpoints an und vergleicht seine Ausgabe mit der Referenz, statt nur zu prüfen, ob der Build durchläuft.
Geschmack entsteht aus drei Eingaben, die Sie bereitstellen: einem Designsystem, einem Skill und echten Referenzbildern.
Die Lektion hinter allen drei Punkten: Codex hat nicht standardmäßig Geschmack. Es erzeugt gutes Design, wenn Sie ihm Constraints, ein Designsystem, einen ästhetischen Skill und konkrete Referenzen geben. OpenDesign bündelt genau diese Eingaben, weshalb die beiden zusammenpassen (mehr unten).
Codex für Designarbeit einrichten – von Grund auf
Hier ist der komplette Weg von einer frischen Maschine zu einem Codex, der UI bauen und verifizieren kann.
Bevorzugen Sie einen Ein-Klick-Weg?
Laden Sie die OpenDesign-Desktop-App herunter, sie bündelt Codex mit einem kuratierten Skill und einer Designsystem-Bibliothek, sodass Sie Codex als Ihren Agenten auswählen und ganz ohne CLI-Einrichtung mit dem Designen beginnen können. Die folgenden Schritte sind der manuelle Weg, wenn Sie Codex lieber selbst einrichten möchten.
Die Einrichtungsreihenfolge: installieren → authentifizieren → AGENTS.md konfigurieren → den Frontend-Skill installieren → Browser-Verifikation aktivieren.
Kodifizieren Sie Ihre Designregeln: Legen Sie Ihre Tokens, Primitives und Konventionen in AGENTS.md oder einer DESIGN.md ab und verweisen Sie Codex darauf, damit die Ausgabe zu einer Marke passt, statt auf einen generischen Look zurückzufallen.
Wählen Sie die richtige Reasoning-Stufe: OpenAI merkt an, dass niedrige bis mittlere Reasoning-Stufen oft stärkere Frontend-Ergebnisse liefern als die höchste Einstellung.
Verwenden Sie den aktuellen Einrichtungsabschnitt für Befehle und versionsspezifische Details, die sich ändern können.
# 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 für höhere Limits empfohlen)
codex # dann “Sign in with ChatGPT” wählen
# 3. Projektkontext generieren
codex # in Ihrem Projekt /init ausführen, um AGENTS.md zu erstellen
# 4. Den offiziellen Frontend-Skill hinzufügen und Codex dann neu starten
# (in der Codex-App) $skill-installer frontend-skill
# 5. Den Figma-MCP-Server anbinden (optional, für Design-Übergabe)
codex mcp add figma --url https://mcp.figma.com/mcpHistorisches Befehlsbeispiel aus dem vorherigen Leitfaden; überprüfen Sie die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Der Screenshot-zu-UI-Workflow mit Codex
Die wirkungsvollste Design-Schleife mit Codex besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es übereinstimmt.
OpenAIs eigene Anleitung lässt sich auf fünf Schritte verdichten.
Beginne mit den klarsten visuellen Referenzen, die du hast, und beziehe mehrere Zustände ein (Desktop und Mobil, Hover, leer, Ladevorgang), nicht nur einen Hero-Shot.
Sei im Prompt konkret; vage Prompts erzeugen generische UI.
Bereite ein Designsystem vor und sage Codex, wo die Tokens und kanonischen Primitiven liegen.
Aktiviere die interaktive Playwright-Skill, damit Codex in einem echten Browser rendert und auf Breakpoints umbricht.
Iteriere, indem Codex seine Implementierung mit den Screenshots vergleicht, statt nur zu bestätigen, dass sie baut.
Füge Bilder hinzu, indem du einen Screenshot in das Terminal ziehst oder das Image-Flag verwendest, und gib dann konkrete Einschränkungen vor:
Starte einen Dev-Server in einem zweiten Terminal, halte Prompts klein und fokussiert und committe gute Iterationen / verwirf schlechte (sage Codex, wenn du zurücksetzt), damit jeder Durchlauf auf einer sauberen Basis aufbaut.
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."Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Codex-UI-Design: von Komponenten zu einem ausgelieferten Frontend
Codex baut UI aus drei Arten von Eingaben: einer schriftlichen Beschreibung, einem Referenz-Screenshot oder einem Figma-Frame. Mit einem Designsystem im Kontext und aktivierter Playwright-Skill erzeugt es responsive, komponentenbasierte Frontends und verifiziert seine eigene Arbeit in einem echten Browser.
Einen Screenshot in eine Seite zu verwandeln ist die Demo; ein echtes Frontend auszuliefern ist die Aufgabe. Codex-UI-Design-Arbeit wird gut, wenn du sie als Aufbau eines Systems behandelst: wiederverwendbare Komponenten, responsive Layouts und jeden Interaktionszustand, nicht einen einzelnen Hero-Shot. Das stärkere Bildverständnis und die Selbstverifikation von GPT-5.4 machen dies praktikabel, aber die Struktur kommt weiterhin von dir.
Komponenten zuerst: Bitte Codex, atomare, wiederverwendbare Komponenten (Buttons, Inputs, Cards, Nav) gegen deine Tokens zu bauen, bevor ganze Seiten zusammengesetzt werden, damit das Frontend konsistent bleibt statt aus Einzelstücken zu bestehen.
Standardmäßig responsiv: Gib Desktop- und Mobil-Referenzen und benenne die Breakpoints; lass Codex in einem echten Browser die Größe ändern und Layouts reparieren, die brechen, statt einem einzelnen Viewport zu vertrauen.
Jeder Interaktionszustand: Benenne Hover-, Focus-, Active-, Empty-, Loading- und Error-Zustände ausdrücklich, die Zustände, die UI fertig wirken lassen und die generische AI-Ausgaben üblicherweise überspringen.
Barrierefreies Markup: Verlange semantisches HTML, beschriftete Controls, sichtbare Fokusringe und ausreichenden Kontrast, und bitte Codex, sie als Teil des Builds zu prüfen.
Frage explizit nach einer Komponente und ihren Zuständen und lass Codex dann gegen die Referenz verifizieren:
Das Muster, das gutes Frontend-Output von „AI slop“ trennt, ist Verifikation: Codex rendert die UI, vergleicht sie über Breakpoints hinweg mit deinen Referenzen und iteriert, statt nur zu bestätigen, dass der Build durchläuft.
codex "Build a responsive pricing section in React + Tailwind + TypeScript.
Reuse my design-system tokens and Button/Card components.
Include hover, focus, and mobile-stacked states.
Use the Playwright skill to check it against pricing-desktop.png
and pricing-mobile.png at 375px and 1280px, and iterate until it matches."
Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Herstellerdokumentation.
Ein Designsystem mit Codex aufbauen
Ein Designsystem ist der größte Hebel für die Ausgabequalität; es ist die Art und Weise, wie Codex Ihre Farben, Typografieskala, Abstände und Komponenten kennt, anstatt auf den generischen Inter-und-Lila-Look zurückzugreifen. Geben Sie Codex ein Designsystem, gegen das er bauen kann, und jeder Bildschirm, den er erzeugt, erbt denselben Geschmack.
Tokens definieren: Erfassen Sie Farbe, Typografie, Abstand, Radius und Schatten als benannte Tokens, das Vokabular, das Codex wiederverwendet, anstatt Werte pro Bildschirm neu zu erfinden.
Primitive erfassen: Verweisen Sie Codex auf Ihre kanonischen Komponenten (Button, Input, Card, Modal), damit er aus ihnen komponiert, anstatt jede einzeln neu zu zeichnen.
Schreiben Sie es dort, wo Codex es liest: Kodieren Sie die Regeln in einer AGENTS.md oder DESIGN.md, die der Agent bei jedem Lauf lädt: keine Hero-Karten, höchstens zwei Schriftarten, eine Akzentfarbe, Marken-zuerst-Hierarchie.
Bei jedem Durchlauf durchsetzen: Bitten Sie Codex, neue UI gegen das System zu prüfen und Abweichungen zu markieren, damit das Designsystem echt bleibt, anstatt nach dem ersten Bildschirm zu verfallen.
Sie können auch in die andere Richtung arbeiten: Geben Sie Codex ein paar Referenzbildschirme und bitten Sie ihn, ein Starter-Designsystem zu extrahieren, Tokens plus Primitive, das Sie dann verfeinern. Wie auch immer, das System ist das Artefakt, das Ergebnisse wiederholbar macht.
Codex + Figma: Roundtrips zwischen Design und Code
Im Februar 2026 kündigten OpenAI und Figma eine
offizielle Partnerschaft an, die die frühere Figma-MCP-Beta in eine erstklassige, bidirektionale Integration verwandelt. Sie funktioniert in beide Richtungen.
Design → Code: Kopieren Sie den „Link zur Auswahl“ eines Frames in Figma, fügen Sie ihn zusammen mit get_design_context in Codex ein und bitten Sie ihn, das Design unter Verwendung Ihrer vorhandenen Komponentenbibliothek zu implementieren.
Code → Design: Das Tool generate_figma_design („Code to Canvas“) verwandelt eine live laufende UI zurück in bearbeitbare Figma-Frames, den gesamten Bildschirm, ein ausgewähltes Element oder eine ganze Datei.
Der Figma MCP läuft als Remote-Server und ist von Rate Limits ausgenommen. Fügen Sie ihn einmal hinzu, und er steht Codex,
Claude Code,
Cursor, VS Code und mehr zur Verfügung, was genau die Art von portabler Multi-Agent-Fähigkeit ist, für deren Orchestrierung OpenDesign gebaut ist.
Codex, Cursor und Claude Code im Design-Vergleich
Es gibt keinen einzelnen Gewinner für Designarbeit, jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:
Codex — Starke visuelle Politur nach GPT-5.4 + frontend-skill; Bildverständnis — Delegierte asynchrone Builds, sandboxed Runs, portable AGENTS.md-Regeln
Cursor — Visuelle Build-and-see-Schleife mit Live-Vorschau und Inline-Bearbeitungen — Enges Iterieren-und-Beobachten bei UI-Arbeit in einer IDE
Claude Code — Konkrete Designentscheidungen (Hex, Abstände, Typografie) und codebase-aware UX — Frontend-Reasoning und Refactorings mit großem Kontext
Das wiederkehrende Urteil der Community ist, dass Geschmack von Menschen kommt: Alle drei neigen ohne Skills, Referenzen und Einschränkungen zu einer generischen Ästhetik. Das ist das eigentliche Problem, das es zu lösen gilt, und es hat die Form eines Design-Tools, nicht eines Modells.
Agent — Design-Stärke — Am besten für
Codex-Design-Plugins im Vergleich (einschließlich OpenDesign)
Codex' Designfähigkeit kommt fast vollständig aus dem, was man hineinsteckt. Hier sind die wichtigsten Design-Plugins und Tools, die man heute mit Codex nutzen kann, und wo OpenDesign unter ihnen einzuordnen ist:
OpenAI Product Design-Plugin — OpenAIs Rollen-Plugin: Richtungen erkunden, User Flows auditieren, von einer Live-URL prototypen, Screenshots interaktiv machen, nach Figma oder Canva exportieren — Nein — Schnelle offizielle Design-Aufgaben innerhalb von Codex
openai/skills frontend-skill — Eine kuratierte Ästhetik, kartenlose Layouts, markenorientierte Hierarchie, zurückhaltende Bewegung, eine visuelle These vor dem Bauen — Ja (Apache-2.0) — Die Qualität roher Ausgabe anheben
Figma-Integration (MCP) — Figma ↔ Code in beide Richtungen: Frames im Code implementieren, eine laufende UI zurück in bearbeitbares Figma pushen — Nein (offiziell) — Teams, die in Figma leben
OpenDesign — Eine offene, local-first Designschicht um Codex: kuratierter Skill + Design-System-Bibliothek, eine Render-Pipeline, eine Desktop-UI und BYOK — Ja (Apache-2.0) — Ein echter, portabler Design-Workflow, der dir gehört
Wie man wählt: Wenn du OpenAIs eigenen Design-Flow innerhalb von Codex möchtest, deckt das Product Design-Plugin das Erkunden von Richtungen, das Auditieren von Flows und das Prototypen von einer Live-URL ab. Für die Qualität roher Ausgabe ist der
Frontend-Design-Skill die Ergänzung mit dem höchsten Hebel. Die offizielle
Figma-Integration ist essenziell, wenn dein Team in Figma lebt, und sie ist portabel, sodass du sie mit jedem der anderen kombinieren kannst, einschließlich
Claude Code und
Cursor.
OpenDesign ist die einzige Option, die durchgängig Open Source, local-first und BYOK ist. Sie umhüllt Codex mit einem kuratierten
Skill und einer
Design-System-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI, sodass der Designkontext, der Codex gut macht, vom ersten Lauf an vorhanden ist, nicht in jedem Projekt von Hand zusammengesetzt wird, und jedes Artefakt in deinem eigenen Repo bleibt.
Plugin / Tool — Was es hinzufügt — Open Source — Am besten für Codex für Designer ohne Programmierkenntnisse
Man muss kein Entwickler sein, um mit Codex zu designen. Der Agent nimmt natürlichsprachliche Absichten und echte Referenzen und liefert funktionierende, responsive UI zurück, was ihn zu einem echten Werkzeug für Designer und Produktmenschen macht, nicht nur für Frontend-Entwickler. Der Trick besteht darin, ihn wie ein Design-Briefing zu steuern, nicht wie eine Coding-Session.
In einfacher Sprache beschreiben: Sagen Sie in Designbegriffen, was Sie wollen, Layout, Hierarchie, Tonalität, das Gefühl, und lassen Sie Codex es in Markup übersetzen.
Mit Referenzen arbeiten: Screenshots, ein Moodboard oder die Website einer Marke einwerfen; konkrete Referenzen schlagen jede Menge Prosa, wenn es darum geht, den Look richtig zu treffen.
In einem echten Browser ansehen: Lassen Sie Codex das Ergebnis rendern und öffnen, damit Sie es mit eigenen Augen beurteilen, die Größe ändern und auf das zeigen können, was nicht stimmt.
Sicher iterieren und zurücksetzen: Der Agent läuft in einer Sandbox, sodass Sie eine Richtung ausprobieren, die guten Durchläufe behalten und die schlechten zurücksetzen können, ohne etwas kaputt zu machen.
Fallstricke und wie man den „AI slop“-Look vermeidet
Die häufigste Beschwerde über von Codex generiertes Design ist, dass es generisch wirkt, weiche Farbverläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, eine Inter-und-Lila-Stimmung, die „schreit, dass eine KI das gemacht hat“. Weitere berichtete Probleme sind kaputte mobile Layouts, Anweisungen, die in die UI-Texte durchsickern, und schnell erreichte Nutzungslimits.
Eine Frontend-Skill installieren: Eine kuratierte Ästhetik-Skill zwingt Codex, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look.
Playwright-Verifizierung aktivieren: Lassen Sie Codex über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobilgeräten nicht stillschweigend kaputtgehen.
Tokens und Referenzen liefern: Echte Design-Tokens und Referenz-Screenshots sind der mit Abstand größte Hebel für die Ausgabequalität.
Regeln in AGENTS.md verankern: Setzen Sie Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftfamilien, Marken-Hierarchie zuerst“ dorthin, wo der Agent sie bei jedem Durchlauf liest.
Beachten Sie, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Designkontext zu geben. Diesen Kontext von Hand, pro Projekt, zu pflegen, ist die Mühe, die OpenDesign beseitigt.
BYOK: dein OpenAI-Schlüssel, dein ChatGPT-Plan, deine Limits
Codex ist Bring-Your-Own-Key (BYOK): du authentifizierst dich mit deinem eigenen OpenAI-API-Schlüssel oder deinem ChatGPT-Abo, und deine Anmeldedaten gehören dir. Das ist wichtig für Kostenkontrolle und Datenschutz: Nichts an deinem Schlüssel oder deiner Arbeit muss über Dritte laufen.
OpenAI-API-Schlüssel (BYOK) — Pay-as-you-go pro Token — Fein abgestufte Kostenkontrolle, Automatisierung und CI
ChatGPT-Abo — In Plus / Pro / Business / Enterprise enthalten — Höhere, besser vorhersehbare Limits für tägliches interaktives Design
Wähle die richtige Reasoning-Stufe: OpenAI merkt an, dass niedriges bis mittleres Reasoning oft stärkere Frontend-Ergebnisse liefert als die höchste Einstellung und weniger kostet.
Halte Prompts klein und fokussiert: Kurze, spezifische Aufgaben verbrauchen weniger Tokens und erzeugen sauberere Diffs als ein einziger riesiger Prompt.
Committe gute Iterationen: Speichere die Durchläufe, die funktionieren, und verwirf den Rest, damit du nicht jedes Mal für die Neuerzeugung einer sauberen Basis bezahlst.
Option — Abrechnung — Am besten für
Designen mit Codex in OpenDesign
OpenDesign ist die Open-Source-Design-Schicht, nach der der obige Workflow immer wieder verlangt. Es behandelt Codex als First-Party-Adapter und umhüllt ihn mit einer kuratierten Skill- und Designsystem-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI, sodass der Designkontext, der Codex gut macht, vom ersten Lauf an vorhanden ist und nicht jedes Mal von Hand zusammengesetzt werden muss.
Desktop-App von OpenDesign: Wähle ein Plugin, beschreibe, was du willst, und Codex baut es, keine Kommandozeile.
Authentifiziere dich mit deinem OpenAI-API-Schlüssel (BYOK) oder ChatGPT-Abo; Anmeldedaten bleiben auf deinem Rechner und werden niemals über uns geleitet.
Wähle ein
Designsystem und einen
Skill und generiere dann Decks, Prototypen und Landingpages mit konsistentem Geschmack.
Jedes Artefakt und jede DESIGN.md-Datei lebt in deinem eigenen Repo, nicht in einer gehosteten Cloud.
Codex deployt OpenDesign lokal und öffnet es in seinem In-App-Browser, dann steuert es die Canvas von dort aus.
Derselbe Codex-Agent, derselbe Schlüssel, plus ein echter, portabler Open-Source-Design-Workflow drumherum. Er ist Local-First und Apache-2.0, sodass nichts an deiner Arbeit oder deinen Anmeldedaten deinen Rechner verlässt.
Echte Ausgabe aus einer Codex + OpenDesign-Sitzung: Decks, Landingpages und ein gerendertes Video, alles in deinem eigenen Repo gespeichert.
Installiere OpenDesign und wähle Codex als deinen Agenten.
Ist OpenDesign mit OpenAI verbunden?
Nein. Codex ist ein Produkt von OpenAI; OpenDesign ist ein unabhängiges Open-Source-Projekt, das es als First-Party-Adapter unterstützt.
Codex 
OpenDesign 
