Codex 
OpenDesign So gestalten Sie Interfaces mit OpenAI Codex in OpenDesign: das Setup, eine vollständige Aufgabe vom Briefing bis zur überprüften Datei sowie die Grenzen, die Sie vorher kennen sollten.
„Ein ruhigeres Projektboard.
Klare Prioritäten. Platz für Fokus.“
DREI CODEX-SEITEN
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen PLUGINS & INSTALLATIONDurchsuchen Sie Design-Plugins oder rufen Sie die OpenDesign-Installationsanleitung auf.
Zu den Ressourcen EIN ANDERES ERGEBNISFür Foliensätze gibt es einen eigenen Leitfaden mit eigenem Workflow.
Codex Slides öffnenEine vollständige Codex-Design-Aufgabe
Eine einzelne Aufgabe, end-to-end gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie vor dem Abschluss noch durchführen. Die unten gezeigte Oberfläche ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Codex-Lauf.
BriefingEntwerfen Sie ein Projekt-Fortschrittsboard für ein kleines Produktteam. Zeigen Sie den Gesamtfortschritt, den nächsten Meilenstein und blockierte Aufgaben auf einen Blick. Aufgaben bewegen sich zwischen den Spalten „Zu erledigen“, „In Bearbeitung“ und „Erledigt“. Das Board muss auf Desktop und Mobilgeräten funktionieren.
data-od-id-HooksSchreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
Plant das Layout, schreibt HTML, CSS und JavaScript, führt die Datei aus und überarbeitet sie auf Anfrage.
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
Sidebar, Header, Statistiken und Spalten liegen auf dem 8px-Raster; bei 1440 oder 390 überlappt nichts.
Fortschritt, nächster Meilenstein und Anzahl blockierter Aufgaben stehen über den Spaltenüberschriften; die Akzentfarbe markiert nur eine Meilenstein-Bezeichnung.
Die Spalten werden zu einem segmentierten Umschalter; die Meilenstein-Leiste bleibt erhalten; die Sidebar klappt in eine Tab-Leiste zusammen.
Wechseln Sie hier die Vorschau zwischen Desktop und Mobile. Öffnen Sie in Ihrem eigenen Artefakt eine Aufgabe und testen Sie die Filter, die Tastaturnavigation und das Fokusverhalten.
Eignung
Kompatibilität
Dieser Leitfaden behandelt lokales Codex. Andere Modi haben eine andere Einrichtung und Abrechnung. Veröffentlichte Referenzen geprüft am 11. September 2026.
OpenAI Codex, der Coding-Agent – nicht das ältere Code-Vervollständigungsmodell. Auf dieser Seite geht es um das Gestalten von Benutzeroberflächen mit Codex, nicht um die UI der Codex-App selbst. Die Setup-Hinweise von OpenDesign listen Codex unter den verfügbaren Agents auf.
Für lokales Codex melden Sie sich mit ChatGPT an oder verwenden einen OpenAI-API-Schlüssel. Beide haben unterschiedliche Auswirkungen auf Abrechnung und Richtlinien. Folgen Sie den Authentifizierungsanweisungen von OpenAI; diese Seite verspricht kein Kontingent und keinen Preis.
Prüfen Sie die Download-Seite für Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quickstart aus dem Quellcode gelten für die Ausführung aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Codex-Version: hier nicht verifiziert.
Folgen Sie den Verbindungsanweisungen, die Ihre installierte Version anzeigt, und führen Sie anschließend eine kleine Aufgabe aus. Bestätigen Sie, dass der vorgesehene Agent die Aufgabe bearbeitet hat und dass sich das Artefakt öffnen lässt. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Laden Sie zunächst herunter, schließen Sie das Codex-Setup für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Sie müssen OpenDesign für diesen Weg nicht aus dem Quellcode erstellen.
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenFolgen Sie den Codex-Anweisungen in Ihrer installierten Version. Für lokales Codex schließen Sie die ChatGPT-Anmeldung oder die API-Schlüssel-Authentifizierung ab, bevor Sie eine Aufgabe senden.
Codex-Hinweise zur Authentifizierung lesenVerwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Erstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
Um aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart. Um das Plugin in Codex zu installieren, verwenden Sie den Installationseintrag unten.
Der Codex-Design-Workflow
Dieselbe progress-board-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Codex tut, was OpenDesign beiträgt und was Sie prüfen.
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
AGENTS.md des Projekts; fragt nach, wenn etwas unklar ist.Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
Codex schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
data-od-id-Ziele für Kommentare und Änderungen bereit.Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
Ressourcen
Eine reine Textadresse mit Installationsanweisungen, die Codex lesen soll – kein visuelles Tutorial. Kopieren Sie den Prompt in Codex, und es liest den Eintrag selbst.
Installieren Sie OpenDesign in Codex, indem Sie https://open-design.ai/codex-plugin/ lesen und dessen Installationsanweisungen befolgen. Fragen Sie nach, bevor Sie die Konfiguration ändern.
Frontend- und Design-System-Plugins für Codex, jeweils mit eigener Quelle und Einrichtungsanleitung.
Die Artefakttypen, die Codex in OpenDesign erzeugen kann, ein Skill pro Typ.
Marken-Tokens und Komponenten, die gebunden werden müssen, bevor Codex etwas generiert.
Für Präsentationen gibt es einen eigenen Leitfaden; Output und Workflow unterscheiden sich von Produkt-UI.
Einschränkungen
FAQ
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den Ablauf, und bringen Sie dann das eigentliche Briefing ein. Wählen Sie die Option, die zu Ihrem Setup passt; die Seite erkennt dies nicht automatisch.