Generische KI-Oberflächen verbessern: Eine Reduktions-Checkliste für Coding-Agenten
Ohne Anleitung greifen Sprachmodelle immer wieder zu denselben erkennbaren UI-Mustern: ein leuchtendes Pillen-Label über jeder Überschrift, Karten in Karten, 4 px breite farbige Rahmen links und erfundene Badges wie „+128 % Effizienz“ in der Ecke. Der generische KI-Look verschwindet nicht durch weitere Shader-Effekte, sondern durch das Entfernen dieser Standardmuster und eine Gestaltung auf Grundlage echter Fachinhalte.
Die wichtigsten Punkte
- Erkenne die verräterischen KI-Standards früh: allgegenwärtige Pillen-Labels, 4 px breite Akzentbalken links, dreifach verschachtelte Karten, weit gesperrte Großbuchstaben und erfundene KPI-Prozentwerte.
- Ersetze Rahmen durch Ausrichtung und Abstände: Wenn zwei Elemente durch Nähe und Schriftskala bereits als Gruppe lesbar sind, entferne den äußeren Container.
- Verankere jede Zahl in der echten Produktlogik – tatsächliche Paketpreise, Chargengrößen oder Latenzen in Millisekunden – statt in dekorativen Marketingstatistiken.
- Wende vor der Veröffentlichung die Oil-UI-Checklisten für Reduktion und Lesbarkeit auf Browser-Screenshots bei 100 % und 200 % an.
npx skills add oil-oil/oil-uiStattet deinen Coding-Agenten mit integrierten Regeln gegen generische KI-Muster und Prüfungen für visuelle Reviews aus.
Sechs Gewohnheiten, die eine unbearbeitete KI-Oberfläche sofort verraten
Was Menschen als „KI-Slop“ bezeichnen, ist selten eine einzelne schlechte Farbe. Es ist eine Ansammlung überflüssiger Widgets, die das Modell einsetzt, wenn es nicht weiß, was visuelles Gewicht tragen soll. Das Entfernen dieser sechs Muster verändert die Wirkung einer Seite sofort:
| KI-Standardmuster | Warum es der Oberfläche schadet | Ersatz und Reduktion mit Oil UI |
|---|---|---|
| Ein Pillen-Badge über jeder Bereichsüberschrift | Zwölf Pillen auf einer Seite verwässern die Hierarchie, bis nichts mehr wichtig wirkt | Beginne Bereiche direkt mit einer klaren Überschrift oder Zahl; reserviere Badges für echte Live-Zustände |
| Karten in Karten mit 4 px breiten farbigen Rahmen links | Gestapelte Innenabstände und parallele Rahmen verdrängen den eigentlichen Inhalt | Entferne äußere Kartencontainer; gruppiere Inhalte mit Ausrichtung am Raster, Weißraum und einzelnen feinen Linien |
| Neonfarbene violette oder indigoblaue Verläufe und überall Milchglas | Überträgt dieselbe Krypto-/SaaS-Palette auf Holzwerkstätten, Kliniken und Entwicklerwerkzeuge | Leite Flächen- und Akzentfarben aus dem Fachgebiet ab: rohe Eiche und Leinen, dunkle Bronze, Papier und Tinte |
| Erfundene Füll-Badges wie „+240 % Geschwindigkeit“ oder „99,98 % Genauigkeit“ | Besucher erkennen falsche Zahlen sofort, was das Vertrauen in das echte Produkt schwächt | Zeige nur echte Produktzahlen: Hockermaße in cm, eine Chargengröße von 24 oder echte Rechnungspositionen |
| Drei identische, gleich breite Karten mit kreisförmigen Liniensymbolen | Die Dreierzeile „Schnell / Intelligent / Sicher“ ist das typische Klischee von Einmal-Prompts | Verwende asymmetrische Layouts oder platziere ein funktionierendes interaktives Bedienelement direkt auf der Fläche |
| Kontrastarmer grauer Fließtext auf Grau und winzige Labels in Großbuchstaben | Wirkt als Miniatur aufgeräumt, ermüdet aber beim tatsächlichen Lesen | Sorge für lesbaren Kontrast, angenehme 55–75 Zeichen pro Zeile und vier klar unterscheidbare Schriftgrößen |
Ballast entfernen: zuerst Rahmen, dann Schriftskala und Raum
Öffne Fieldwork Type, Atelier Volders · Grain & Tenon oder TRACE (scent) in der Galerie. Dort werden Inhalte selten in abgerundete Schattenboxen gesetzt, und dennoch wirkt jeder Bereich eigenständig. Diese Klarheit beruht auf drei Grundlagen:
- Weniger Schriftgrößen mit deutlicherem Kontrast verwenden
- Vier klar unterschiedene Größen – große Überschrift, Bereichsüberschrift, Fließtext und Bildunterschrift/Metadaten – können eine ganze Anwendung tragen. Verteile nicht 11 px, 12 px, 13 px, 14 px und 15 px über dieselbe Ansicht.
- Die Hälfte der Rahmen löschen und prüfen, ob das Layout weiterhin funktioniert
- Entferne beim Review Containerrahmen und Hintergrundfüllungen nacheinander. Wenn Linksausrichtung und vertikaler Rhythmus die Gruppen bereits trennen, lass die Box weg.
- Funktionierende Bedienelemente statt dekorativer Symbole einsetzen
- Statt neben einem Absatz über flexible Lizenzen ein Schildsymbol zu zeichnen, zeige die tatsächlichen Auswahlfelder für Desktop-, Web- und App-Lizenzen und aktualisiere den Preis per Klick.
Ein Prompt-Block gegen generische KI-Muster für jedes Briefing
Zusätzlich zur Installation von Oil UI kannst du deinem Coding-Agenten diese ausdrücklichen Leitplanken mitgeben:
Wende die Oil-UI-Standards an und setze diese Regeln zur Reduktion durch:
1. Platziere keine Pillen-Badges über Bereichsüberschriften, verwende keine 4 px breiten farbigen Akzentrahmen links und vermeide standardmäßig leuchtende violette oder blaue Verläufe.
2. Erfinde keine überflüssigen Marketingkennzahlen wie „+128 %“ oder „99,9 % Verfügbarkeit“ und keine generischen dreispaltigen Symbolkarten mit „Schnell / Intelligent / Sicher“.
3. Vermeide Karten in Karten; schaffe Hierarchie mit Ausrichtung am Raster, typografischem Kontrast, großzügigem Weißraum und feinen 1-px-Trennlinien.
4. Nimm Screenshots bei 1440×900 und 390×844 auf und entferne jeden Rahmen oder Container, dessen Weglassen die Klarheit nicht beeinträchtigt.Funktioniert am besten, wenn Oil UI über npx skills add oil-oil/oil-ui installiert ist.
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.
Fieldwork Type
Unabhängige Schriftgießerei
Die Website einer unabhängigen Schriftgießerei (ab 1440×900, responsiv bis 390 Pixel Breite). Der erste Bildschirm stellt eine Hauptschrift in den Mittelpunkt: Besucher können eigenen Text eingeben und Schriftgrad, Strichstärke und Schriftbreite anpassen. Weiter unten folgen die Tabelle der Strichstärken, der Zeichensatz, Anwendungsbeispiele und Lizenzen nach Verwendungszweck (Desktop, Web, App), die in den Warenkorb gelegt werden können. Der Schrifttester und die Lizenzauswahl sind das Herzstück: Die Darstellung ändert sich während der Eingabe, und der Lizenzpreis wird mit jeder Option aktualisiert. Entwirf drei Zustände: den ersten Bildschirm, das geöffnete Tester-Panel und die Lizenzauswahl.
Arbeit und Prompt ansehen →
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 →
Vesper
Abrechnungskonsole für API-Nutzung
Entwerfe eine Abrechnungskonsole für API-Nutzung und Kundenrechnungen für KI- und Entwicklertool-Teams, mit englischsprachiger Oberfläche in einer Desktop-Ansicht von 1440×900. Nutzer können Abonnements und Live-API-Nutzung verwalten, fällige Beträge und Rechnungsausnahmen im aktuellen Zeitraum prüfen, Kunden oder Rechnungen nach Status und Nutzungsschwelle filtern und einen Datensatz öffnen, um Einzelpositionen, Zahlungs- und Webhook-Zeitleisten sowie Ereignis-Payloads zu untersuchen. Berücksichtige erneute Zahlungsversuche, Kontingentanpassungen und Rechnungsexporte. Implementiere drei zentrale Zustände: den täglichen Arbeitsbereich mit Umsatz- und Nutzungstrends, Kunden- oder Rechnungslisten und Live-Filtern; eine Detailansicht für eine Ausnahmerechnung mit Nutzungsaufschlüsselung, Statuszeitleiste und Wiederherstellungsaktionen; sowie eine Befehlspalette. Liefere ein offlinefähiges `index.html` und erstelle `shots/desktop.png`, `shots/state-1.png` und `shots/state-2.png` mit 1440×900, DPR=2.
Arbeit und Prompt ansehen →
TRACE
Shop einer Parfümmarke
Ein Onlineshop für eine Nischenparfümmarke. Erstelle die Shop-Startseite und die Detailseite für ein Parfüm.
Arbeit und Prompt ansehen →Oil UI Pro: Vollständige Checklisten und Reduktion bei 200 % Vergrößerung
Oil UI Pro enthält die vollständige Checkliste zum Entfernen typischer KI-Muster, Lesbarkeitsprüfungen bei 100 % und 200 % sowie zeilenweise Reduktionsdurchgänge, die ein prüfender Subagent ohne Implementierungskontext durchsetzt.
npx github:oil-oil/oil-cli install oil-ui-proHäufige Fragen
Warum funktioniert die Anweisung „Es soll nicht nach KI aussehen“ allein selten?
Weil das Modell „sieht nach KI aus“ nicht mit konkreten DOM- und CSS-Entscheidungen verknüpft. Erst die genaue Benennung der Übeltäter – Pillen-Labels, verschachtelte Kartenabstände, erfundene KPI-Badges und gleich breite Symboltrios – zusammen mit konkreten strukturellen Alternativen verändert das Ergebnis.
Wie trenne ich Bereiche, wenn ich nicht alles in Karten verpacke?
Verwende vier klarere Mittel: 1) eine klare Hierarchie vertikaler Abstände, etwa 96 px zwischen Bereichen und 20 px innerhalb einer Gruppe; 2) dezente, bildschirmfüllende Wechsel des Flächentons; 3) eine einzelne 1-px-Linie oben mit einem Bereichslabel links; oder 4) eine asymmetrische Zweispaltenaufteilung.
Wann ist ein Pillen-Badge tatsächlich sinnvoll?
Wenn es einen live veränderlichen Zustand vermittelt, den Nutzer erkennen müssen, etwa „Zahlung fehlgeschlagen“ in einer Abrechnungstabelle oder „Nur noch 3 Hocker in der April-Charge“. Wiederholt eine Pille lediglich das Thema des Bereichs über einer H2, lösche sie.
Wie erkenne ich am schnellsten übrig gebliebene KI-Vorlagenmuster auf einer Seite?
Verkleinere die Ansicht auf 50 % oder mache den Text unscharf. Wenn die Seite wie ein einheitlicher Stapel abgerundeter Rechtecke und symmetrischer dreispaltiger Blöcke aussieht, bestimmen weiterhin Vorlagenmuster das Layout.