HTML-Stilvergleich nebeneinander statt UI-Entwurf aus einem einzigen Prompt
Einen KI-Agenten nur einen einzigen Oberflächenentwurf erstellen zu lassen, ist wie einen Designer auf eine Skizze zu beschränken: Du kannst nicht beurteilen, ob eine andere typografische Skala, ein anderer räumlicher Rhythmus oder ein anderer Flächenton dem Produkt besser dienen würde. Ein zentrales Prinzip von Oil UI ist eine HTML-Vergleichsseite mit 3 bis 4 wirklich unterschiedlichen Richtungen und deinen echten Produkttexten, bevor vollständige Anwendungszustände entstehen.
Die wichtigsten Punkte
- Gute gestalterische Urteile brauchen Vergleiche: Drei unterschiedliche Richtungen bei 1440 px oder 390 px nebeneinander machen starke Hierarchien und schwache Muster sofort sichtbar.
- Echte Richtungen unterscheiden sich in räumlicher Komposition, typografischer Stimme, Flächenhelligkeit und zentralen Bedienelementen – nicht nur in der Button-Farbe.
- Nach der Wahl der besten Richtung übernimm ihr System konsequent, statt unvereinbare Fragmente aus verworfenen Varianten zusammenzusetzen.
- Die Galerie enthält vollständige Serien mit mehreren Richtungen aus identischen Briefings: neun Orvo-Seiten, drei Atelier-Volders-Seiten und drei Fonderie-Mercier-Seiten.
npx skills add oil-oil/oil-uiDie integrierte HTML-Vergleichsseite funktioniert im kostenlosen Skill sowohl für Desktop- als auch für mobile Viewports.
Warum ein einzelner Entwurf in lokalen Maxima festhängt
Wenn ein Agent nur einen Bildschirm erzeugt, wählt er naturgemäß den sichersten statistischen Durchschnitt. Antwortest du mit „mach es mutiger“ oder „versuch einen Dark Mode“, korrigiert er lediglich dasselbe Grundgerüst und verwässert dabei häufig Abstände und Kontrast.
Eine Vergleichsseite öffnet dagegen den Gestaltungsraum, bevor du Tokens in sekundäre Zustände investierst. Jede Richtung verwendet deinen tatsächlichen Produktnamen, echte Preispakete und echte interaktive Inhalte statt Lorem ipsum.
| Produkt und gemeinsames Briefing | Richtung A | Richtung B | Richtung C und weitere Varianten |
|---|---|---|---|
| Orvo (KI-Website-Builder; $0 / $24.99 / $34.99 monatlich; Begleitung durch menschliche Experten) | Launch Garden (orvo-garden): helle limettengrüne Fläche mit modularem, wachsendem Erzählrhythmus | Tandem (orvo-tandem): warmes redaktionelles Papier mit menschlicher Partnerschaft im Mittelpunkt | Coastal Workshop (orvo-coast), Open Creative Studio (orvo-studio), The Launch Line (orvo-launch) und 4 weitere |
| Atelier Volders (Holzwerkstatt in Gent, die einen dreibeinigen Eichenhocker in Chargen von 24 Stück herstellt) | Grain & Tenon (volders-grain): drei Jahre luftgetrocknetes Holz, Jahresringe und Holzverbindungen im Mittelpunkt | River Timber (volders-hearth): warme, häusliche Proportionen und die Geschichte der Werkstatt am Korenlei | The Wedged Oak (volders-wedge): technische Querschnitte der Holzverbindungen und Spezifikationstabelle |
| Fonderie Mercier (Familiengießerei für Bronzeglocken mit 18 Glocken pro Monat) | Bronze, with a Voice (mercier-voice): interaktives Anhören der Obertöne im Mittelpunkt | Eighteen Bells (mercier-pour): um monatliche Ofenchargen und Inschriften organisiert | The Tuning Sheet (mercier-bell): zurückhaltendes akustisches Verzeichnis und Frequenznotation |
Was drei Richtungen wirklich unterscheidet
Ohne Kontrolle liefert ein Modell womöglich exakt dasselbe dreispaltige Raster in Blau, Grün und Violett. Oil UI unterscheidet Richtungen entlang von vier strukturellen Achsen; Oil UI Pro ergänzt eine ausdrückliche Prüfung auf Überschneidungen:
- Unterschiedliche Komposition und Einstieg auf dem ersten Bildschirm
- Richtung 1 kann mit bestimmter redaktioneller Typografie und einem Inline-Rechner beginnen; Richtung 2 öffnet direkt eine interaktive Werkbank; Richtung 3 verwendet eine asymmetrische Aufteilung.
- Unterschiedliche typografische Stimme und Größenverhältnisse
- Stelle in einem Entwurf eine kontrastreiche redaktionelle Serifenschrift einer präzisen Grotesk mit monospacebasiertem Tabellensystem in einem anderen gegenüber.
- Unterschiedliche Flächenhelligkeit und Dichte
- Prüfe, wie sich deine echten Inhalte auf warmem Papier, klarem Tageslichtweiß oder einer zur Kategorie passenden, fokussierten dunklen Fläche lesen.
- Nach der Auswahl konsequent nur eine Richtung verfolgen
- Behandle die Vergleichsseite als klaren Auswahlschritt. Nach der Entscheidung für Richtung B entstehen alle weiteren Zustände nach deren Regeln, ohne Widgets aus Richtung A zusammenzuflicken.
Prompt-Vorlage für eine Vergleichsseite mit mehreren Richtungen
Verwende diesen Prompt, wenn du eine neue Website, einen App-Ablauf oder die Neugestaltung eines zentralen Bildschirms beginnst:
Verwende Oil UI, um Designrichtungen für [Produktname und Kategorie] zu erkunden.
- Echte Produktinhalte: [Füge deine Überschrift, 3 Kernfunktionen, genaue Preise oder wichtige Fachfelder ein]
- Ziel-Viewport: [1440×900 Desktop / 390×844 mobil]
Bevor du die vollständigen produktiven Zustände erstellst, erzeuge eine Vergleichsseite mit 3 wirklich unterschiedlichen visuellen Richtungen nebeneinander. Unterscheide sie in der Hero-Komposition, der typografischen Kombination und dem Flächenton und verwende durchgehend unsere echten Produktinhalte. Sobald ich eine Richtung ausgewählt habe, arbeiten wir den vollständigen Ablauf aus.Sowohl im kostenlosen Oil-UI-Skill als auch in Oil UI Pro ohne weitere Einrichtung verfügbar.
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.
Atelier Volders · Maserung & Zapfen
Website einer Möbelwerkstatt
Die Website von Atelier Volders, einer zweiköpfigen Holzwerkstatt an der Korenlei 14 in Gent, Belgien (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Die Werkstatt fertigt nur ein Objekt: De Drievoet, einen dreibeinigen Hocker aus massiver Eiche, der aus drei Jahre luftgetrocknetem Holz von Hand gedrechselt und verkeilt wird. Er entsteht in einer einzigen Charge pro Monat mit 24 Hockern. Er ist in drei Höhen erhältlich (32 cm niedriger Kaminhocker €240, 45 cm Ess- und Schreibtischhocker €270, 62 cm Tresenhocker mit Eschenfußring €310) und drei Oberflächen (mit Seife geschrubbte rohe Eiche, geräucherte dunkle Eiche, gekochtes Leinöl & Bienenwachs). Besucher können Höhe und Oberfläche in Echtzeit wechseln, den sechswöchigen Herstellungsprozess, den Brennstempel mit Chargennummer auf der Unterseite und die Samstagsöffnungszeiten erkunden sowie einen Hocker aus der aktuellen Charge reservieren. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →
Atelier Volders · Flussholz
Website einer Möbelwerkstatt
Die Website von Atelier Volders, einer zweiköpfigen Holzwerkstatt an der Korenlei 14 in Gent, Belgien (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Die Werkstatt fertigt nur ein Objekt: De Drievoet, einen dreibeinigen Hocker aus massiver Eiche, der aus drei Jahre luftgetrocknetem Holz von Hand gedrechselt und verkeilt wird. Er entsteht in einer einzigen Charge pro Monat mit 24 Hockern. Er ist in drei Höhen erhältlich (32 cm niedriger Kaminhocker €240, 45 cm Ess- und Schreibtischhocker €270, 62 cm Tresenhocker mit Eschenfußring €310) und drei Oberflächen (mit Seife geschrubbte rohe Eiche, geräucherte dunkle Eiche, gekochtes Leinöl & Bienenwachs). Besucher können Höhe und Oberfläche in Echtzeit wechseln, den sechswöchigen Herstellungsprozess, den Brennstempel mit Chargennummer auf der Unterseite und die Samstagsöffnungszeiten erkunden sowie einen Hocker aus der aktuellen Charge reservieren. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →
Atelier Volders · Die verkeilte Eiche
Website einer Möbelwerkstatt
Die Website von Atelier Volders, einer zweiköpfigen Holzwerkstatt an der Korenlei 14 in Gent, Belgien (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Die Werkstatt fertigt nur ein Objekt: De Drievoet, einen dreibeinigen Hocker aus massiver Eiche, der aus drei Jahre luftgetrocknetem Holz von Hand gedrechselt und verkeilt wird. Er entsteht in einer einzigen Charge pro Monat mit 24 Hockern. Er ist in drei Höhen erhältlich (32 cm niedriger Kaminhocker €240, 45 cm Ess- und Schreibtischhocker €270, 62 cm Tresenhocker mit Eschenfußring €310) und drei Oberflächen (mit Seife geschrubbte rohe Eiche, geräucherte dunkle Eiche, gekochtes Leinöl & Bienenwachs). Besucher können Höhe und Oberfläche in Echtzeit wechseln, den sechswöchigen Herstellungsprozess, den Brennstempel mit Chargennummer auf der Unterseite und die Samstagsöffnungszeiten erkunden sowie einen Hocker aus der aktuellen Charge reservieren. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →
Fonderie Mercier · Bronze mit Stimme
Website einer familiengeführten Glockengießerei
Die Website von Fonderie Mercier, einer familiengeführten Glockengießerei in dritter Generation am Quai Saint-Vincent 28 am Saône-Ufer in Lyon (ab 1440×900, responsiv bis 390 Pixel Breite), mit englischsprachiger Oberfläche. Sie gießt ein einziges charakteristisches Objekt aus Glockenbronze mit 78% Kupfer / 22% Zinn in verdichteten Flusssandformen: Le Bourdon de Table, auf der Drehbank auf einen präzisen Ton gestimmt und einmal im Monat in einer festen Charge von 18 Glocken gegossen. Die Glocke ist in drei Größen und Tonhöhen erhältlich (Ø 72 mm Tischglocke A4 440Hz €180, Ø 96 mm Hofglocke F#4 370Hz €240, Ø 124 mm Wandglocke mit geschmiedeter Eisenhalterung D4 293.7Hz €340) und drei Patinas (rohe auf der Drehbank bearbeitete Bronze, geräucherte Bronze, Grünspan). Besucher können jede Tonhöhe anhören, Größe und Patina wechseln, den fünfstufigen Gussprozess, das kaltgestempelte Kronenregister und die Freitagsöffnungszeiten erkunden sowie einen Reservierungsschein für den nächsten monatlichen Guss vorbereiten. Es sind keine Produktfotos vorhanden.
Arbeit und Prompt ansehen →Oil UI Pro: Prüfung auf Überschneidungen und Reviews aus mehreren Perspektiven
Oil UI Pro ergänzt automatische Prüfungen auf Überschneidungen zwischen Richtungen, die rein oberflächliche Farbwechsel verhindern, sowie Blindreviews durch Subagenten. Damit kannst du Kandidaten belastbar prüfen, bevor du vollständige Bildschirme ausarbeitest.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Ist die HTML-Vergleichsseite im kostenlosen Open-Source-Skill enthalten?
Ja. Der kostenlose Oil-UI-Skill enthält die Vergleichsseite für Desktop- und mobile Viewports. Installiere ihn über npx skills add oil-oil/oil-ui und bitte deinen Agenten, unterschiedliche Designrichtungen vorzuschlagen.
Wie viele Richtungen sollte ich gleichzeitig vergleichen?
Drei bis vier sind ideal. Zwei Möglichkeiten wirken oft zu sehr wie eine Entweder-oder-Entscheidung; mehr als vier verwässern die Sorgfalt für jeden Kandidaten.
Kann ich die Palette aus Richtung A mit dem Layout aus Richtung B kombinieren?
Du kannst eine zusammengehörige Farbpalette auf das gewinnende Layoutgerüst übertragen, aber vermeide das Mischen einzelner Kartenstile oder Schriftskalen aus verschiedenen Richtungen. Bitte den Agenten, die Flächenpalette aus Richtung A sauber auf das Layout von Richtung B anzuwenden, und prüfe den Kontrast erneut.
Welche Galerie-Arbeiten zeigen die Erkundung mehrerer Richtungen besonders gut?
Öffne die neun Orvo-Landingpages, die drei Websites der Werkstatt Atelier Volders, die drei Seiten der Glockengießerei Fonderie Mercier oder die Paare Vesper, Sonar, Archon und Tempo. Sie eignen sich für den direkten Vergleich in nebeneinander geöffneten Browser-Tabs. Bei Arbeiten mit hinterlegtem Aufgabenbriefing kannst du außerdem die Prompts vergleichen.