Makellose Frontend UIs mit Claude Code Skill erstellen

Impeccable

Impeccable ist ein Open-Source-Claude-Code-Skill, entwickelt von Paul Bakaus, der das Problem des "AI slop" (KI-Schlamperei) in KI-generierten Frontend-Outputs bekämpft. Es wird mit 20 Steuerungsbefehlen (/audit, /polish, /critique und mehr), 7 domänenspezifischen Design-Referenzdateien und kuratierten Anti-Mustern geliefert, die dem Modell genau sagen, was NICHT generiert werden soll. Das Ergebnis: UIs, die gestaltet aussehen, nicht automatisch generiert.

Warum jedes KI-generierte Frontend gleich aussieht

Bitten Sie einen beliebigen KI-Programmierassistenten, Ihnen ein Dashboard, eine Landing Page oder ein Einstellungsfeld zu erstellen. Geben Sie ihm freie Hand. Was bekommen Sie?

Inter-Schriftart. Lila-zu-Blau-Verlauf. Karten in Karten verschachtelt. Grauer Text auf farbigem Hintergrund. Ein Hero-Bereich mit einer großen Zahl, einer kleinen Beschriftung und einem leuchtenden Akzent. Vielleicht etwas Glassmorphismus für "Tiefe".

Sie haben es tausendmal gesehen, weil jedes große Sprachmodell, das auf denselben generischen Vorlagen trainiert wurde, denselben generischen Output erzeugt. Das ist die Falle des KI-generierten Frontends: technisch funktional, visuell vergesslich.

Impeccable wurde speziell entwickelt, um diesen Kreislauf zu durchbrechen. Wo Anthropic's offizieller frontend-design-Skill die Grundlage legte, baut Impeccable darauf auf mit tieferem Fachwissen, größerer Domänenabdeckung und harten Beschränkungen, die die KI von den vorhersehbaren Mustern, die in ihre Gewichte eingebrannt sind, wegleiten.

Was Impeccable tatsächlich ist

Impeccable ist ein Claude-Code-Skill – ein installierbarer Satz von Anweisungen, Referenzdateien und Slash-Befehlen, die die Art und Weise erweitern, wie Claude Code jede Frontend-Aufgabe angeht.

Im Kern wird der Skill mit drei Komponenten geliefert:

Impeccables erweiterter Frontend-Design-Skill

Der frontend-design-Skill innerhalb von Impeccable ist ein umfassender Design-Leitfaden, aufgeteilt in sieben domänenspezifische Referenzdateien:

Jede Referenzdatei ist technisch präzise. Der Typografie-Leitfaden geht zum Beispiel über "gute Schriftarten verwenden" hinaus und erklärt, wie vertikaler Rhythmus funktioniert, warum FOUT (Flash of Unstyled Text) auftritt und wie man ihn mit size-adjust-Overrides verhindert, und wann flüssiger Text mit clamp() tatsächlich die falsche Wahl ist. Diese Tiefe ist es, die Impeccable von einem generischen Styleguide unterscheidet.

Impeccables Kontext-Erfassungs-Protokoll

Einer der am meisten unterschätzten Aspekte des Designs von Impeccable ist der Befehl /teach-impeccable. Bevor Designarbeiten beginnen, erfordert der Skill einen bestätigten Designkontext: Zielgruppe, Anwendungsfälle und Markenpersönlichkeit. Dieser Kontext wird in .impeccable.md im Projektstammverzeichnis gespeichert und in zukünftigen Sitzungen automatisch geladen.

Es ist eine kleine Sache, die einen großen Unterschied macht. KI-generierte Frontend-Outputs sind generisch, teilweise weil das Modell keinen Projektkontext hat – es greift standardmäßig auf sichere, durchschnittliche Entscheidungen zurück. Impeccable erzwingt, dass dieser Kontext zuerst hergestellt wird.

Die 20 Befehle, die KI-generierte Frontends verbessern

Impeccable wird mit 20 vom Benutzer aufrufbaren Befehlen geliefert, von denen jeder einen spezifischen Fehler in der KI-generierten Frontend-Arbeit behebt. Sie rufen sie als Slash-Befehle in Claude Code auf:

/audit          → Barrierefreiheit, Performance und responsive Qualitätsprüfung
/critique       → UX-Überprüfung: Hierarchie, Klarheit, emotionale Resonanz
/polish         → Letzter Schliff vor dem Versand (Ausrichtung, Abstände, Details)
/distill        → Auf das Wesentliche reduzieren – Komplexität entfernen, die ihren Platz nicht verdient
/normalize      → An Designsystem-Standards anpassen
/animate        → Zweckmäßige Bewegung hinzufügen (kein dekoratives Zittern)
/colorize       → Strategische Farbe in monochromatische Oberflächen einführen
/bolder         → Sichere, langweilige Designs verstärken
/quieter        → Zu aggressive Designs abschwächen
/delight        → Unvergessliche Momente der Freude hinzufügen
/typeset        → Schriftartauswahl, Hierarchie und Größenanpassung korrigieren
/arrange        → Layout, Abstände und visuellen Rhythmus korrigieren
/harden         → Fehlerbehandlung, i18n, Randfälle
/optimize       → Performance-Verbesserungen
/extract        → Wiederverwendbare Komponenten und Design-Tokens extrahieren
/adapt          → Für verschiedene Geräte/Kontexte anpassen
/onboard        → Onboarding-Flows und leere Zustände entwerfen
/clarify        → Unklare UX-Texte verbessern
/overdrive      → Technisch anspruchsvolle Effekte (Shader, Federphysik, scrollgesteuerte Enthüllungen)
/teach-impeccable → Einmalige Einrichtung: Designkontext erfassen und speichern

Die meisten Befehle akzeptieren ein optionales Bereichsargument. /audit header führt den Audit nur auf der Navigationsleiste aus. /polish checkout-form konzentriert den Polishing-Durchlauf auf den Bezahlvorgang. Diese präzise Zielausrichtung hält Claude fokussiert und verhindert, dass es Teile des KI-generierten Frontends berührt, die bereits funktionieren.

Die wahre Stärke kommt vom Verketten von Befehlen. Ein typischer Workflow könnte /audit ausführen, um Probleme aufzudecken, /arrange, um Layoutprobleme zu beheben, /typeset, um die Typhierarchie zu bereinigen, und /polish als letzten Durchlauf vor dem Versand – wobei jeder Schritt auf dem vorherigen aufbaut.

Die Anti-Muster-Bibliothek: Der KI beibringen, was sie nicht tun soll

Der originellste Beitrag von Impeccable zum Problem des KI-generierten Frontends sind nicht die Befehle – es sind die Anti-Muster.

Der Skill backt explizite "NICHT"-Beschränkungen direkt in den Modellkontext ein. Das sind keine vagen Stilpräferenzen; es sind spezifische, wiederkehrende Fehlermuster, die immer wieder in KI-generierten Frontend-Outputs auftauchen:

Anti-Muster für Typografie:

• Verwenden Sie keine Inter, Roboto, Arial oder Systemstandards (sie lassen Designs unsichtbar wirken)
• Verwenden Sie keine Monospace-Schriften als faule Abkürzung für "Developer-Vibes"
• Platzieren Sie keine großen abgerundeten Icons über jeder Überschrift – es sieht nach Vorlage aus

Anti-Muster für Farben:

• Verwenden Sie keinen grauen Text auf farbigen Hintergründen – es wirkt verwaschen; verwenden Sie stattdessen einen dunkleren Farbton der Hintergrundfarbe
• Verwenden Sie nicht die "KI-Palette": Cyan-auf-Dunkel, Lila-zu-Blau-Verläufe, Neon-Akzente auf dunklen Hintergründen
• Verwenden Sie kein reines Schwarz (#000) oder reines Weiß (#fff) – tönen Sie Ihre Neutraltöne

Anti-Muster für Layout:

• Verpacken Sie nicht alles in Karten – nicht jedes Element benötigt einen Container
• Verschachteln Sie keine Karten in Karten
• Verwenden Sie keine identischen Kartenraster (Icon + Überschrift + Text, ewig wiederholt)
• Zentrieren Sie nicht alles – linksbündiger Text mit asymmetrischen Layouts wirkt gestaltet

Anti-Muster für Bewegung:

• Verwenden Sie kein Bounce- oder Elastic-Easing – sie wirken veraltet; reale Objekte verzögern sanft
• Animieren Sie keine Layout-Eigenschaften wie width, height, padding – verwenden Sie nur transform und opacity

Diese Regeln werden genau auf die Gewohnheiten abgestimmt, die KI-generierten Frontend-Code auf den ersten Blick erkennbar machen. Indem sie explizit benannt werden, gibt Impeccable dem Modell eine korrigierende Linse, die es ohne externe Anleitung nicht hätte.

Unter der Haube: Build-System, Unit-Tests und Multi-Tool-Unterstützung

Impeccable ist nicht nur eine Prompt-Datei – es ist ein richtiges Softwareprojekt mit einem Build-System, einer Unit-Test-Suite und Multi-Provider-Unterstützung.

Das Build-System

Skill-Quelldateien liegen in source/skills/ und verwenden umfangreiches YAML-Frontmatter (gemäß der Agent Skills Spezifikation). Ein einziger Build-Schritt kompiliert sie in anbieterspezifische Formate für Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro und Pi:

bun run build      # Kompiliert alle 8 Anbieterformate
bun run rebuild    # Bereinigt und baut von Grund auf neu auf

Jeder Anbieter erhält das richtige Dialekt. Claude Code und OpenCode erhalten vollständige Metadaten einschließlich args und allowed-tools. Codex CLI erhält das argument-hint-Format mit $ARGNAME-Platzhaltern. Gemini erhält minimales Frontmatter. Der Build erledigt all dies automatisch über eine modulare Transformer-Architektur in scripts/lib/transformers/.

Die Unit-Test-Suite

Impeccable wird mit einer Bun-basierten Unit-Test-Suite in tests/build.test.js geliefert. Die Tests decken die gesamte Build-Pipeline ab:

• Orchestrierungstests überprüfen, ob jede Transformer-Funktion mit den korrekten Argumenten aufgerufen wird
• Integrationstests erstellen echte Quelldateien in einem temporären Verzeichnis und stellen sicher, dass die erwarteten Ausgabedateien für jeden Anbieter existieren
• Transformationskorrektheitstests überprüfen spezifische Transformationen – dass die Gemini-Ausgabe {{args}} enthält, dass die Codex-Ausgabe $TARGET enthält, dass die Claude-Code-Ausgabe user-invokable: true enthält
• Randfalltests behandeln leere Skill-Listen und überprüfen, ob die Pipeline nicht unterbrochen wird

Das Ausführen der Unit-Test-Suite ist ein einziger Befehl:

bun test

Diese Unit-Tests machen es sicher, zu Impeccable beizutragen. Sie können einen Transformer ändern, die Unit-Tests ausführen und sofort wissen, ob Ihre Änderung die Ausgabe für eines der acht unterstützten Tools beschädigt hat. Das ist die Art von technischem Vertrauen, das gepflegte Open-Source-Projekte von aufgegebenen Prompt-Sammlungen unterscheidet.

Impeccable + Apidog: Designqualität mit API-Qualität verbinden

Impeccable löst das Qualitätsproblem von KI-generierten Frontends auf der UI-Ebene. Apidog löst es auf der API-Ebene.

Wenn Sie ein echtes Produkt mit KI-Unterstützung entwickeln, sind beide Ebenen wichtig. Ein KI-generiertes Frontend, das poliert aussieht, wird die Benutzer trotzdem enttäuschen, wenn die von ihm ausgeführten API-Aufrufe schlecht dokumentiert, ungetestet oder unzuverlässig sind. Apidog bietet Ihnen für Ihre API das gleiche Maß an Präzision, das Impeccable für Ihre UI bietet.

Mit Apidog können Sie:

• APIs visuell entwerfen, bevor Sie eine einzige Zeile Backend-Code schreiben
• Mock-Server automatisch generieren aus Ihrem API-Schema, damit Ihr KI-generiertes Frontend während der Entwicklung realistische Daten zum Rendern hat
• Automatisierte API-Tests gegen jeden Endpunkt ausführen und Regressionen abfangen, bevor sie in Produktion gehen
• Interaktive API-Dokumentation mit Ihrem Team teilen, um Frontend- und Backend-Entwickler auf einer Linie zu halten

Die Kombination ist natürlich: Verwenden Sie Impeccable, um sicherzustellen, dass Ihr KI-generiertes Frontend visuell unverwechselbar und produktionsreif ist, und verwenden Sie Apidog, um sicherzustellen, dass die APIs, die dieses Frontend antreiben, zuverlässig und gut dokumentiert sind. Zusammen schließen sie die Qualitätslücke, die die KI-gestützte Entwicklung allein offen lässt.

Testen Sie Apidog kostenlos, um Mock-Server und API-Dokumentationen für Ihr nächstes KI-generiertes Frontend-Projekt zu generieren.

Erste Schritte mit Impeccable

Der schnellste Weg ist, das gebrauchsfertige Bundle von impeccable.style herunterzuladen, Ihr Tool auszuwählen und zu entpacken.

Speziell für Claude Code:

# Projekt-Level-Installation
cp -r dist/claude-code/.claude your-project/

# Oder global für alle Projekte installieren
cp -r dist/claude-code/.claude/* ~/.claude/

Führen Sie dann einmal /teach-impeccable aus, um den Designkontext Ihres Projekts zu speichern, und Sie können alle 20 Befehle verwenden.

FAQ

Was unterscheidet Impeccable von Anthropic's offiziellem Frontend-Design-Skill? Impeccable baut auf Anthropic's Skill auf, mit 7 domänenspezifischen Referenzdateien, 20 Steuerungsbefehlen und einer expliziten Anti-Muster-Bibliothek. Der offizielle Skill ist ein Ausgangspunkt; Impeccable ist ein umfassendes Designsystem, das darauf aufbaut.

Funktioniert Impeccable auch mit anderen Tools als Claude Code? Ja. Impeccable unterstützt Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro und Pi. Das Build-System kompiliert ein einziges Quellformat in anbieterspezifische Dialekte für jedes Tool.

Wofür ist der Befehl /overdrive? /overdrive ist für technisch anspruchsvolle Effekte gedacht, die über konventionelle Grenzen hinausgehen – WebGL-Shader, 60fps virtuelle Tabellen, Federphysik bei Dialogen, scrollgesteuerte Enthüllungen. Verwenden Sie ihn, wenn Sie etwas möchten, das Benutzer fragen lässt: "Wie haben sie das gemacht?"

Wie handhabt Impeccable Unit-Tests? Das Projekt wird mit einer Bun-basierten Unit-Test-Suite geliefert, die die gesamte Build-Pipeline abdeckt, einschließlich der Korrektheit von Transformatoren und Integrationstests, die echte Quelldateien erstellen und die Ausgabe überprüfen. Führen Sie bun test aus, um die vollständige Unit-Test-Suite auszuführen.

Kann Impeccable bei API-gesteuerten Frontends helfen? Impeccable kümmert sich um die UI-Qualität. Für die API-Ebene kombinieren Sie es mit Apidog, das visuelles API-Design, automatisierte Tests und Mock-Server-Generierung bietet – alles, was Sie benötigen, um zuverlässige Backends für Ihr KI-generiertes Frontend zu erstellen.

Ist Impeccable kostenlos nutzbar? Ja. Impeccable ist unter der Apache 2.0 Lizenz als Open Source verfügbar. Der Quellcode ist auf GitHub verfügbar und die kompilierten Bundles sind unter impeccable.style erhältlich.