Screenshots realer Viewports und Blindreviews durch Subagenten für KI-UI
Ein Agent, der sein eigenes JSX und seine Tailwind-Klassen liest, meldet gern einen „klaren und ausgewogenen“ Bildschirm, während das tatsächliche Browser-Rendering unter dreizeiligen Überschriften, unlesbaren grauen Labels auf dunklem Grund und einem einseitigen Raster leidet. Oil UI macht das Rendering in einem echten Browser und die Kritik eines Subagenten ohne Implementierungskontext zu obligatorischen Schritten, bevor eine Oberfläche als fertig gilt.
Die wichtigsten Punkte
- Quellcode ist nicht die Oberfläche: Beurteile Layouts ausschließlich anhand echter Browser-Pixel in den Ziel-Viewports 1440×900, 390×844 oder 1920×720.
- Der Agent, der den Code geschrieben hat, beurteilt seine eigenen Absichten zu wohlwollend. Ein neuer Subagent, der nur die Screenshots sieht, liefert ehrliche Kritik.
- Prüfe drei Ansichten: Aufnahmen der ganzen Seite bei 100 % für den Rhythmus, 200-%-Ausschnitte für Ausrichtung und Rahmen sowie Bilder mit unscharfem Text für das Gewicht der Blöcke.
- Screenshots prüfen die statische Gestaltung; das Durchklicken und Eingeben auf der laufenden Seite bestätigt, dass Zustände, Seitenleisten und Fehlerkorrekturen tatsächlich funktionieren.
npx skills add oil-oil/oil-uiErfordert ein Modell mit Bildverständnis und eine lokale Browserumgebung, die Seiten rendern und aufnehmen kann.
Warum die Prüfung des Quellcodes visuelle Mängel übersieht
Im Quellcode wirkt eine Flex-Zeile mit justify-between aufgeräumt. In einem echten Viewport von 390 px mit einem Produkttitel aus 32 Zeichen und drei Aktionsbuttons drückt dieselbe Zeile die Buttons zu hohen, unlesbaren Pillen zusammen. Ebenso verraten Farbklassen im Code nicht, wann Sekundärtext vor einem dunklen Hintergrund verschwindet.
Viele der stärksten Details in der Oil-UI-Galerie hängen vom exakten Verhalten im Viewport ab: Bei Yantu (Infotainment im Auto bei 1920×720) vergrößert eine bevorstehende Abbiegung die Navigationsanweisung und dunkelt die Mediensteuerung ab; bei Splitwater (Schwimmuhr bei 198×242, DPR=4) dominiert eine einzige große Ziffer den nassen Bildschirm; bei Forkside (Schachlektionen) leuchten nach dem richtigen Springerzug zwei Angriffslinien der Gabel gleichzeitig auf. Nur das echte Rendering bestätigt, dass diese Zustände funktionieren.
| Prüfebene | Vorgehen | Welche Mängel sie findet |
|---|---|---|
| Viewport-Aufnahme bei 100 % | Bildschirmfüllende und vollständig scrollende Screenshots bei 1440×900 (Desktop) oder 390×844 (mobil) | Versteckte primäre Aktionen, eintönige Bereichshöhen, gestörter Scrollrhythmus und abgeschnittene Footer |
| Detailausschnitte bei 200 % | Zweifach vergrößerte Ausschnitte von Kopfleisten, Tabellenzeilen, Formularfeldern und Preispaketen | Doppelte Rahmen, falsch ausgerichtete Zahlenspalten, uneinheitliche Innenabstände und kontrastarme Bildunterschriften |
| Prüfung der unscharfen Blockstruktur | Text wird unscharf gemacht oder verkleinert, sodass nur räumliche Massen und Farbakzente sichtbar bleiben | Kopflastige oder einseitige Layouts, konkurrierende Akzentfarben und einheitliche Raster identischer Boxen |
| Interaktiver Walkthrough im laufenden System | Klicken, Eingeben, Slider ziehen und Fehlerzustände im Browser auslösen | Buttons ohne Funktion, Popover über wichtigem Kontext, fehlerhafte Korrektur nach Validierung und nicht synchronisierte Zustände |
Wie das Blindreview eines Subagenten ohne Kontext funktioniert
Bitte den erstellenden Agenten, seinen eigenen Screenshot zu beurteilen, und er wird seine Fehler meist rechtfertigen, weil er sich an den Prompt erinnert, den er erfüllen wollte.
Oil UI durchbricht diese Bestätigungstendenz mit einem separaten Subagenten, der weder Quellcode noch Implementierungsverlauf erhält – nur die gerenderten PNG-Screenshots und eine einzeilige Produktbeschreibung. Wie ein anspruchsvoller Erstnutzer meldet der unabhängige Prüfer beengte Abstände, verbliebene KI-Klischees und schwachen Kontrast.
Reproduzierbare Screenshots jedes erforderlichen Zustands aufnehmen
Der Hauptagent öffnet die laufende Seite in einem Headless-Browser und nimmt die Standardansicht, aktive Interaktionszustände und mobilen Breakpoints auf.
Die Bilder an einen neuen Subagenten ohne Codekontext übergeben
Der Prüfer untersucht die Aufnahmen anhand der Oil-UI-Kriterien für Lesbarkeit, Hierarchie und generische KI-Muster und liefert eine konkrete Liste visueller Mängel.
Mängel beheben, Ballast entfernen und erneut aufnehmen
Der Hauptagent behebt jedes gemeldete Problem im Code und nimmt einen neuen Screenshot auf, um die Korrektur vor dem Abschluss zu bestätigen.
Prompt-Vorlage für ein Blindreview anhand von Screenshots
Wenn ein Entwurf funktioniert, aber noch nicht ganz stimmig wirkt, führe diesen Review-Durchgang aus:
Führe auf dem aktuellen Bildschirm eine visuelle Prüfung mit Oil UI und ein Blindreview durch einen Subagenten aus:
1. Öffne die laufende Seite in einem lokalen Browser und nimm Screenshots bei 1440×900 (Desktop) und 390×844 (mobil) auf, einschließlich des Standardzustands und [Zustand 1 / Zustand 2].
2. Starte einen neuen Subagenten ohne Codekontext. Übergib nur die Screenshots und die Produktzusammenfassung und lass ihn folgende Punkte kritisieren: verbliebene KI-Vorlagenklischees, kontrastarmer Text, beengte Innenabstände, falsch ausgerichtete Spalten und unklarer Fokus auf dem ersten Bildschirm.
3. Behebe jedes vom unabhängigen Prüfer gemeldete Problem und nimm zur Bestätigung neue Screenshots auf.Funktioniert automatisch in Agenten mit Unterstützung für Subagenten und Bildprüfung, etwa Claude Code und Codex.
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.
Nightwatch
Betriebsüberwachung und Vorfallreaktion
Ein Monitoring- und Bereitschaftstool für ein mittelgroßes Plattformteam (1440×900) mit englischsprachiger Oberfläche: Service-Topologie, Diagramme für Latenz, Fehlerrate und Datenverkehr, letzte Deployments, Logs und Traces; zeige bei einem Vorfall Warnungen, die aktuell bereitschaftsdienstliche Person und eine Vorfall-Zeitleiste. Ein sich entwickelnder Vorfall ist der Kern: Der ausfallende Service und betroffene nachgelagerte Services müssen in der Topologie deutlich erkennbar sein. Beim Ziehen des Zeitbereichs sollen Diagramme, Deployment-Markierungen und Logs aufeinander abgestimmt werden, damit erkennbar wird, welches Deployment das Problem verursacht hat. Entwirf drei Zustände: eine fehlerfreie Übersicht; einen laufenden Vorfall mit Warnung und hervorgehobenem betroffenem Pfad in der Topologie; sowie geöffnete Logs und Traces am Fehlerpeak, um das verantwortliche Deployment zu identifizieren.
Arbeit und Prompt ansehen →
Yantu
Infotainment im Fahrzeug
Die Hauptschnittstelle eines Infotainment-Bildschirms im Fahrzeug (1920×720, während der Fahrt auf einen Blick lesbar), mit chinesischsprachiger Oberfläche: Navigationskarte, aktuell abgespielte Musik, Klimasteuerung und häufige Fahrzeugfunktionen. Wechselnde Prioritäten auf demselben Bildschirm sind der Kern: Normalerweise dominiert die Karte, während Musik und Klima jeweils einen kleinen Bereich einnehmen; vor einer Abbiegung vergrößert sich der Abbiegehinweis automatisch und die Musik weicht; beim Einstellen der Klimaanlage fährt ein Temperaturregler hoch und alles andere wird abgedunkelt. Schaltflächen müssen groß genug sein, um sie ohne Hinsehen sicher zu treffen. Zeichne die Karte selbst, statt einen echten Kartendienst zu verwenden. Farben: nachtblauer bis schwarzer Hintergrund und eine elektrisch blaue Navigationsroute; Bernstein ist Warnungen und Abbiegehinweisen vorbehalten. Verwende weder Warmweiß noch Beige. Entwirf drei Zustände: Fahrt, Annäherung an eine Abbiegung und Klimaeinstellung. Erstelle Screenshots mit 1920×720, DPR=1.
Arbeit und Prompt ansehen →
Splitwater
Schwimmtrainings-App für Uhren
Eine Uhren-App zur Aufzeichnung von Schwimmtraining im Becken (entwerfe jeden Bildschirm mit 198×242, ohne Uhrengehäuse oder Armband zu zeichnen), mit englischsprachiger Oberfläche: Bahnen, Tempo, Herzfrequenz, Countdown für die Pause und eine Zusammenfassung nach dem Schwimmen. Ein Blick auf das Handgelenk muss genügen: Jeder Bildschirm hat eine große Zahl als Hauptmotiv; die Bahnenzahl springt nach jeder vollendeten Bahn kurz; in der Pause schließt sich ein Countdown-Ring und eine Vibration signalisiert die Rückkehr ins Wasser. Der Bildschirm wird nass, deshalb soll er durch Drehen der Krone entsperrt werden und der entsprechende Zustand in der Oberfläche erscheinen. Farben: rein schwarzes Uhrendisplay, Becken-Cyan als Hauptfarbe und weiße Zahlen. Verwende keine warmen Farben. Entwirf fünf Bildschirme: Schwimmen, Pausen-Countdown, Wassersperre, Pause und Ende sowie Trainingszusammenfassung. Liefere `index.html` mit einem interaktiven Bildschirm und `screens.html` mit allen fünf Bildschirmen nebeneinander. Erstelle Screenshots mit 198×242, DPR=4.
Arbeit und Prompt ansehen →
Forkside
Schachtaktik-Lektionen
Eine Website zum Lernen von Schachtaktik (ab 1440×900, responsiv bis 390 Pixel Breite) mit englischsprachiger Oberfläche für Amateurspieler mit einer Wertung von 800–1600. Vermittle jeweils eine Taktik, etwa Gabeln, Fesselungen, Spieße und Abzugsangriffe, mit schrittweisen Erklärungen am Brett und anschließend einigen Aufgaben. Der Kern sind Pfeile und Hervorhebungen, die schrittweise zusammen mit der Erklärung auf dem Brett erscheinen. Bei einem richtigen Zug, etwa einem Springer auf ein Gabelungsfeld, leuchten zwei Angriffslinien gleichzeitig auf. Ein falscher Zug soll die konkrete Antwort des Gegners zeigen, statt nur „falsch“ zu melden. Gestalte Figuren und Brett hochwertig, mit Materialien aus Bildgenerierung oder 3D-Rendering statt Standard-Symbole. Entwirf drei Zustände: eine Lektionserklärung; das Lösen einer Aufgabe; und die nach dem Lösen aufgedeckte Taktik.
Arbeit und Prompt ansehen →Oil UI Pro: Bis zu 3 Blindreview-Runden mit dem Qualitätsziel 9/10
Der kostenlose Skill enthält einen einzelnen Blindreview-Durchgang. Oil UI Pro führt bis zu drei iterative Runden mit Kritik durch Subagenten und dem Ziel 9/10 durch, zusammen mit Checklisten bei 100 % und 200 %, Blockprüfungen mit maskiertem Text und Browser-Walkthroughs mit Klickzählung.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Was passiert, wenn meine Agent-Umgebung keinen Browser öffnen oder keine Bilder untersuchen kann?
Die Briefing-Struktur, Kategorieanleitung und Regeln gegen generische KI-Muster von Oil UI helfen weiterhin bei der Codeerzeugung. Ohne echten Browser und Bildprüfung kann der Agent jedoch keine gerenderten Pixel sehen und keine visuellen Blindreviews ausführen. Für beste Ergebnisse kombiniere Oil UI mit Playwright oder lokalen Browser-Werkzeugen.
Warum zusätzlich zu Screenshots der ganzen Seite Ausschnitte bei 200 % untersuchen?
Aufnahmen der ganzen Seite komprimieren dichte Tabellen und Formularbedienelemente so stark, dass Abweichungen von 1 px, überlappende Rahmen und unklarer Sekundärtext verborgen bleiben. Ausschnitte zentraler Bedienelemente bei 200 % machen Fehler in Mikrotypografie und Abständen eindeutig sichtbar.
Was zeigt das Weichzeichnen oder Maskieren von Text während eines Reviews?
Wenn du die Wörter nicht mehr lesen kannst, verzeihst du einem schwachen Layout nicht mehr nur deshalb, weil der Text klug klingt. Unscharfe Blockansichten zeigen sofort, ob die primäre Aktion hervorsticht und ob das visuelle Gewicht über die Fläche ausgewogen ist.
Wie viele Blindreview-Runden braucht ein typischer Bildschirm?
Ein bis zwei Runden finden bei alltäglichen Bildschirmen die allermeisten Probleme mit Abständen, Kontrast und Klischees. Bei zentralen Landingpages oder komplexen Arbeitsbereichen verbessert der dreistufige Oil-UI-Pro-Zyklus die gestalterische Qualität deutlich.