UI-Design mit OpenAI Codex: Websites, Konsolen und Apps mit Oil UI erstellen
OpenAI Codex und GPT-Modelle sind stark bei zustandsabhängiger Logik, synchronisierten Bedienelementen und datendichten Oberflächen. Mit Oil UI überträgt Codex diese technische Stärke auf präzise Typografie, klare Hierarchien und direkt nachvollziehbare Interaktionen – von einem live nutzbaren Schrifttester mit sofortiger Lizenzpreisberechnung über eine Incident-Konsole mit Topologie bis zu einer Surf-Prognose-App bei 390×844.
Die wichtigsten Punkte
- Installiere Oil UI mit npx skills add oil-oil/oil-ui, damit Codex visuelle Hierarchie und einen zurückhaltenden Farbeinsatz festlegt, bevor Komponenten geschrieben werden.
- Nutze die Stärke von Codex bei funktionierenden Zuständen: Beschreibe, wie Bedienelemente einander aktualisieren, etwa wenn das Ziehen einer Zeitleiste Logs, Traces und Deployment-Markierungen ausrichtet.
- Erkunde mit demselben Produktbriefing unterschiedliche visuelle Richtungen, wie bei den neun Orvo-Landingpages oder den Serien Atelier Volders und Fonderie Mercier in der Galerie.
- Prüfe jeden Zustand bei 1440×900 oder 390×844 mit Browser-Screenshots und Blindreviews durch Subagenten, um überflüssige Rahmen und abgeschnittene Labels zu beseitigen.
npx skills add oil-oil/oil-uiWähle im interaktiven Installer dein Codex- oder OpenAI-Agent-Verzeichnis aus.
Stärken von Codex im UI – und wo Leitplanken helfen
Mehr als achtzig Arbeiten in der Oil-UI-Galerie wurden mit GPT- und Codex-Modellen erstellt (GPT 6.1 Sol, GPT 6 Luna und GPT 6 Astra). Die laufenden Seiten zeigen, was Codex besonders gut beherrscht: Oberflächen, deren Gestaltung auf funktionierenden Berechnungen und verbundenen Zuständen beruht. In Fieldwork Type aktualisieren Eingaben im Schrifttester Schriftgewicht, Laufweite und Lizenzierung im Warenkorb direkt; in Nightwatch richtet das Ziehen des Zeitfensters Service-Topologie, Deployment-Markierungen und Fehlerlogs aus; in Vesper öffnen Rechnungsfilter Webhook-Payloads und Wiederholungsaktionen.
Ohne Vorgaben kann Codex komplexe Werkzeuge jedoch in unruhige Debug-Panels für Entwickler verwandeln: Jedes Feld bekommt einen eigenen Rahmen, Status-Badges reihen sich aneinander und jede Tabellenspalte erhält dasselbe visuelle Gewicht. Oil UI gibt Codex Regeln für Hierarchie und Reduktion, damit dichte Bildschirme ruhig bleiben.
| Arbeit und Modell | Form | Zentrale Interaktion | Viewport und Zustände |
|---|---|---|---|
| Fieldwork Type (GPT 6.1 Sol) | Website einer unabhängigen Schriftgießerei | Live-Schrifttester mit Preisen für Desktop-, Web- und App-Lizenzen | 1440×900 bis 390 px; Hero, erweiterter Tester und Lizenzauswahl |
| Nightwatch (GPT 6.1 Sol) | Konsole für die Incident-Bearbeitung | Das Ziehen des Zeitbereichs richtet Topologiepfade, Deployments und Logs aus | 1440×900; Normalbetrieb, aktiver Incident, Untersuchung eines Spitzenwerts und Release-Ansicht |
| Vesper (GPT 6.1 Sol) | Konsole für API-Nutzung und Abrechnung | Kunden nach Schwellenwerten filtern und Zeitverläufe fehlgeschlagener Rechnungen prüfen | 1440×900; Übersicht, Detailleiste für Ausnahmen und Befehlspalette |
| Tide (GPT 6.1 Sol) | App für Surf- und Gezeitenprognosen | Das Bewegen auf der Zeitleiste aktualisiert Dünungshöhe, Wind und Gezeitenkurve gemeinsam | 390×844 mobil; interaktive index.html und screens.html mit 3 Bildschirmen |
Der Ablauf Richtung → Zustand → Screenshot in Codex
Bitte Codex nicht, eine ganze Anwendung mit mehreren Bildschirmen in einem einzigen ungeprüften Durchgang zu erzeugen. Teile die Arbeit stattdessen in klare Kontrollpunkte auf.
Oil UI installieren und ein aufgabenorientiertes Briefing übergeben
Installiere den Skill mit npx skills add oil-oil/oil-ui und beschreibe anschließend Nutzer, zentrale Objekte, erforderliche Zustände und Viewport-Maße.
npx skills add oil-oil/oil-uiRichtungen auf einer Seite vergleichen, bevor du dich festlegst
Lass Codex mit echten Produkttexten eine Vergleichsseite mit 3 bis 4 klar unterschiedlichen Richtungen erstellen. Wähle eine Richtung und übernimm keine übrig gebliebenen Widgets aus verworfenen Entwürfen.
Wichtige Zustände über URL-Parameter oder eine Mehrbildschirmseite bereitstellen
Folge dem Muster aus der Galerie (?state=incident oder screens.html), damit sich jeder kritische Zustand direkt in einem Headless-Browser öffnen und reproduzierbar aufnehmen lässt.
Nach der Prüfung bei 100 % und 200 % visuellen Ballast entfernen
Prüfe die gerenderten Screenshots, entferne überflüssige Rahmen, korrigiere ungünstige Zeilenumbrüche und vergewissere dich, dass die primäre Aktion sofort auffällt.
Eine aussagekräftige Prompt-Vorlage für Codex
Codex erzeugt deutlich stärkere Oberflächen, wenn du beschreibst, wie sich Nutzeraktionen auf den Bildschirm auswirken. Diese Struktur kannst du direkt an dein eigenes Produkt anpassen:
Verwende Oil UI, um [Produktname und Kategorie, z. B. eine Konsole für API-Nutzung, Abrechnung und Kundenrechnungen für Entwicklerteams] bei einem Desktop-Viewport von 1440×900 zu gestalten und zu implementieren.
- Zentrale Aufgabe: Abonnements und live erfasste Nutzung verwalten, fällige Beträge und Rechnungsausnahmen für den aktuellen Zeitraum prüfen, Kunden nach Status und Nutzungsschwelle filtern sowie Einzelposten, Zahlungsverläufe und Webhook-Payloads einsehen.
- Verbundene Interaktionen: Beim Ändern der Filter werden Kundenliste und Nutzungstrend gemeinsam aktualisiert; beim Öffnen einer Ausnahmerechnung werden Zahlungswiederholung, Kontingentanpassung und Export verfügbar.
- Zu liefernde Zustände: 1) Alltagsarbeitsbereich mit Live-Filterung, 2) Detailansicht einer Ausnahmerechnung mit Wiederherstellungsaktionen und 3) Schnellbefehlspalette. Prüfe alle drei Zustände mit echten Browser-Screenshots.Angelehnt an das Briefing, mit dem Vesper für die Oil-UI-Galerie erstellt wurde.
Funktionierende Beispiele und Prompts aus der Galerie
Öffne die Live-Demos bei 1440 px oder 390 px und untersuche, wie Modell und Prompt die fertige Oberfläche geprägt haben.
Fieldwork Type
Unabhängige Schriftgießerei
Die Website einer unabhängigen Schriftgießerei (ab 1440×900, responsiv bis 390 Pixel Breite). Der erste Bildschirm stellt eine Hauptschrift in den Mittelpunkt: Besucher können eigenen Text eingeben und Schriftgrad, Strichstärke und Schriftbreite anpassen. Weiter unten folgen die Tabelle der Strichstärken, der Zeichensatz, Anwendungsbeispiele und Lizenzen nach Verwendungszweck (Desktop, Web, App), die in den Warenkorb gelegt werden können. Der Schrifttester und die Lizenzauswahl sind das Herzstück: Die Darstellung ändert sich während der Eingabe, und der Lizenzpreis wird mit jeder Option aktualisiert. Entwirf drei Zustände: den ersten Bildschirm, das geöffnete Tester-Panel und die Lizenzauswahl.
Arbeit und Prompt ansehen →
Nightwatch
Betriebsüberwachung und Vorfallreaktion
Ein Monitoring- und Bereitschaftstool für ein mittelgroßes Plattformteam (1440×900) mit englischsprachiger Oberfläche: Service-Topologie, Diagramme für Latenz, Fehlerrate und Datenverkehr, letzte Deployments, Logs und Traces; zeige bei einem Vorfall Warnungen, die aktuell bereitschaftsdienstliche Person und eine Vorfall-Zeitleiste. Ein sich entwickelnder Vorfall ist der Kern: Der ausfallende Service und betroffene nachgelagerte Services müssen in der Topologie deutlich erkennbar sein. Beim Ziehen des Zeitbereichs sollen Diagramme, Deployment-Markierungen und Logs aufeinander abgestimmt werden, damit erkennbar wird, welches Deployment das Problem verursacht hat. Entwirf drei Zustände: eine fehlerfreie Übersicht; einen laufenden Vorfall mit Warnung und hervorgehobenem betroffenem Pfad in der Topologie; sowie geöffnete Logs und Traces am Fehlerpeak, um das verantwortliche Deployment zu identifizieren.
Arbeit und Prompt ansehen →
Vesper
Abrechnungskonsole für API-Nutzung
Entwerfe eine Abrechnungskonsole für API-Nutzung und Kundenrechnungen für KI- und Entwicklertool-Teams, mit englischsprachiger Oberfläche in einer Desktop-Ansicht von 1440×900. Nutzer können Abonnements und Live-API-Nutzung verwalten, fällige Beträge und Rechnungsausnahmen im aktuellen Zeitraum prüfen, Kunden oder Rechnungen nach Status und Nutzungsschwelle filtern und einen Datensatz öffnen, um Einzelpositionen, Zahlungs- und Webhook-Zeitleisten sowie Ereignis-Payloads zu untersuchen. Berücksichtige erneute Zahlungsversuche, Kontingentanpassungen und Rechnungsexporte. Implementiere drei zentrale Zustände: den täglichen Arbeitsbereich mit Umsatz- und Nutzungstrends, Kunden- oder Rechnungslisten und Live-Filtern; eine Detailansicht für eine Ausnahmerechnung mit Nutzungsaufschlüsselung, Statuszeitleiste und Wiederherstellungsaktionen; sowie eine Befehlspalette. Liefere ein offlinefähiges `index.html` und erstelle `shots/desktop.png`, `shots/state-1.png` und `shots/state-2.png` mit 1440×900, DPR=2.
Arbeit und Prompt ansehen →
Tide
Surf- und Gezeitenprognose-App
Eine Surf- und Gezeitenprognose-App für Surfer (390×844): eine Liste gespeicherter Surfspots und für jeden Spot die Wellenhöhe, Periode, Windrichtung und -geschwindigkeit für heute und die nächsten sieben Tage, eine Gezeitenkurve sowie ein Vorschlag für die beste Zeit. Gezeiten und Bedingungen ändern sich mit der Zeit; deshalb steht die Datenvisualisierung im Mittelpunkt: Beim Ziehen der Zeitachse aktualisieren sich Wellen, Wind und Tide gemeinsam. Entwirf die Spotliste, die Detailansicht eines Spots und das Ziehen der Zeitachse zu einem bestimmten Zeitpunkt. Liefere `index.html` und ein `screens.html` mit drei nebeneinander angeordneten Bildschirmen.
Arbeit und Prompt ansehen →Oil UI Pro mit OpenAI Codex verwenden
Wechsle zu Oil UI Pro, wenn Codex die 10 spezialisierten Arbeitsbereich-Archetypen nutzen soll (Liste–Detail, Canvas–Inspektor, Zeitleiste, Node-Graph und weitere), eine bestehende Produktionscodebasis überarbeiten oder mehrere Blindreview-Runden mit dem Ziel 9/10 durchführen soll.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Warum enthält die Galerie mehrere Codex-Arbeiten für dasselbe Produkt, etwa neun Orvo-Seiten?
Diese Serien zeigen, wie aus exakt demselben Briefing wirklich unterschiedliche Designrichtungen entstehen können. Alle neun Orvo-Seiten verwenden dieselben Produktfakten und Preise von $0 / $24.99 / $34.99, aber Launch Garden, Tandem, Coastal Workshop und Open Creative Studio verfolgen jeweils einen eigenen redaktionellen und räumlichen Ansatz.
Wie verhindere ich, dass Codex aus einer mobilen App eine zusammengedrückte Desktop-Website macht?
Gib einen Viewport von 390×844 vor und verlange sowohl eine interaktive index.html als auch eine screens.html mit drei bis fünf wichtigen Bildschirmen nebeneinander. Oil UI führt Codex zu einer Gestaltung nach Daumenreichweite, fokussierten Aufgaben pro Bildschirm und natürlich wirkenden mobilen Übergängen.
Wie sorgt Oil UI in Codex für einen Dark Mode, ohne alles in Neonfarben zu tauchen?
Oil UI passt die Helligkeit der Flächen an den Nutzungskontext an: dunkle Flächen für Fahrten bei Nacht (Yantu) oder rund um die Uhr besetzte Bereitschaftsräume (Nightwatch), während kräftige Akzentfarben aktiven Routen, Warnungen und zentralen Bedienelementen vorbehalten bleiben.
Sollte ich den Open-Source-Skill entfernen, wenn ich Oil UI Pro installiere?
Ja. Oil UI Pro enthält die gesamte Open-Source-Methode und erweiterte Arbeitsabläufe. Wenn nur Pro installiert bleibt, werden keine doppelten Skill-Aufrufe ausgelöst.