Artikel teilen

KI-Tools schreiben Frontends in Sekunden, doch das Ergebnis sieht fast immer gleich aus: Lila-Verlauf, Inter-Schrift, Karten in Karten. Das Open-Source-Projekt Impeccable will das abstellen und bringt Coding-Agenten echtes Designwissen bei.

Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügen
Inhalt 4 Abschnitte
  1. Was steckt hinter dem KI-Einheitslook?
  2. Wie bringt Impeccable der KI Design bei?
  3. Was bringt das für die Praxis?
  4. Mehr Newshunger?

Der sogenannte KI-Slop, also der immer gleiche Generikum-Look maschinell gebauter Oberflächen, ist für Frontend-Profis ein wachsendes Ärgernis. Paul Bakaus, früher bei Google, hat mit Impeccable ein Gegenmittel veröffentlicht. Über 27.000 Sterne auf GitHub zeigen, dass das Projekt einen Nerv trifft.

Auf einen Blick

Das Wichtigste in Kürze

  • Impeccable ist ein quelloffener Skill (Apache 2.0) für KI-Coding-Umgebungen wie Claude Code, Cursor, Codex CLI und Gemini CLI.
  • 23 Befehle geben Entwicklern ein gemeinsames Design-Vokabular mit ihrer KI, vom Typografie- bis zum Animations-Kommando.
  • Eine Erkennungs-Engine mit 29 deterministischen Regeln markiert typische KI-Muster ohne ein weiteres Sprachmodell.
  • Eine Chrome-Erweiterung und ein CLI prüfen fertige Seiten direkt im Browser oder in der CI-Pipeline.

Was steckt hinter dem KI-Einheitslook?

Ein hellblauer quadratischer Ausstecher neben drei Teigquadraten und einem Teigkreis
KI-generierte Layouts verwenden wiederkehrend dieselben Designelemente: Inter oder Geist als Schrift, Farbverläufe hinter Titeln, Pillenform-Buttons und verschachtelte Karten

Maschinell erzeugte Layouts greifen auffällig oft zu denselben Mitteln. Bakaus‘ Detektor benennt sie konkret: Inter und neuerdings auch Geist, Space Grotesk oder Fraunces als Standardschrift, Verläufe hinter Überschriften, die Pillen-Form für Buttons und Karten innerhalb von Karten. Mustererkennung ersetzt hier die vage Kritik. Die Engine arbeitet rein deterministisch und kommt ohne ein zusätzliches Modell aus, was sie schnell und in Build-Prozessen einsetzbar macht.

Wie bringt Impeccable der KI Design bei?

Ein Roboterarm zeichnet ein Strichmännchen und Wireframes auf ein weißes Blatt Papier
Designskill lädt sieben Referenzdateien für Typografie, Farbe, Bewegung, Raster, Interaktion, Responsivität und UX-Texte. Mit /impeccable teach definieren Entwickler einmalig ihren Designkontext

Vor jedem Befehl lädt der Skill sieben Referenzdateien zu Typografie, Farbe, Bewegung, Raster, Interaktion, Responsivität und UX-Texten. Mit dem Kommando /impeccable teach legen Entwickler einmalig den Designkontext ihres Projekts fest, danach greifen alle Befehle darauf zu. Die Palette reicht von /typeset für Schrift über /colorize für Farbe bis /animate für Bewegung. Gemeinsame Sprache zwischen Mensch und Maschine ist der Kern: Sie benennen das Gewünschte beim Namen, statt es zu umschreiben.

KI baut Oberflächen heute in Minuten, aber sie baut sie alle nach demselben Schnittmuster. Ein Werkzeug, das der Maschine echtes Handwerk beibringt, statt nur Geschwindigkeit zu feiern, trifft bei unseren Lesern einen wunden Punkt.

Markus Seyfferth, Chefredakteur Dr. Web
Zitat teilen

Was bringt das für die Praxis?

Holzstempel und Abdruck „IMPECCABLE“ mit Brille auf weißem Grund
Impeccable-Skill erkennt Umgebung automatisch, markiert Anti-Muster in Chrome und prüft via CLI ganze Verzeichnisse mit JSON-Output

Für den Alltag zählt vor allem die Anbindung an bestehende Werkzeuge. Der Skill installiert sich per npx skills add pbakaus/impeccable und erkennt die genutzte Umgebung selbst. Die Chrome-Erweiterung leuchtet Anti-Muster direkt auf jeder Seite aus, ob lokal, im Staging oder in der Produktion. Das separate CLI prüft ganze Verzeichnisse und liefert JSON für automatische Build-Checks. Wie KI-Agenten künftig sogar direkt in WordPress eingreifen sollen, zeigt die laufende Debatte um den nativen AI-Client im Core.

Frontend-Teams probieren Impeccable am besten an einem kleinen, abgeschlossenen Bauteil aus, etwa einem Hero-Bereich, und lassen den Detektor anschließend über das Ergebnis laufen. So lässt sich der Effekt messen, bevor der Skill in den festen Workflow wandert. Das Projekt steht vollständig quelloffen unter Apache 2.0 bereit.

Mehr Webdesign-News

Mehr Newshunger?

Ein Stapel weißer Teller vor weißem Hintergrund mit einem schmutzigen, orangefarbenen Teller
Neumorphisches Design, Website-Checkliste, Webdesign-Kosten, SEO-Grundlagen und generative Engine Optimization im Überblick
4,3 168 Bewertungen

Wie hat Ihnen dieser Artikel gefallen?

Dr. Web Newsletter

Jede Woche ein bisschen klüger.

Der Dr. Web Newsletter: die besten Artikel, Anbieter-Tipps und neue Tools, kompakt zusammengefasst, jeden Donnerstag. Kostenlos und jederzeit abbestellbar.