UI-Design-Skills im Vergleich zu UI-Generatoren und Komponentenbibliotheken
Entwickler, die heute Oberflächen mit KI erstellen, wählen zwischen drei unterschiedlichen Werkzeugarten: Komponentenbibliotheken wie shadcn/ui, Radix oder Tailwind UI, gehosteten Generatoren für einzelne UI-Entwürfe und UI-Design-Skills für Agenten wie Oil UI, die in Claude Code, Codex oder Cursor laufen. Sie decken unterschiedliche Ebenen desselben Problems ab: barrierefreie Primitive, isolierte Konzeptskizzen und durchgehende Designentscheidungen in deiner echten Codebasis.
Die wichtigsten Punkte
- Komponentenbibliotheken liefern barrierefreie Primitive wie Buttons, Dialoge und Auswahlfelder, entscheiden aber nicht über Seitenhierarchie, Erzählrhythmus oder die Inhalte des ersten Bildschirms.
- Gehostete Generatoren für Einzelentwürfe eignen sich für isolierte Wegwerf-Mockups, aber ihre Ergebnisse lassen sich selten sauber in ein bestehendes Produktionsrepository übernehmen.
- Ein UI-Design-Skill für Agenten wie Oil UI läuft direkt in deinem Coding-Agenten und bringt Richtungsvergleiche, Reduktion generischer KI-Muster und Reviews echter Screenshots in deine tatsächliche Codebasis.
- Du kannst alle drei frei kombinieren: Behalte deine vorhandenen Komponenten-Primitive und steuere Layout, Zustände und visuelle Qualitätssicherung mit Claude Code oder Codex + Oil UI.
npx skills add oil-oil/oil-uiFunktioniert zusammen mit deinem vorhandenen Frontend-Framework und deiner Komponentenbibliothek.
Unterschiede zwischen Komponentenbibliotheken, gehosteten Generatoren und Design-Skills
Frustration über KI-erstellte Oberflächen entsteht meist, weil ein Werkzeug die Aufgabe eines anderen erfüllen soll: etwa wenn eine Primitive-Bibliothek überladene Layouts verhindern oder ein Generator-Mockup aus einer Sandbox in eine zustandsabhängige Produktionsanwendung übertragen werden soll. So unterscheiden sich die drei Kategorien in der Praxis:
| Dimension | Komponentenbibliotheken (shadcn/ui, Radix usw.) | Gehostete Generatoren für Einzelentwürfe | UI-Design-Skill für Agenten (Oil UI) |
|---|---|---|---|
| Was geliefert wird | Barrierefreie Bausteine (Dialog, Select, Combobox) | Eigenständige Vorschauseiten in einer Web-Sandbox | Designmethode, Vergleichsseiten und Blindreviews von Screenshots innerhalb deines Agenten |
| Kenntnis der Codebasis | Als Paket-Primitive installiert; trifft keine Layoutentscheidungen | Läuft außerhalb deines Repositorys; ohne Verbindung zu lokalen Routen und APIs | Liest und bearbeitet dein tatsächliches Repository in Claude Code, Codex oder Cursor |
| Schutz vor generischen KI-Mustern | Keiner – Agenten setzen Primitive weiterhin zu generischen Rastern mit 3 Karten zusammen | Häufig an den hauseigenen Stil und Standardlayouts der Plattform gebunden | Aktive Richtungsexploration, Checklisten gegen KI-Muster und Reduktion von Rahmen |
| Überarbeitung bestehender Apps | Hilft beim Austausch einzelner Bedienelemente, nicht bei Seitenhierarchie oder Abläufen | Lässt sich schwer in produktive Formulare und State-Hooks integrieren | Kommentierte Bildschirmdiagnose, Überarbeitung in 3 Stufen und Ableitung von DESIGN.md |
| Visuelle Prüfung | Manuelle Kontrolle durch Entwickler im Browser | Vorschau im iframe des Generators | Automatische Browser-Aufnahmen bei 1440 px und 390 px mit Kritik durch einen Subagenten im Blindreview |
Kombination in einem echten Entwicklungsprozess
Für einen Design-Skill musst du deinen Stack nicht aufgeben. Teams kombinieren diese Werkzeuge meist auf drei Arten:
- In einer bestehenden Produktionscodebasis (Next.js / Vue + Primitive)
- Behalte Radix oder shadcn/ui für Tastaturzugänglichkeit und Fokusfallen. Installiere Oil UI in Claude Code oder Cursor, damit der Agent nicht jeden Bereich in eine standardmäßige Card-Komponente verpackt, sondern eine klare Seitenhierarchie gestaltet und per localhost-Screenshots prüft.
- Ein neues Produkt, eine Dokumentationswebsite oder ein Desktop-Werkzeug von Grund auf
- Nutze Codex oder Claude Code mit Oil UI, um zuerst eine Vergleichsseite mit 3 Richtungen zu erstellen. Beispiele in der Galerie sind die Komponentenbibliothek Kiln, die API-Dokumentation Dispatch, die Arbeitsfläche von muse und der Coding-Assistent Forge. Wähle die stärkste Richtung und arbeite anschließend die funktionierenden Zustände aus.
- Einen Referenz-Screenshot oder eine grobe Skizze in Produktionscode übertragen
- Übergib ein Referenzbild direkt an deinen Agenten mit Oil UI, um es entweder durch iterative Pixelvergleiche nachzubilden oder seine typografische Stimmung auf deine eigenen Fachinhalte zu übertragen.
Was Oil UI leistet – und was nicht
Klare Erwartungen sparen allen Zeit:
Oil UI ist ein Design-Skill, der Coding-Agenten beibringt, Richtungen zu erkunden, Hierarchien zu strukturieren und gerenderte Bildschirme zu beurteilen. Es ist kein vorgestaltetes React-Widget-Kit und ersetzt nicht die Fähigkeiten des zugrunde liegenden Sprachmodells. Frontier-Modelle wie Claude Opus 5.5 oder GPT 6.1 Sol erreichen weiterhin eine höhere Obergrenze als kleinere Modelle. Außerdem erfordert die visuelle Prüfung einen Agenten, der Bilder untersuchen und einen lokalen Browser ausführen kann. Deshalb empfehlen wir immer, den kostenlosen Open-Source-Skill zuerst an einer echten Aufgabe auszuprobieren, bevor du Oil UI Pro kaufst.
Verwende Oil UI, um [Bildschirmname, z. B. unsere Entwicklerseite für API-Schlüssel und Nutzung] in diesem Repository neu zu gestalten.
- Vorgaben für den Stack: Verwende weiterhin unsere vorhandenen [z. B. Radix- / shadcn/ui-Primitive und Tailwind-Konfiguration], ohne neue UI-Abhängigkeiten hinzuzufügen.
- Designanweisungen: Verpacke nicht jede Gruppe in eine standardmäßig umrahmte Card-Komponente. Schlage zuerst 2 bis 3 unterschiedliche Layoutstrukturen vor, setze die primäre Aktion in den Mittelpunkt, decke Leer- und Fehlerzustände ab und prüfe bei 1440×900 und 390×844 im lokalen Browser.Deine Komponentenbibliothek übernimmt die grundlegende Barrierefreiheit, während Oil UI Komposition und visuelle Qualitätssicherung steuert.
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.
Kiln
Website einer Komponentenbibliothek
Produkt: Kiln, eine quelloffene Komponentenbibliothek für React-Entwickler mit mehr als 40 Komponenten, darunter Schaltflächen, Eingaben, Dropdowns, Befehlspaletten, Dialoge, Tooltips, Tabellen und Datumsauswahlen. Sie unterstützt individuelle Themes. Erstelle ihre Website-Startseite, optional mit einer Komponentendetailseite: - Zeige echte interaktive Komponenten direkt auf der Startseite statt Screenshots. Eine „Komponentenwand“ soll funktionierende Komponenten enthalten, die Nutzer anklicken, mit Text füllen und umschalten können. - Orientiere dich an der Präzision und Zurückhaltung führender Entwicklertool-Websites: überwiegend Schwarz und Weiß, höchstens eine Akzentfarbe, ein strenges Raster und Monospace-Schrift für Code und Zahlen. - Mach einen Theme-Controller einprägsam: Das Ziehen von Radius-, Dichte- oder Akzentfarbreglern verändert sofort jede Komponente auf der Seite. - Füge einen kopierbaren Installationsbefehl, Codeausschnitte, Navigation nach Komponentenkategorie und realistische Nutzungszahlen wie GitHub-Sterne und wöchentliche Downloads hinzu, ohne übermäßig runde Zahlen.
Arbeit und Prompt ansehen →
Dispatch
API-Dokumentation für Entwickler
Die Entwicklerdokumentation eines Zahlungs- oder Messaging-API-Unternehmens (ab 1440×900, responsiv bis 390 Pixel Breite): Navigation links, Artikel in der Mitte und Codebeispiele rechts, die zwischen Sprachen wechseln (cURL, Node, Python). Sie enthält einen Schnellstart, eine vollständige Referenz für einen Endpunkt (Parametertabelle, Anfrage- und Antwortbeispiele, Fehlercodes) und Suche. Während des Lesens folgen die Codebeispiele dem aktuellen Abschnitt, und die gewählte Sprache wird auf der gesamten Website gespeichert. Entwirf die Schnellstartseite, eine Endpunkt-Referenzseite und die geöffnete Suche.
Arbeit und Prompt ansehen →
muse
AIGC-Kreativcanvas
Ein KI-Bild- und Videogenerierungstool für Designer und Kreativteams, mit allen Prompts, Referenzbildern und generierten Ergebnissen auf einer unendlichen Arbeitsfläche. Erstelle den Hauptarbeitsbereich.
Arbeit und Prompt ansehen →
Forge
KI-Coding-Assistent
Produkt: Forge, ein KI-Coding-Assistent für den Desktop. Links befindet sich eine Unterhaltung, rechts der bearbeitete Code und das Terminal. Nutzer können schrittweise beobachten, wie Dateien gelesen, Code bearbeitet und Tests ausgeführt werden. Erstelle die Hauptschnittstelle (1440×900) mit realistischen Daten: Dateinamen, Diffs und Testausgaben, die wie ein echtes Projekt wirken. Mach die Arbeit der KI sichtbar und einprägsam: Schritte leuchten nacheinander auf, Diff-Zeilen erscheinen nach und nach, und Tests wechseln von Rot zu Grün. Erstelle außerdem einen Zustand, in dem die KI auf die Bestätigung einer riskanten Änderung durch den Nutzer wartet.
Arbeit und Prompt ansehen →Mit dem kostenlosen Skill beginnen und bei Bedarf auf Oil UI Pro umsteigen
Der Open-Source-Skill ist unter der MIT-Lizenz kostenlos und umfasst Kategorierecherche, Richtungsvergleiche, Prüfungen auf generische KI-Muster und Screenshot-Nachbildung. Steige auf Oil UI Pro um (einmaliger Kauf, lebenslange Updates), wenn du die Überarbeitung bestehender Projekte in 3 Stufen, 10 Arbeitsbereich-Archetypen, bis zu 3 Blindreview-Runden und Feinschliff einzelner Komponenten benötigst.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Ist Oil UI ein Monatsabonnement oder ein einmaliger Kauf?
Der Open-Source-Skill Oil UI ist vollständig kostenlos (MIT-Lizenz). Oil UI Pro wird einmalig gekauft, enthält lebenslange Updates und verursacht keine Gebühren pro Token oder Generierung. Aktuelle Preise findest du auf der Seite /de/pro/.
Können Backend- oder Full-Stack-Entwickler ohne formale Designausbildung Oil UI effektiv nutzen?
Ja, genau dafür wurde Oil UI entwickelt. Statt typografische Fachbegriffe auswendig zu lernen, beschreibst du Nutzer, Aufgabe und echte Datenfelder. Oil UI führt den Agenten durch Richtungsvergleiche, Reduktions-Checklisten und Blindreviews anhand von Screenshots.
Wie nutzen Produktdesigner Oil UI zusammen mit Figma?
Designer erkunden mit Oil UI in wenigen Minuten interaktive Richtungen mit echten Daten – besonders für zustandsabhängiges Verhalten wie das Bewegen auf Zeitleisten, Live-Preisrechner und mobile Abläufe über mehrere Bildschirme. Außerdem halten sie die Vorgaben in DESIGN.md im Repository fest, damit Engineering-PRs konsistent bleiben.
Wurden alle über 100 Beispiele in der Galerie mit diesem Arbeitsablauf erstellt?
Ja. Jede Arbeit in der Galerie nennt das genaue verwendete KI-Modell (GPT 6.1 Sol, Claude Opus 5.5, Claude Sonnet 5.5, DeepSeek 4.1 Flash usw.) und enthält interaktive Live-Ansichten. Ursprüngliche Aufgaben-Prompts werden nur angezeigt, wenn ein Aufgabendatensatz vorhanden ist. Herbarium, Chronos und Archon haben keine TASK.md und zeigen daher keinen Prompt.