UI-Design mit Claude Code: Oil UI installieren, Prompts formulieren und Screenshots prüfen
Claude Code kann Repository-Strukturen gut erfassen, mehrstufige Arbeit aufteilen und Subagenten starten. Ohne Designvorgaben führen Prompts wie „Erstelle eine moderne Landingpage“ jedoch oft zu violetten Verläufen, verschachtelten Karten und erfundenen KPI-Badges. Oil UI gibt Claude Code einen strukturierten Designprozess: die Kategorie untersuchen, klar unterschiedliche Richtungen vergleichen und die gerenderte Seite in realen Viewports prüfen.
Die wichtigsten Punkte
- Installiere den kostenlosen Open-Source-Skill mit npx skills add oil-oil/oil-ui in Claude Code, ohne dein Projekt an eine bestimmte Komponentenbibliothek zu binden.
- Nenne im Prompt zuerst Produkt, Zielgruppe, zentrale Nutzeraufgabe, echte Inhalte und den Ziel-Viewport, etwa 1440×900 oder 390×844, statt vager Stiladjektive.
- Lass Claude Code bei neuen Seiten oder Redesigns zunächst eine HTML-Vergleichsseite mit 3 bis 4 klar unterschiedlichen Richtungen erstellen, bevor die produktiven Zustände entstehen.
- Nutze Claude-Code-Subagenten für Blindreviews ohne Implementierungskontext bei 100 % und 200 % Vergrößerung, damit Probleme mit Abständen, Kontrast und Hierarchie vor der Übergabe behoben werden.
npx skills add oil-oil/oil-uiOder sende direkt an Claude Code: „Installiere diesen Skill für mich: Führe npx skills add oil-oil/oil-ui aus.“
Warum Claude Code von einem eigenen Design-Skill profitiert
Wenn du Claude Code ohne weitere Methodik um eine „klare, moderne SaaS-Oberfläche“ bittest, greift das Modell auf statistische Durchschnitte aus seinen Trainingsdaten zurück: eine zentrierte Überschrift mit Pillen-Badge, darunter drei gleich breite Karten und dekorative Sparklines oder „+24 %“-Zähler in der Ecke. Der Code lässt sich kompilieren, aber die Oberfläche wirkt so austauschbar wie jede andere KI-Demo.
Oil UI ändert die Reihenfolge der Arbeit. Statt direkt vom Prompt zum fertigen Markup zu springen, untersucht Claude Code, was die Produktkategorie verständlich macht, stellt unterschiedliche visuelle Richtungen auf einer Vergleichsseite gegenüber und prüft das tatsächliche Browser-Rendering, bevor die Arbeit als abgeschlossen gilt.
| Schritt | Einmal-Prompt in Claude Code | Claude Code mit Oil UI |
|---|---|---|
| Ausgangspunkt | Greift auf generische SaaS-Kartenraster und zurückhaltende Standardpaletten zurück | Beginnt mit Produktkategorie, Nutzeraufgabe und echten Inhalten |
| Richtungswahl | Nur ein Ergebnis; bei einem Fehlgriff muss der Prompt von Grund auf neu formuliert werden | Integrierte Vergleichsseite bei 1440 px oder 390 px |
| Daten und Text | Erfindet häufig Prozentwerte und überflüssige Badges | Richtet die Hierarchie an echten Fachfeldern aus und entfernt Ballast |
| Qualitätsprüfung | Endet, sobald der Code kompiliert | Startet einen Subagenten für ein Blindreview der ganzen Seite und von 200-%-Ausschnitten |
Einrichtung in drei Schritten
Du kannst Oil UI global für dein Benutzerkonto oder lokal in einem Repository installieren, damit das ganze Team mit demselben Arbeitsablauf arbeitet.
Skill-Installer ausführen und Claude Code auswählen
Führe den folgenden Befehl im Terminal aus und wähle in der interaktiven Abfrage Claude Code sowie den gewünschten Installationsbereich aus.
npx skills add oil-oil/oil-uiSicherstellen, dass ein lokaler Browser Seiten rendern und aufnehmen kann
Für die visuelle Prüfung werden echte Screenshots statt Vermutungen aus dem Quellcode benötigt. Stelle sicher, dass Playwright oder deine lokale Browser-Automatisierung den Entwicklungsserver bei 1440×900 (Desktop) und 390×844 (mobil) öffnen kann.
Auf Oil UI Pro umsteigen, wenn du den vollständigen Arbeitsablauf brauchst
Wenn du Oil UI Pro gekauft hast, installiere es über die CLI. Bei installiertem Pro benötigst du den Open-Source-Skill nicht zusätzlich.
npx github:oil-oil/oil-cli install oil-ui-pro
So formulierst du aussagekräftige UI-Prompts für Claude Code
Sieh dir die mit Claude erstellten Arbeiten in der Galerie an: Margins, einen Tablet-E-Reader von Claude Opus 5.5, Echo, einen Sprachassistenten von Claude Opus 5.5, Pickup, eine Ride-Hailing-App von Claude Sonnet 5.5, und Pinch Checkout, ein Checkout-Modul von Claude Sonnet 5.5. Jeder Prompt beschreibt die Nutzer, die zentrale Interaktion und die Zustände, die funktionieren müssen.
- Nutzer und Aufgabe klar beschreiben
- Verlange statt einer „eleganten Mobilitäts-App“ konkret „einen Ride-Hailing-Ablauf bei 390×844 mit Bestätigung des Abholpunkts, live verfolgter Ankunft des Fahrers und Zieländerung während der Fahrt“.
- Die zentrale Interaktion benennen
- Sage Claude Code, welches Bedienelement oder welcher Übergang am wichtigsten ist: die live berechnete Preisänderung nach einem Gutscheincode, die Anmerkungsleiste in einem Langtext-Reader oder die Wellenform als Reaktion eines Sprachassistenten.
- Viewports und konkrete Zustände festlegen
- Nenne die genauen Viewport-Maße und die drei oder vier darzustellenden Zustände, damit der Agent jeden Zustand in einem echten Browser prüfen kann.
Verwende Oil UI, um die Oberfläche für [Produkttyp, z. B. ein Checkout-Modul für einen unabhängigen Buchladen] zu gestalten.
- Zielgruppe und zentrale Aufgabe: [z. B. Leser prüfen die Artikel im Warenkorb, wechseln zwischen Abholung und Versand, lösen einen Rabattcode ein und schließen die Zahlung ab]
- Zentrale Interaktion und Zustände: Konzentriere dich auf [wichtigste Interaktion]. Decke [Zustand 1: Standardformular], [Zustand 2: live neu berechnete Versandkosten und Rabatte] und [Zustand 3: Validierungsfehler bei der Karte mit Korrekturmöglichkeit] ab.
- Rahmenbedingungen: Behalte unseren bestehenden Technologie-Stack bei. Ziel ist 1440×900 auf dem Desktop und responsiv bis 390 px Breite.
Schlage zuerst unterschiedliche Designrichtungen vor, damit wir sie vergleichen können, bevor wir die gewählte Richtung weiter ausarbeiten.Ersetze die Felder in eckigen Klammern durch deine echten Fachdetails und füge den Prompt in Claude Code ein.
Blindreviews mit Subagenten anhand echter Screenshots
Ein Agent, der gerade 600 Zeilen CSS geschrieben hat, bemerkt nur selten, wenn sich zwei Labels überlappen oder Sekundärtext zu wenig Kontrast hat. Oil UI löst das, indem der Hauptagent Screenshots der laufenden Seite aufnimmt und sie an einen neuen Claude-Code-Subagenten weitergibt, der nichts über die Implementierung weiß.
Der Prüfer untersucht Aufnahmen der ganzen Seite bei 100 %, 200-%-Ausschnitte dichter Bedienbereiche und unscharfe Blockstrukturen, die eine kopflastige oder eintönige Gestaltung sichtbar machen. Der Hauptagent behebt die gemeldeten Mängel, bevor er dir das Ergebnis zeigt.
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.
Randnotizen
Tablet-E-Reader
Die Tablet-Lesefläche einer App für lange Texte, im Hochformat mit 1024×1366 gestaltet und auf einer Präsentationsfläche platziert: Fließtext, Hervorhebungen, Anmerkungen, Inhaltsverzeichnis und Lesefortschritt. Konzentriere dich auf chinesische Langtext-Typografie: Schriftgrad, Zeilenhöhe, Absatzabstand und Abstände der Satzzeichen sorgfältig behandeln, damit zehn Minuten Lesen angenehm sind. Nutzer können nach dem Markieren von Text eine kurze Anmerkung schreiben. Erstelle drei Zustände: Lesen, Markieren und Schreiben einer Anmerkung sowie geöffnetes Inhaltsverzeichnis.
Arbeit und Prompt ansehen →
Pickup
Fahrtvermittlungs-App
Der Bildschirm nach dem Buchen einer Fahrt in einer Fahrtvermittlungs-App (390×844): ein herannahendes Auto auf einer Karte, Fahrer- und Fahrzeugdetails, voraussichtliche Ankunft und Fahrtfortschritt nach dem Abholen. Zeichne Straßennetz und Route in Code, statt echte Karten-Screenshots zu verwenden. Das Warten auf das Auto ist der Moment mit der größten Anspannung, deshalb muss seine Entfernung sofort erkennbar sein. Erstelle drei Zustände: Warten, Auto eingetroffen und laufende Fahrt. Liefere `index.html` und `screens.html` mit den drei Bildschirmen nebeneinander.
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 →
Echo
KI-Sprachassistent
Eine bildschirmfüllende mobile Oberfläche für einen KI-Sprachassistenten (390×844), mit Schwerpunkt auf der Visualisierung von Klang. Warten auf Sprache, Zuhören, Denken und Antworten sollen jeweils eine eigene Form haben. Zeige beim Antworten unten eine Ergebniskarte, etwa einen für dich gebuchten Termin, statt nur eine leuchtende Kugel. Eine violett-blau leuchtende Kugel ist der häufigste Standard; vermeide diesen Ansatz. Erstelle Aufnahmen aller vier Zustände. Liefere `index.html` und `screens.html` mit nebeneinander dargestellten Zuständen.
Arbeit und Prompt ansehen →Wann der Wechsel vom kostenlosen Skill zu Oil UI Pro sinnvoll ist
Der kostenlose Open-Source-Skill umfasst Kategorierecherche, Richtungsvergleiche, Prüfungen auf generische KI-Muster und die Nachbildung von Screenshots. Wechsle zu Oil UI Pro, wenn du mit Claude Code bestehende Produktionsanwendungen überarbeitest, dichte Desktop-Arbeitsbereiche gestaltest oder bis zu drei Runden mit Blindreviews durch Subagenten und aufgabenbasierten Klickzählungen durchführen möchtest.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Bindet Oil UI Claude Code an React, Tailwind oder eine bestimmte UI-Bibliothek?
Nein. Oil UI liefert Designmethoden, Kriterien für das Layout und Schritte zur visuellen Prüfung. Claude Code schreibt Markup und Styles innerhalb deines bestehenden Stacks, sei es Next.js, Vue, Svelte, reines HTML/CSS oder ein internes Designsystem.
Wie unterscheiden sich Claude Opus und Claude Sonnet bei der Verwendung von Oil UI?
Opus trifft bei typografischer Skalierung, Rhythmus und redaktioneller Hierarchie über ganze Seiten hinweg meist die stärkeren Entscheidungen. Sonnet ist schneller und eignet sich gut für fokussierte Module, das Ergänzen von Zuständen und die Erweiterung einer festgelegten Richtung.
Kann ich Claude Code einen Referenz-Screenshot zum Nachbilden oder Anpassen geben?
Ja. Übergib den Bildpfad und gib an, ob du eine originalgetreue Nachbildung mit Pixelvergleich möchtest oder nur die typografische Stimmung und die Abstände für deine eigenen Produktinhalte übernehmen willst. Oil UI enthält für beide Fälle eigene Arbeitsabläufe.
Woran erkenne ich, dass Claude Code Oil UI tatsächlich anwendet?
Nimm „Verwende Oil UI“ in deinen Prompt auf. Statt sofort unformatierten Standardcode auszugeben, beschreibt Claude Code dann die Nutzeraufgabe, schlägt unterschiedliche visuelle Richtungen vor oder öffnet eine Vergleichsseite und prüft vor dem Abschluss gerenderte Screenshots.