Oil UI in Cursor, Windsurf und Coding-Agenten in der IDE verwenden
Viele Entwickler erstellen und verbessern Oberflächen direkt in Cursor, Windsurf, Antigravity oder Gemini CLI, zusammen mit ihrem Anwendungscode. Da Oil UI das offene Skill-Format verwendet, stattet ein einziger Befehl npx skills add oil-oil/oil-ui diese IDE-Agenten mit demselben aufgabenorientierten Arbeitsablauf aus: Richtungen erkunden, funktionierende Zustände im vorhandenen Stack implementieren und gerenderte Screenshots prüfen.
Die wichtigsten Punkte
- Ein Installer deckt die wichtigsten Coding-Agenten ab: Führe npx skills add oil-oil/oil-ui aus und wähle Cursor, Windsurf, Claude Code oder Codex.
- Begrenze jeden Prompt bei der Überarbeitung in einer bestehenden Codebasis auf eine Seite oder einen Nutzerablauf und liste Props, Hooks und Routen auf, die unverändert bleiben müssen.
- Verlange bei eigenständigen UI-Modulen wie Uploads, Checkouts oder Konfiguratoren von Anfang an Ruhe-, Aktiv-, Abschluss- und Fehlerzustände.
- Lass deinen IDE-Agenten den lokalen Entwicklungsserver öffnen und echte Browser-Screenshots bei 1440 px und 390 px prüfen, statt sich nur auf Code-Diffs zu verlassen.
npx skills add oil-oil/oil-uiUnterstützt sowohl die projektbezogene Installation, die du mit deinem Team teilen kannst, als auch die Installation auf Benutzerebene.
Oil UI für IDE- und CLI-Agenten installieren
Ob du in der Agent-Seitenleiste von Cursor, mit Windsurf Cascade, Antigravity oder einem Terminal-Agenten arbeitest: Oil UI stellt denselben Designprozess und dieselben Checklisten für die visuelle Prüfung bereit.
Den interaktiven Skill-Installer ausführen
Führe den Befehl im Projektstamm oder im Terminal aus und wähle die Coding-Agenten aus, die du täglich verwendest.
npx skills add oil-oil/oil-uiFür ein konsistentes Vorgehen im Team projektbezogen installieren
Bei der Auswahl des Projektbereichs wird der Skill im Repository abgelegt, sodass der IDE-Agent jedes Teammitglieds dieselben Layout- und Prüfstandards befolgt.
Oil UI im Prompt ausdrücklich aufrufen
Beginne UI-Prompts mit „Verwende Oil UI, um ... zu gestalten“ oder „Verwende Oil UI, um diesen Bildschirm zu überarbeiten“, damit der Agent den Designprozess ausführt, statt nur punktuell Styles zu ändern.
Vier Gewohnheiten für die Gestaltung in einer bestehenden Codebasis
Ein häufiger Fehler bei IDE-Agenten besteht darin, Backend-Arbeit und ein vollständiges visuelles Redesign in einem ausufernden Prompt zu vermischen. Eine klare Trennung sorgt für sauberen Code und ein sauberes Layout:
- Jeweils auf ein abgeschlossenes Modul oder einen Aufgabenablauf begrenzen
- Arbeite ein einzelnes Modul vollständig aus, etwa das Datei-Upload-Modul Chute oder den mechanischen Tastaturkonfigurator KEEB aus der Galerie, bevor du zu benachbarten Bildschirmen weitergehst.
- Angeben, welche Daten-Hooks und Handler unverändert bleiben
- Sage dem Agenten bei der Aktualisierung einer produktiven React- oder Vue-Ansicht: „Behalte Formularzustand, API-Mutationen und Routenparameter unverändert; überarbeite nur Layout, Hierarchie und Rückmeldungen zu Zuständen.“
- Neue Richtungen auf einer separaten Route vergleichen, bevor du sie übernimmst
- Wenn eine Seite eine neue visuelle Richtung braucht, lass den Agenten zuerst 3 unterschiedliche Varianten nebeneinander rendern und übertrage anschließend die gewählte Richtung in deine Hauptkomponenten.
- Auf localhost immer bei Desktop- und Mobilbreite prüfen
- Bevor du einen Diff akzeptierst, lass den Agenten den laufenden Entwicklungsserver öffnen und Screenshots bei 1440 px und 390 px aufnehmen, um Überläufe, beengte Abstände oder unzureichenden Kontrast zu erkennen.
Wiederverwendbarer Prompt zum Ausarbeiten von Modulen in Cursor und Windsurf
Verweise im IDE-Chat auf die Zielkomponente und verwende diese Struktur für eine vollständige Implementierung mit mehreren Zuständen:
Verwende Oil UI, um [Modulname, z. B. unser Upload-Modul für Dateifreigaben / den Produktkonfigurator] in diesem Repository zu gestalten und zu implementieren.
- Vorgaben der Codebasis: Behalte bestehende [Hooks, Props und API-Typen] unverändert.
- Erforderliche Zustände: Implementiere 1) den inaktiven Standardzustand, 2) direkte Rückmeldung beim Ziehen oder bei der Eingabe, 3) Fortschritts- und Abschlusszustand (mit Bestätigung für Kopieren/Teilen) und 4) einen Fehlerzustand bei Validierung oder Überschreitung eines Limits.
- Visuelle Disziplin: Vermeide verschachtelte Karten und dekorative Pillen-Labels über Überschriften. Schaffe Hierarchie durch typografische Skalierung, Abstände und klare Fokuszustände und prüfe das Ergebnis anschließend im lokalen Browser.Funktioniert gut, wenn du in Cursor oder Windsurf auf deine bestehende Komponentendatei verweist.
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 →
Sonar
Team-Messaging
Eine Desktop-Messaging-App für Unternehmen mit 30–300 Personen (1440×900): links Kanäle, Gruppen und Direktnachrichten, in der Mitte die laufende Unterhaltung. Nachrichten umfassen Text, Bilder, Dateien, Codeausschnitte, Umfragen und Emoji-Reaktionen. Verwende eine chinesischsprachige Oberfläche. Das unmittelbare Kommunikationsgefühl ist das Herzstück: Eine Nachricht senden, mehrere Kollegen gleichzeitig schreiben sehen, einen Thread zu einer Nachricht öffnen sowie Antworten und Reaktionen anderer in Echtzeit erscheinen lassen – all das soll flüssig und gewichtig wirken. Mach daraus weder einen E-Mail-Client noch ein Aufgabenboard. Entwirf drei Zustände: Alltagsgespräch in einem aktiven Kanal; einen zu einer Nachricht geöffneten Thread; sowie das Erwähnen einer Kollegin oder eines Kollegen im Eingabefeld und das Hereinziehen einer Datei, bereit zum Senden.
Arbeit und Prompt ansehen →
KEEB · Tastenordnung
Online-Konfigurator für mechanische Tastaturen
Die Website einer Marke für mechanische Tastaturen, auf der Nutzer Gehäuse, Schalter und Tastenkappen wählen, um ihre eigene Tastatur online zu konfigurieren. Erstelle die Konfiguratorseite.
Arbeit und Prompt ansehen →
Chute
Datei-Upload-Modul
Das Upload-Modul eines Dateifreigabetools (Desktop 1440×900, Modul zentriert): Ziehe Dateien hinein, zeige den Upload-Fortschritt und erzeuge nach dem Upload einen Freigabelink mit Ablaufdatum und Passwort. Gib Rückmeldung beim Ablegen von Dateien, zeige den gleichzeitigen Fortschritt mehrerer Dateien und gestalte den Moment des Linkkopierens befriedigend. Erstelle drei Zustände: Dateien werden hereingezogen, Upload läuft und abgeschlossen mit verfügbarer Freigabe.
Arbeit und Prompt ansehen →Bestehende Projekte überarbeiten und Komponenten mit Oil UI Pro ausarbeiten
Oil UI Pro ergänzt spezielle Arbeitsabläufe für bestehende Codebasen: kommentierte Diagnose einer Einzelseite, drei Stufen der Überarbeitung (aufräumen / verbessern / Ablauf neu gestalten + DESIGN.md) und intensive Feinarbeit an einzelnen Komponenten.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Welches Modell sollte ich in Cursor oder Windsurf zusammen mit Oil UI wählen?
Verwende Claude Opus oder Frontier-Modelle aus der GPT-/Codex-Reihe, wenn du neue visuelle Richtungen erkundest oder komplexe Seiten neu strukturierst. Sobald eine Richtung oder DESIGN.md feststeht, eignen sich Claude Sonnet und schnellere Modelle gut, um Zustände auf verwandte Bildschirme zu übertragen.
Funktioniert Oil UI zusammen mit shadcn/ui, Radix oder Tailwind?
Ja. Primitive-Bibliotheken liefern barrierefreie Bedienelemente, während Oil UI Seitenkomposition, visuelle Hierarchie, Richtungsexploration und das Entfernen generischer KI-Muster steuert. Beide ergänzen sich.
Wie stelle ich sicher, dass der Agent vorhandene Klick-Handler oder die Formularvalidierung nicht beschädigt?
Liste die beizubehaltenden Handler in deinem Prompt auf und folge dem Oil-UI-Walkthrough: Klicke den primären Ablauf tatsächlich durch und löse im Browser das Absenden mit ungültigen Formulardaten aus, bevor du abschließt.
Kann mein Team Cursor und Claude Code / Codex im selben Repository verwenden?
Ja. Wähle bei npx skills add oil-oil/oil-ui alle relevanten Agenten aus oder committe ein gemeinsames DESIGN.md, damit jedes Werkzeug dieselben Designregeln liest.