Wie KI-Agent-Skills messbar besseres Frontend hervorbringen (blind getestet)

Das Problem mit "gut genug" beim KI-Frontend

Führende KI-Modelle schreiben bereits korrekten Frontend-Code. Bitten Sie eines um eine Landingpage, und Sie erhalten valides HTML, einen sinnvollen Reset, barrierefreies Markup und ein responsives Grid. Der Code funktioniert.

Doch "funktioniert" ist nicht dasselbe wie "gut". Sich selbst überlassen, produziert eine KI ein erkennbares generisches Erscheinungsbild: den dunklen Verlauf von Violett zu Blau, Verlaufsfarben im Überschriftentext, alles zentriert, identische, gleichmässig verteilte Karten, ein einziger flacher Schlagschatten. Es ist kompetent und vergessenswert — genau die Art von Ergebnis, die eine Marke untergräbt, statt sie aufzubauen.

Also stellten wir uns eine konkrete Frage: Kann man einen KI-Agenten zuverlässig von "kompetent" zu "wirklich schön, pixelgenau gestaltet und makellos responsiv" bringen — und beweisen, dass der Unterschied real ist und nicht bloss Wunschdenken? Diese Untersuchung ist die Antwort.

Schritt 1: Die Wissensbasis aufbauen

Wir begannen dort, wo ein Senior-Engineer beginnen würde: indem wir das beste Frontend-Denken zu einer einzigen Quelle der Wahrheit zusammenführten. Wir werteten sechs ausführliche Frontend-Kurse aus — 717 Vorlesungstranskripte, rund 5,3 Millionen Zeichen — und destillierten sie zu einem einzigen Best-Practices-Runbook mit über 600 Zeilen, das Architektur, Design-Systeme, responsives Layout, Barrierefreiheit, Semantik, Performance und modernes CSS abdeckt.

Dann brachten wir es auf den Stand der Plattform-Realität von 2024–2025: Web Platform Baseline für Support-Entscheidungen, modernes CSS (Container Queries, :has(), Cascade Layers, OKLCH-Farben, clamp()), den tatsächlichen Stand der Vendor-Präfixe, die modernen Browser-APIs (IntersectionObserver, View Transitions, die Popover API, natives <dialog>) und Core Web Vitals.

Schritt 2: Wissen in wiederverwendbare Agent-Skills verwandeln

Ein Runbook, das ein Mensch liest, ist nützlich. Eine Fähigkeit, die ein KI-Agent automatisch anwendet, ist transformativ. Also verpackten wir das Runbook in sieben modulare Agent-Skills — jeder darauf ausgelegt, im richtigen Kontext auszulösen und die passende Anleitung bei Bedarf zu laden:

• CSS-Architektur — Resets, Design-Tokens, die rem-Strategie, BEM, CSS-Organisation im grossen Massstab.
• Web-Design-System — Typografie, Farbe, Abstände, Hierarchie und "Persönlichkeit zuerst"-Design.
• Responsives Layout — Flexbox, Grid, Container Queries, EM-basierte Media Queries.
• Semantisches HTML & Barrierefreiheit — WCAG, Tastatur- und Screenreader-Unterstützung, barrierefreie Formulare.
• Animation & Bewegung — performante, für reduzierte Bewegung sichere Animation und moderne Effekte.
• Modernes CSS & Kompatibilität — Funktionen von 2024–2025, sicher abgesichert durch Baseline und Feature Queries.
• Performance & Browser-APIs — Core Web Vitals, Lazy-Loading, die richtige DOM-API für die jeweilige Aufgabe.

Das erste Ergebnis war eine Überraschung: ein Unentschieden

Wir bewerteten die Skills zunächst auf naheliegende Weise — dieselben Aufgaben mit und ohne die Skills bauen und die Ergebnisse anhand objektiver Kriterien prüfen. Das Resultat war nahezu identisch: rund 91% mit den Skills gegenüber 95% ohne.

Das sieht nach Misserfolg aus. Tatsächlich ist es die wichtigste Erkenntnis des Projekts. Die objektiven Prüfungen massen die Korrektheit — verwendet es rem-Einheiten, semantisches HTML, ein Viewport-Tag — und das schafft ein führendes Modell bereits von allein. Wir massen das Falsche.

"Korrektheit ist gelöst. Handwerk nicht. Die Kluft zwischen kompetentem und aussergewöhnlichem Frontend ist kein Wissen, das dem Modell fehlt — es ist Geschmack, angewandt durch Iteration, und die Weigerung, den generischen Standard auszuliefern."

Der Durchbruch: Ein Skill, der wie ein Designer arbeitet

Ein Designer liefert nie das erste Rendering aus. Er baut es, betrachtet die tatsächlichen Pixel, findet die Schwachstellen und verfeinert. Wissens-Skills konnten das nicht abbilden — also bauten wir einen achten Skill, Visual Polish, der verändert, wie der Agent arbeitet, über drei Hebel:

1. Eine Render-und-Iterier-Schleife

Der Agent ist gezwungen, das One-Shotting aufzugeben. Er baut die Seite, rendert sie in einem echten Browser, macht bei jedem Breakpoint Screenshots, kritisiert den Screenshot anhand eines Qualitätsrasters, behebt die wichtigsten Probleme und wiederholt das. Auf die Pixel zu schauen ist der grösste Einzelhebel — in unseren Durchläufen benötigte der Skill-gestützte Agent 40–54 Bau-und-Prüf-Schritte pro Aufgabe, gegenüber 3–4 beim Agenten ohne Unterstützung.

2. Ein Design-System mit hohem Geschmack, ausgeliefert im Skill

Anstatt dem Agenten zu sagen, er solle "gute Typografie verwenden", liefern wir geprüfte, meinungsstarke Standardeinstellungen mit: ein OKLCH-Farbsystem, eine redaktionelle Schriftpaarung, eine fluide Skala, mehrschichtige Elevations-Schatten und ausgefeilte Komponenten, bei denen jeder Interaktionszustand bereits ausgearbeitet ist. Der Agent startet aus Geschmack heraus, statt einen generischen Standard zu improvisieren.

3. Leitplanken und eine Definition of Done

Der Skill benennt die genauen "generische KI"-Anzeichen, die zu vermeiden sind, und definiert eine strikte Checkliste, die der Agent überprüfen muss, bevor er die Arbeit für abgeschlossen erklärt: kein horizontaler Überlauf bei irgendeinem Breakpoint, AA-Kontrast in Hell und Dunkel, gestaltete Fokus- und Hover-Zustände sowie Bewegung, die Präferenzen für reduzierte Bewegung respektiert.

Die Schleife bewies ihren Wert sofort. Beim Bau der eigenen Referenzseite des Skills fing der Render-Schritt zwei echte Mängel ab, die ein Code-Review übersehen hatte: Inhalt, der ohne JavaScript unsichtbar war, und ein Layout, das auf Mobilgeräten überlief. Beides wurde behoben, bevor irgendetwas ausgeliefert wurde — genau die Fehler, die in die Produktion gelangen, wenn niemand das gerenderte Ergebnis anschaut.

Der Beweis: Ein Blind-A/B-Test

Behauptungen über "Schönheit" sind leicht aufgestellt und leicht vorgetäuscht, also validierten wir ehrlich. Wir gaben zwei frische Briefings — einen SaaS-Preisbereich und eine Landingpage für eine Finanz-App — an einen Skill-gestützten Agenten und an einen ohne Unterstützung. Wir renderten alle vier Ergebnisse und übergaben die Screenshots dann einem unabhängigen KI-Kritiker, der nicht wusste, welches welches war, mit zufällig verteilten Labels, damit er nicht per Mustererkennung zuordnen konnte.

Das Urteil war eindeutig. Die Skill-gestützten Designs gewannen beide Aufgaben mit hoher Konfidenz, und der Kritiker identifizierte die Ergebnisse ohne Unterstützung eigenständig als "den generischen KI-Standard".

"Das eine ist art-directed und klar individuell gestaltet — Material für ein Inspirationsboard. Das andere stützt sich gleich auf die beiden grössten generische-KI-Anzeichen: einen dunklen Farbverlauf und Verlaufsfarben im Überschriftentext. Der Abstand ist klar, nicht marginal."

Warum das wichtig ist

Die meisten Teams, die KI für die Entwicklung einsetzen, hören bei "es produziert funktionierenden Code" auf. Diese Untersuchung zeigt den nächsten, wertvolleren Schritt: Handwerk und Prozess in den Agenten einzubetten, sodass sein Ergebnis zuverlässig exzellent ist, nicht bloss korrekt — und es dann mit einem echten, verblindeten Test statt mit einem Bauchgefühl zu beweisen.

Die Prinzipien lassen sich weit über CSS hinaus verallgemeinern:

• Messen Sie das Richtige. Wenn Ihre Bewertung nur die Korrektheit prüft, wird ein starkes Modell immer "gut genug" aussehen und Sie werden die Qualitätslücke vollständig übersehen.
• Prozess schlägt Wissen. Die grössten Fortschritte kamen nicht durch mehr Regeln, sondern dadurch, den Agenten zu zwingen, seine eigene Arbeit an der Realität zu überprüfen und zu iterieren.
• Liefern Sie Geschmack aus, nicht Prinzipien. Geprüfte, meinungsstarke Standardeinstellungen bringen das Ergebnis weiter, als abstrakte Ratschläge es je könnten.
• Beweisen Sie es blind. Ein unabhängiger, verblindeter Vergleich verwandelt "gefällt mir besser" in Evidenz.

Wie SplatDev dies anwendet

SplatDev baut KI-gestützte Entwicklungssysteme für Agenturen und Softwareunternehmen. Wir richten nicht einfach eine KI auf Ihre Codebasis — wir entwickeln die Skills, Leitplanken und Verifizierungsschleifen, die ihr Ergebnis vertrauenswürdig und wirklich hochwertig machen, und wir validieren das Ergebnis, statt es anzunehmen.

• Individuelle Agent-Skills, abgestimmt auf Ihren Stack, Ihr Design-System und Ihre Standards.
• Verifizierungsschleifen — Rendering, Testing und Review, eingebettet in die Arbeitsweise der KI, nicht nachträglich aufgesetzt.
• Evidenzbasierte Auslieferung — wir messen Qualität, nicht nur Geschwindigkeit.

Machen Sie den nächsten Schritt

Wenn Ihr Team KI zum Schreiben von Code nutzt, aber noch nicht dazu, exzellenten Code auszuliefern, gibt es eine messbare Lücke zu schliessen — und eine Methode, sie zu schliessen.

Wollen Sie KI, die Arbeit produziert, die Sie in ein Portfolio aufnehmen würden, nicht nur Arbeit, die kompiliert?

Kontaktieren Sie SplatDev — Besser bauen mit KI

Oder schreiben Sie uns an [email protected]