Bestehende UI erneuern und umständliche Abläufe verbessern, ohne die Logik zu beschädigen
Eine neue Demo auf der grünen Wiese zu erzeugen ist einfach. Bei der Überarbeitung einer laufenden Produktionsanwendung scheitern die meisten KI-Prompts daran, API-Verträge, Formularvalidierung oder URL-Zustände intakt zu halten. Eine verlässliche UI-Erneuerung sichert zuerst die fachlichen Invarianten, wählt die passende Eingriffstiefe, prüft den Ablauf durch Klickzählen und leitet aus dem Leitbildschirm ein DESIGN.md ab, bevor die Änderungen auf die übrige Anwendung übertragen werden.
Die wichtigsten Punkte
- Führe zuerst die unverhandelbaren fachlichen Anforderungen auf: API-Payloads, Routenparameter, Berechtigungsprüfungen und Formular-Handler, die intakt bleiben müssen.
- Passe die Eingriffstiefe an das Problem an: Stufe 1 beseitigt visuellen Ballast, Stufe 2 verbessert Layout und fehlende Zustände, Stufe 3 gestaltet umständliche mehrstufige Abläufe neu.
- Miss Verbesserungen der Nutzbarkeit, indem du die echte Aufgabe durchführst und Klicks zählst. Eine Kette aus sechs Klicks und Dialogen auf zwei direkte Aktionen zu verkürzen, ist wertvoller als ein neues Erscheinungsbild.
- Wenn dein Leitbildschirm das Review bestanden hat, halte Tokens, Typografie und Abstände in DESIGN.md fest, damit benachbarte Seiten konsistent bleiben.
npx github:oil-oil/oil-cli install oil-ui-proUm zunächst einfache Richtungsvergleiche und das Entfernen generischer KI-Muster auf einem Bildschirm zu testen, installiere den kostenlosen Skill mit npx skills add oil-oil/oil-ui.
Drei Stufen der UI-Überarbeitung: den Umfang bewusst wählen
Teams zögern oft, einen Coding-Agenten produktive Ansichten anfassen zu lassen, weil ein vager Prompt wie „Mach diese Seite hübscher“ Komponenten-Props durcheinanderbringen oder funktionierende Filter löschen kann. In Oil UI – insbesondere im Arbeitsablauf für bestehende Projekte in Oil UI Pro – ist die Überarbeitung ausdrücklich in drei Stufen unterteilt:
| Stufe | Wann sie geeignet ist | Was sich ändert | Was unverändert bleibt |
|---|---|---|---|
| Stufe 1: Visuellen Ballast entfernen | Der Ablauf funktioniert, aber Rahmen, Schriftgrößen, Abstände und Farben wirken überladen oder veraltet | Typografische Skalierung, Reduktion der Rahmen, Ausrichtung, zurückhaltende Farben und Bereinigung der Karten | DOM-Struktur, Routen, State-Hooks und jeder Interaktionsablauf |
| Stufe 2: Layout und Zustände verbessern | Die visuelle Hierarchie ist flach, wichtige Aktionen sind versteckt oder Lade-, Leer- und Fehlerzustände fehlen | Hierarchie der Bereiche, Proportionen mehrspaltiger Layouts, responsive Breakpoints und vollständige UI-Zustände | Backend-API-Verträge, Geschäftslogik und seitenübergreifende Navigation |
| Stufe 3: Umständliche Abläufe neu gestalten und DESIGN.md ableiten | Nutzer klicken sich durch gestapelte Dialoge oder zersplitterte Bildschirme, um einfache Aufgaben zu erledigen | Zusammenfassen von Schritten, Inline-Bearbeitung, Neugestaltung des Leitbildschirms und repositoryweites DESIGN.md | Zugrunde liegendes Fachmodell und Regeln der Datenintegrität |
Vier Schritte zur sicheren Überarbeitung einer laufenden Anwendung
Ob du eine Vertragsprüfungs-App wie MOQI aus der Galerie, einen Sprint-Tracker wie Relay, einen E-Mail-Client wie Post oder einen Checkout-Ablauf wie Pinch Checkout erneuerst: Folge einer kontrollierten Reihenfolge.
Den aktuellen Bildschirm aufnehmen und eine kommentierte Diagnose erstellen
Lass den Agenten zuerst einen Screenshot der laufenden Seite erstellen und nummerierte visuelle und interaktive Mängel auflisten, etwa drei konkurrierende Buttons in Primärfarbe in der Kopfleiste, eine Tabelle mit 12 Spalten, die bei 1280 px abgeschnitten wird, oder reine Alert-Boxen bei Fehlern.
Zuerst einen Leitbildschirm überarbeiten
Ändere nicht zwanzig Routen gleichzeitig. Wähle den einen Bildschirm, auf dem Nutzer die meiste Zeit verbringen, vergleiche 2 bis 3 Überarbeitungsrichtungen mit echten Daten und lege die beste Richtung fest.
Die vollständige Nutzeraufgabe durchführen und Klicks zählen
Klicke und tippe den echten Ablauf im Browser durch: filtern, absenden, einen Validierungsfehler auslösen und beheben. Vergewissere dich, dass häufige Aufgaben weniger Schritte als zuvor benötigen.
DESIGN.md ableiten und auf benachbarte Seiten übertragen
Wenn der Leitbildschirm das visuelle Review bestanden hat, lass den Agenten Farbpalette der Flächen, Schriftskala, Tabellendichte und Regeln gegen generische KI-Muster in DESIGN.md schreiben und wende diese Vorgaben auf die übrige Anwendung an.
Prompt-Vorlage zur Überarbeitung eines bestehenden Bildschirms
Verwende diese Struktur in Claude Code, Codex oder Cursor, um eine produktive Ansicht zu verbessern und gleichzeitig deine Anwendungslogik zu schützen:
Verwende Oil UI, um [Route oder Komponentenpfad, z. B. app/billing/page.tsx] in diesem Projekt zu überarbeiten.
- Streng beizubehaltendes Verhalten: Behalte alle bestehenden [Datenabfragen, URL-Filterparameter, Formularvalidierungsregeln und Submit-/Export-Handler] intakt. Entferne keine Fachfelder.
- Zu behebende aktuelle Probleme: [z. B. jeder Bereich sieht wie dieselbe umrahmte Karte aus; Tabellenspalten brechen ungünstig um; leere Filterergebnisse und fehlgeschlagene Zahlungen haben keinen eigenen Zustand].
- Überarbeitungsstufe: [Wähle: Stufe 1 Ballast entfernen / Stufe 2 Layout und Zustände verbessern / Stufe 3 Ablauf neu gestalten und DESIGN.md ableiten].
Beginne mit der Aufnahme und Diagnose des aktuellen laufenden Bildschirms, schlage Richtungen vor und prüfe die fertige Seite bei 1440×900 und 390×844.Wenn das beizubehaltende Verhalten im ersten Punkt steht, lassen sich versehentliche Regressionen vermeiden.
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.
MOQI
Website für KI-Vertragsprüfung
Eine Website für ein Produkt zur KI-Vertragsprüfung für interne Rechtsteams. Erstelle die Startseite.
Arbeit und Prompt ansehen →
Relay
Projekt- und Sprintmanagement
Produkt: Relay, ein Aufgaben- und Sprintmanagementtool für Softwareteams mit 20–200 Personen. Erstelle den Hauptarbeitsbereich (1440×900): - Linke Navigation für Teams, Projekte, meine Aufgaben und Posteingang. Zeige in der Mitte den aktuellen Sprint als Aufgabenliste oder Board. Aufgaben besitzen ID, Titel, Status, Priorität, Verantwortlichenavatar und Schätzung. Verwende reichlich realistische Daten: zwanzig bis dreißig Aufgaben mit Namen, die nach tatsächlicher Softwareentwicklung klingen. - Gefühl: dunkel, hochwertig und dicht, wie ein professionelles Werkzeug für acht Stunden täglicher Nutzung. Halte Zeilen kompakt, Tastenkürzel durchgehend sichtbar und Statussymbole konsistent und erkennbar. - Mach die Tastatur-Befehlspalette einprägsam. Ein Kürzel öffnet sie, und wenige getippte Zeichen ermöglichen Navigation, Statusänderung oder Zuweisung. Erstelle eine Aufnahme von ihr im geöffneten Zustand mit einer getippten Abfrage. - Erstelle außerdem eine Aufnahme mit geöffneter Seitenleiste für Aufgabendetails.
Arbeit und Prompt ansehen →
Post
E-Mail-Client
Produkt: Post, ein E-Mail-Client für Menschen, die täglich Hunderte E-Mails bearbeiten. Erstelle die Hauptschnittstelle (1440×900): einen Posteingang, eine geöffnete E-Mail und eine Schnellantwort. Verwende realistische E-Mail-Inhalte aus Arbeitskorrespondenz, Rechnungen und Benachrichtigungen. Gib dem Leeren des Posteingangs ein unverwechselbares Gefühl: Beispielsweise gleitet eine bearbeitete E-Mail sofort weg und die Zahl sinkt. Erstelle außerdem einen Screenshot des leeren Posteingangs.
Arbeit und Prompt ansehen →
Pinch-Kaufabwicklung
Checkout-Modul für E-Commerce
Ein Checkout-Modul für den Onlineshop einer unabhängigen Designermarke (Desktop 1440×900, Checkout-Panel zentriert): Einkaufsliste, Lieferadresse, Zahlungsmethode und Bestellbestätigung. Jeder Schritt soll fließend ineinander übergehen, mit klaren Zuständen für jede Eingabe: wird ausgefüllt, ungültig und abgeschlossen. Der Abschluss einer Bestellung soll Freude auslösen und nicht nur ein Häkchen zeigen. Erstelle drei Zustände: Formular wird ausgefüllt, Validierungsfehler und erfolgreiche Bestellung.
Arbeit und Prompt ansehen →Das vollständige Werkzeugset für bestehende Projekte in Oil UI Pro
Oil UI Pro enthält kommentierte Screenshot-Diagnosen einzelner Seiten, den Überarbeitungsablauf in drei Stufen, Aufgaben-Walkthroughs mit Klickzählung und die Ableitung von DESIGN.md für Konsistenz über mehrere Seiten.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Sollte ich zuerst globale CSS-Tokens definieren oder zuerst einen echten Bildschirm überarbeiten?
Überarbeite zuerst einen repräsentativen Bildschirm. Abstrakte Token-Dateien, die ohne Praxisbezug entstehen, überstehen den Kontakt mit echter Tabellendichte und echten Formularzuständen selten. Wenn ein Leitbildschirm mit echten Daten ausgearbeitet ist, lassen sich präzise Tokens in DESIGN.md ableiten.
Kann ich eine Legacy-App schrittweise überarbeiten, ohne Widgets von Drittanbietern neu zu schreiben?
Ja. Stufe 1 oder 2 kann Seitenraster, Typografie, Abstände und umgebende Zustände neu organisieren, während komplexe eingebettete Widgets unverändert bleiben, bis du sie ersetzen möchtest.
Wie prüfe ich, ob ein Redesign die Nutzbarkeit tatsächlich verbessert hat?
Prüfe zwei Dinge: Blende zuerst den Text weich, um zu sehen, ob primäre Aktion und Ausnahmezustände strukturell hervorstechen. Führe anschließend die zentrale Nutzeraufgabe im Browser aus und vergleiche Klickzahl, Suchzeit beim Scrollen und Fehlerkorrektur mit der früheren Version.
Wo liegt DESIGN.md nach der Ableitung?
Lege DESIGN.md im Repository-Stamm oder im Ordner docs/ ab. Wenn du oder ein Teammitglied anschließend in Claude Code, Codex oder Cursor eine neue Funktion erstellt, verweist den Agenten auf DESIGN.md, damit neue Bildschirme zum etablierten System passen.