For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
Hauptnavigation
Codex

Codex use case

Kleinteilige UI-Änderungen vornehmen

Nutze Codex-Spark für schnelle, gezielte UI-Iterationen in einer bestehenden App.

Difficulty Einfach
Time horizon 5 min

Nutze Codex, um in einer bestehenden App jeweils eine kleine UI-Anpassung vorzunehmen, sie im Browser zu überprüfen und anschließend von einem separaten Chatfenster neben deiner Vorschau aus schnell weiterzuarbeiten.

Am besten geeignet für

  • Bestehende Apps, deren Grundstruktur bereits steht und an denen du kleine visuelle Anpassungen vornehmen musst
  • Schnelle Review-Schleifen für Produkt und Design, bei denen jeder Hinweis in eine einzelne, gezielte Codeänderung umgesetzt werden soll
  • Runden für den UI-Feinschliff, die im Browser geprüft werden müssen, aber nicht zu einem umfassenden Redesign führen sollen

Contents

    ← Alle Anwendungsfälle

    Kleinteilige UI-Änderungen vornehmen

    Nutze Codex-Spark für schnelle, gezielte UI-Iterationen in einer bestehenden App.

    Nutze Codex, um in einer bestehenden App jeweils eine kleine UI-Anpassung vorzunehmen, sie im Browser zu überprüfen und anschließend von einem separaten Chatfenster neben deiner Vorschau aus schnell weiterzuarbeiten.

    Einfach
    5 min

    Nutze Codex, um in einer bestehenden App jeweils eine kleine UI-Anpassung vorzunehmen, sie im Browser zu überprüfen und anschließend von einem separaten Chatfenster neben deiner Vorschau aus schnell weiterzuarbeiten.

    Einfach
    5 min

    Am besten geeignet für

    • Bestehende Apps, deren Grundstruktur bereits steht und an denen du kleine visuelle Anpassungen vornehmen musst
    • Schnelle Review-Schleifen für Produkt und Design, bei denen jeder Hinweis in eine einzelne, gezielte Codeänderung umgesetzt werden soll
    • Runden für den UI-Feinschliff, die im Browser geprüft werden müssen, aber nicht zu einem umfassenden Redesign führen sollen

    Skills und Plug-ins

    • Öffne die laufende App in einem echten Browser, prüfe die betroffene Route und kontrolliere jede kleine UI-Anpassung vor der nächsten Iteration.
    Skill Why use it
    Playwright Öffne die laufende App in einem echten Browser, prüfe die betroffene Route und kontrolliere jede kleine UI-Anpassung vor der nächsten Iteration.

    Einstiegs-Prompt

    Nimm diese UI-Änderung in der bestehenden App vor: [describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment] Vorgaben: - Ändere nur die Dateien, die für diese UI-Anpassung nötig sind. - Verwende vorhandene Komponenten, Tokens, Icons und Layoutmuster wieder. - Lass das Verhalten, den Datenfluss und das Routing unverändert, sofern ich nicht ausdrücklich um eine Änderung bitte. - Starte den Entwicklungsserver oder verwende einen bereits laufenden, prüfe die aktuelle UI im Browser, erstelle den kleinstmöglichen Patch und kontrolliere das Ergebnis visuell. Beende die Arbeit nach dieser einen Änderung und fasse zusammen, welche Dateien du geändert und welche Prüfung du im Browser durchgeführt hast.
    Nimm diese UI-Änderung in der bestehenden App vor: [describe the exact spacing, alignment, color, copy, responsive, or component-state adjustment] Vorgaben: - Ändere nur die Dateien, die für diese UI-Anpassung nötig sind. - Verwende vorhandene Komponenten, Tokens, Icons und Layoutmuster wieder. - Lass das Verhalten, den Datenfluss und das Routing unverändert, sofern ich nicht ausdrücklich um eine Änderung bitte. - Starte den Entwicklungsserver oder verwende einen bereits laufenden, prüfe die aktuelle UI im Browser, erstelle den kleinstmöglichen Patch und kontrolliere das Ergebnis visuell. Beende die Arbeit nach dieser einen Änderung und fasse zusammen, welche Dateien du geändert und welche Prüfung du im Browser durchgeführt hast.

    Einführung

    Wenn du eine bestehende App hast und ihre UI schnell weiterentwickeln möchtest, kannst du mit gpt-5.3-codex-spark kleine, gezielte UI-Änderungen vornehmen. Codex-Spark ist unser schnellstes Modell und für nahezu verzögerungsfreie Code-Iterationen in Echtzeit optimiert.

    Am besten wiederholst du einen kurzen Ablauf: ein visueller Hinweis, eine gezielte Änderung, eine Browserprüfung und dann der nächste Hinweis.

    Für diese Aufgabe kannst du das Modell Codex Spark verwenden. Es ist in Pro-Tarifen verfügbar.

    Modell auswählen

    Nutze für schnelle UI-Iterationen zunächst gpt-5.3-codex-spark, sofern du darauf zugreifen kannst. Dieses Modell ist weniger leistungsfähig als unsere universell einsetzbaren Modelle, aber für Code-Iterationen in Echtzeit ausgelegt. Wenn du nicht darauf zugreifen kannst, verwende gpt-5.6 mit dem Reasoning-Aufwand medium oder low.

    Dieser Kompromiss eignet sich gut für kleinteilige UI-Arbeiten. In der Regel brauchst du kein besonders leistungsfähiges Modell, um einen Button zu verschieben, einen Breakpoint feinzujustieren oder einen Komponentenzustand anzupassen. Du brauchst ein Modell, das schnell reagiert, den lokalen Code versteht, die richtige Datei bearbeitet und den Ablauf wiederholt, ohne dass sich die Iteration schwerfällig anfühlt.

    Entwicklungsablauf

    1. Öffne die bestehende App und rufe die relevante Route oder Komponente auf.
    2. Öffne den aktiven Codex-Chat in einem schwebenden Fenster und lass dieses während der Arbeit neben deinem Browser, deinem Editor oder deiner Designvorschau geöffnet.
    3. Gib Codex jeweils nur eine konkrete UI-Änderung vor. Ergänze die Route, den Viewport, einen aktuellen Screenshot, einen Ziel-Screenshot oder die genaue Produktvorgabe, sofern vorhanden.
    4. Bitte Codex, die aktuelle Implementierung zu prüfen, die kleinstmögliche vertretbare Änderung vorzunehmen und die vorhandenen Komponenten, Tokens, Layout-Grundelemente sowie den Datenfluss der App beizubehalten.
    5. Prüfe das Ergebnis und sende dann im selben Chat die nächste kleine Anpassung.

    Kleine Prompts formulieren

    Prompts für kleinteilige UI-Änderungen sollten direkt und klar begrenzt sein. Ein guter Prompt benennt den betroffenen UI-Bereich, die gewünschte Änderung und die erwartete Prüfung.

    Wenn das Ergebnis fast, aber noch nicht ganz stimmt, formuliere auch den nächsten Prompt ebenso konkret:

    Die Änderung ist fast richtig. Behalte die Implementierung bei, passe aber nur dieses Detail an: [describe the remaining mismatch] Prüfe dieselbe Route und denselben Viewport noch einmal, bevor du die Aufgabe beendest.

    Wann du gründlicher vorgehen solltest

    Halte nicht am schnellen Ablauf fest, wenn die Aufgabe nicht mehr kleinteilig ist. Wechsle zu einem leistungsfähigeren Modell und einem durchdachteren Prompt, wenn die Änderung eine umfassende Refaktorierung, ein neues Grundelement des Designsystems, komplexe Barrierefreiheitslogik oder eine Produktentscheidung erfordert, die mehr als einen Bildschirm betrifft.

    Schnelle UI-Iterationen funktionieren am besten, wenn Codex einen UI-Bereich anpasst, dessen Aufbau bereits klar ist, statt die App von Grund auf neu zu gestalten.

    Verwandte Anwendungsfälle