Oil UI installieren und KI-UI gestalten: der Leitfaden
Oil UI ist ein UI-Design-Skill für KI-Agenten. Er gibt dem Modell eine Designmethode: mit der Aufgabe und echten Inhalten beginnen, klar unterschiedliche Richtungen erkunden und anschließend die funktionierende Oberfläche ausarbeiten. Die Beispiele in der Galerie nennen das verwendete KI-Modell. Bei Werken mit dokumentierter Aufgabe wird auch das ursprüngliche Briefing angezeigt. So kannst du das Ergebnis prüfen, bevor du den Arbeitsablauf auf dein eigenes Projekt anwendest.
1. Kostenlosen Open-Source-Skill installieren
Führe diesen Befehl in deinem Terminal aus und folge dem Installer, um deinen Agenten und den Installationsbereich auszuwählen. Du kannst den Befehl auch an deinen Agenten senden und dir helfen lassen. Wenn du DeepSeek Harness verwendest, installiere das native Plugin dsh-oil-ui mit dsh plugin --profile web add github:oil-oil/dsh-oil-ui. Es enthält den kostenlosen Skill und erkennt eine lokale Installation von Oil UI Pro automatisch.
npx skills add oil-oil/oil-ui2. Dem Agenten eine echte Aufgabe geben
Erkläre das Produkt, seine Zielgruppe und die Aufgabe, die Menschen erledigen müssen. Liefere echte Inhalte, den Umfang der Seite und technische Rahmenbedingungen. Nenne bei einem bestehenden Projekt das fachliche Verhalten, das erhalten bleiben muss. Ein klares Briefing ist hilfreicher als eine lange Liste von Stiladjektiven.
Verwende Oil UI, um die Startseite meines Buchungswerkzeugs zu gestalten. Kunden kleiner Studios müssen eine Leistung auswählen, einen verfügbaren Termin finden und buchen. Zeige mir zuerst unterschiedliche Designrichtungen. Behalte den bestehenden Stack und Buchungsablauf bei.3. Richtungen vergleichen, bevor du sie ausarbeitest
Bitte deinen Agenten, die Richtungen nebeneinander zu zeigen. Vergleiche Hierarchie, Typografie, Layout und primäre Aktion mit echten Inhalten und wähle anschließend eine Richtung zur Ausarbeitung. Prompts aus der Galerie können als Referenz dienen, müssen aber an dein eigenes Produkt und deine Rahmenbedingungen angepasst werden.
Alle Beispiele →4. Die Seite öffnen und die Aufgabe vollständig durchführen
Prüfe den ersten Bildschirm, lange Inhalte, mobile Layouts und zentrale Aktionen auf der funktionierenden Seite. Decke die Lade-, Leer- und Fehlerzustände ab, die deine Aufgabe tatsächlich benötigt. Screenshots helfen beim Vergleich visueller Details; Klicken und Eingeben bestätigen, ob die Interaktion funktioniert. Melde deinem Agenten die konkrete Seite, Aktion und das Ergebnis.
5. Pro entdecken, wenn du die vollständige Methode brauchst
Oil UI Pro behandelt Interaktionen und Zustände, responsive Layouts, die Erneuerung bestehender Projekte, Reviews aus mehreren Perspektiven und Aufgaben-Walkthroughs. Kaufe auf der Pro-Seite oder bitte deinen Agenten, den Installer auszuführen und bei Anmeldung, Zahlung und Installation zu helfen. Die Ergebnisse hängen weiterhin vom Modell ab; probiere den kostenlosen Skill deshalb zuerst an einer echten Aufgabe aus.
npx github:oil-oil/oil-cli install oil-ui-proUI-Designinspiration nach Format und Aufgabe
Durchsuche funktionierende Beispiele aus der Oil-UI-Galerie nach Oberflächenformat oder konkreter Designaufgabe. Öffne die originalen Demos, vergleiche Ansätze und sieh dir die zugrunde liegenden Prompts an.
Designbeispiele →Ausführliche Leitfäden und Praxisanleitungen
Entdecke Arbeitsabläufe nach Coding-Agent, Oberflächentyp oder Designproblem. Jeder Leitfaden enthält funktionierende Beispiele aus der Galerie, Prompt-Vorlagen und Review-Checklisten.
Leitfäden für Agenten und Werkzeuge
Arbeitsabläufe, Einrichtungsbefehle und Prompt-Strukturen für Oil UI in Claude Code, OpenAI Codex, DeepSeek Harness, Cursor und Windsurf.
Leitfaden für UI-Design mit Claude Code
Installiere Oil UI in Claude Code und gestalte Websites, mobile Apps und UI-Module mit Richtungsvergleichen, klaren Briefings und Blindreviews anhand echter Screenshots.
Agent-Leitfaden · OpenAI CodexLeitfaden für UI-Design mit Codex
Installiere und verwende Oil UI in OpenAI Codex für Schriftgießereien, Incident-Konsolen, Abrechnungs-Dashboards und mobile Apps mit funktionierenden Interaktionen und Prüfungen in realen Viewports.
Agent-Leitfaden · DeepSeek HarnessLeitfaden für DeepSeek Harness
Installiere das native Plugin dsh-oil-ui mit einem Befehl in DeepSeek Harness. Es enthält den kostenlosen Oil-UI-Skill, erkennt eine lokale Oil-UI-Pro-Installation und zeigt Galerie-Arbeiten von DeepSeek 4.1 Flash.
Agent-Leitfaden · Cursor / Windsurf / IDEsLeitfaden für Cursor und Windsurf
Installiere Oil UI in Cursor, Windsurf, Antigravity und Gemini CLI, um neue Module zu gestalten oder vorhandene Projektseiten innerhalb deines aktuellen Stacks zu überarbeiten.
Praxisanleitungen nach Oberflächentyp
Praktische Methoden für Landingpages, Dashboards und Desktop-Arbeitsbereiche, mobile Apps mit mehreren Bildschirmen und die Erneuerung von UI in bestehenden Projekten.
Praxisleitfaden für Websites und Landingpages
Hinterlasse generische KI-Landingpages mit drei Karten. Lerne, wie du Interaktionen im Hero gestaltest, mehrere Richtungen aus einem Briefing vergleichst und Viewports bei 1440 px und 390 px prüfst.
Praxisleitfaden · Dashboards und ArbeitsbereichePraxisleitfaden für Dashboards und Arbeitsbereiche
Löse dich vom KI-Klischee aus vier KPI-Karten und drei Diagrammen. Erstelle objektorientierte Konsolen und Desktop-Arbeitsbereiche mit klarer Hierarchie und verbundenen Zuständen.
Praxisleitfaden · Mobile App-UIPraxisleitfaden für mobile App-UI
Verhindere, dass KI-Agenten für Mobilgeräte zusammengedrückte Desktop-Websites erstellen. Gestalte mobile Apps bei 390×844 mit mehreren Bildschirmen, screens.html und direkt erlebbaren Zuständen.
Praxisleitfaden · Überarbeitung bestehender ProjekteUI bestehender Projekte überarbeiten
Nutze Oil UI, um laufende Bildschirme zu diagnostizieren, bestehende Codebasen kontrolliert in drei Stufen zu überarbeiten (aufräumen, Layout verbessern, Abläufe neu gestalten) und ein gemeinsames DESIGN.md abzuleiten.
Designmethoden und visuelle Qualitätssicherung
Generische KI-Muster vermeiden, Richtungen direkt vergleichen, unabhängige visuelle Reviews in realen Viewports durchführen und die passenden UI-Werkzeuge auswählen.
Generische KI-Oberflächen verbessern
Warum sehen KI-generierte Websites und Dashboards gleich aus? Entferne Pillen-Labels, farbige linke Rahmen, verschachtelte Karten und erfundene Kennzahlen mit Oil UI.
Designmethode · Direkter RichtungsvergleichDesignrichtungen direkt vergleichen
Warum der Vergleich von 3 klar unterschiedlichen Designrichtungen auf einer HTML-Seite besser ist als ein einzelner Entwurf mit immer neuen Prompts. Entdecke die Serien Orvo, Atelier Volders und Fonderie Mercier.
Designmethode · Blindreview echter BildschirmeBlindreview echter Bildschirme
Warum die Prüfung von JSX und CSS im Editor Layoutfehler übersieht. Oil UI nutzt Browser-Screenshots bei 1440 px und 390 px, 200-%-Ausschnitte, unscharfe Blockprüfungen und unabhängige Subagenten.
Designmethode · WerkzeugvergleichUI-Design-Skills und Generatoren im Vergleich
Ein sachlicher Vergleich von UI-Design-Skills für Agenten wie Oil UI, gehosteten UI-Generatoren für Einzelentwürfe und Komponentenbibliotheken wie shadcn/ui und Radix – und wie sie zusammenarbeiten.
Praxistest · Ein Modell und anonyme visuelle ReviewsUI-Design-Skills im Praxistest
Kontrollierter CommonShelf-Test von Oil UI, frontend-design, UI UX Pro Max, Impeccable und einer Kontrolle ohne Skill mit Kimi AgentSwarm und kimi-1021-preview – mit allen 15 Bewertungen, zwei Fehlschlägen und funktionierenden Demos.
Häufige Fragen
Ist Oil UI eine Komponentenbibliothek oder eine Vorlage?
Oil UI ist ein Design-Skill, den ein Agent für Methoden und Arbeitsabläufe liest. Er schreibt keine feste Komponentenbibliothek oder Vorlage vor. Der Agent implementiert die Oberfläche innerhalb der Rahmenbedingungen deines Projekts.
Warum variieren die Ergebnisse mit demselben Skill?
Die Beispiele verwenden unterschiedliche Briefings, Modelle und Ausarbeitungsrunden. Jedes Beispiel nennt das verwendete Modell. Wenn eine Aufgabe dokumentiert ist, wird außerdem der ursprüngliche Prompt angezeigt. Der Skill hilft einem Modell, seine vorhandenen Fähigkeiten zu nutzen; er kann nicht bei allen Modellen dieselbe Designqualität garantieren.
Kann ich ein bestehendes Produkt verbessern?
Beginne mit einer bestimmten Seite oder Aufgabe. Nenne zu erhaltende Geschäftsabläufe, echte Daten und technische Rahmenbedingungen und bitte anschließend um Designrichtungen. Prüfe nach der Auswahl die vollständige Aufgabe, insbesondere vorhandene Formulare, Navigation und Rückmeldungen zu Zuständen.
Welche Coding-Agenten funktionieren mit Oil UI?
Der kostenlose Skill wird mit npx skills add oil-oil/oil-ui installiert, Oil UI Pro mit npx github:oil-oil/oil-cli install oil-ui-pro. Beide funktionieren mit Claude Code, OpenAI Codex, Cursor, Windsurf, Antigravity und Gemini CLI. Für DeepSeek Harness installierst du das native Plugin mit dsh plugin --profile web add github:oil-oil/dsh-oil-ui.
Wie verhindere ich, dass KI-Agenten generische „KI-Slop“-Oberflächen erzeugen?
Liefere echte Fachtexte und Preise, statt das Modell Prozentwerte erfinden zu lassen. Vergleiche zuerst 3 unterschiedliche Richtungen auf einer HTML-Vergleichsseite, entferne standardmäßige Pillen-Labels und verschachtelte Karten und lasse einen Subagenten echte Browser-Screenshots bei 1440 px und 390 px im Blindreview prüfen.
Brauche ich den kostenlosen Skill, wenn ich bereits Pro habe?
Nein. Pro enthält die Open-Source-Designmethode. Wenn beide installiert sind, können sie um dieselben Anfragen konkurrieren. Verwende Pro daher allein, wenn du es bereits hast.
Wie kaufe, installiere und aktualisiere ich Pro?
Der aktuelle Preis beträgt $9.99 als Einmalkauf mit lebenslangen Updates. Nach dem Kauf kannst du Pro über dein Konto installieren oder herunterladen oder deinen Agenten mit dem obigen CLI-Befehl arbeiten lassen. Aktuelle Preise und Zahlungsmethoden findest du auf der Pro-Seite.