Makellose Frontend UIs mit Claude Code Skill erstellen

Impeccable

Impeccable ist ein Open-Source-Claude-Code-Skill von Paul Bakaus, der gezielt die immer gleichen, generischen Frontend-Outputs aus KI-Tools durchbricht. Impeccable liefert 20 präzise Steuerbefehle (/audit, /polish, /critique, usw.), 7 domänenspezifische Design-Referenzdateien und kuratierte Anti-Muster, die der KI klarmachen, was sie nicht generieren darf. So entstehen UIs, die gestaltet wirken – nicht wie KI-Standardware.

Testen Sie Apidog noch heute

Warum jedes KI-generierte Frontend gleich aussieht

Lassen Sie einen beliebigen KI-Programmierassistenten ein Dashboard, eine Landing Page oder ein Einstellungsfeld generieren. Das Ergebnis? Meist Inter-Schriftart, Lila-zu-Blau-Verlauf, Karten in Karten, grauer Text auf Farbe, heroische Zahlen, Glassmorphismus. Diese Designs sind allgegenwärtig, weil große Sprachmodelle auf den gleichen Vorlagen trainiert wurden.

Impeccable wurde entwickelt, um genau aus diesem Trott auszubrechen. Während der offizielle frontend-design-Skill von Anthropic das Grundgerüst liefert, setzt Impeccable mit tieferem Fachwissen, größerer Domänenabdeckung und klaren Beschränkungen an – so entstehen individuelle, hochwertige Frontends.

💡 Tipp: Bevor Sie /audit, /polish oder /overdrive in Claude Code mit Impeccable ausführen, laden Sie Apidog kostenlos herunter. Damit testen und debuggen Sie API-Endpunkte Ihres KI-Frontends visuell, validieren Payloads, Tokens und Responses in Sekunden – und sparen sich mühsames Debugging zwischen UI-Code und Backend.

Was Impeccable tatsächlich ist

Impeccable ist ein Claude-Code-Skill – ein installierbarer Satz aus Anweisungen, Referenzen und Slash-Befehlen, die Claude Code gezielt für Frontend-Aufgaben erweitern.

Drei Kernkomponenten:

Impeccables erweiterter Frontend-Design-Skill

Der frontend-design-Skill besteht aus sieben domänenspezifischen Referenzdateien:

Jede Datei ist technisch tiefgehend. Beispiel Typografie: Es geht nicht nur um gute Fonts, sondern um vertikalen Rhythmus, FOUT-Vermeidung mittels size-adjust, und den gezielten Einsatz von clamp() – mit Begründung, wann das ungeeignet ist.

Impeccables Kontext-Erfassungs-Protokoll

Mit /teach-impeccable erzwingen Sie, dass die KI vor der Designarbeit den Projektrahmen (Zielgruppe, Use Cases, Markenpersönlichkeit) kennt. Dieser Kontext landet in .impeccable.md im Projekt-Root und wird bei künftigen Sessions geladen. Das verhindert generische Outputs, weil die KI gezielt auf Ihr Projekt angepasst wird.

Die 20 Befehle für bessere KI-Frontends

Impeccable bietet 20 anwendbare Slash-Befehle, die typische Schwächen von KI-Frontends adressieren:

/audit          → Barrierefreiheit, Performance und Responsive-Check
/critique       → UX-Prüfung: Hierarchie, Klarheit, Emotion
/polish         → Feinschliff (Ausrichtung, Spacing, Details)
/distill        → Komplexität radikal reduzieren
/normalize      → Designsystem-Standards anwenden
/animate        → Funktionale Animationen hinzufügen
/colorize       → Farbakzente gezielt einbringen
/bolder         → Langweilige Designs verstärken
/quieter        → Zu laute Designs abschwächen
/delight        → Joy-Momente einbauen
/typeset        → Typografie korrigieren
/arrange        → Layout und Rhythmus verbessern
/harden         → Fehlerbehandlung, i18n, Edge Cases
/optimize       → Performance-Optimierung
/extract        → Komponenten und Design-Tokens extrahieren
/adapt          → Für verschiedene Devices/Kontexte anpassen
/onboard        → Onboarding und leere States designen
/clarify        → Unklare UX-Texte verbessern
/overdrive      → High-End-Effekte (Shader, Federphysik, Scroll-Reveal)
/teach-impeccable → Kontext speichern (einmalig)

Alle Befehle akzeptieren einen optionalen Scope: Mit /audit header prüfen Sie nur die Navigation, /polish checkout-form konzentriert sich aufs Checkout-Formular.

Workflow-Tipp: Mehrere Befehle nacheinander verbinden: Erst /audit für Probleme, dann /arrange für Layout, /typeset für Typografie, zum Schluss /polish für den letzten Schliff.

Die Anti-Muster-Bibliothek: Was die KI nicht tun soll

Impeccable definiert explizite Anti-Muster, die als "NICHT"-Regeln in den Modellkontext integriert werden. Das sind keine subjektiven Vorlieben, sondern klar benannte Fehlerquellen, die KI-Frontends generisch und billig wirken lassen.

Beispiele:

Typografie

• Keine Inter, Roboto, Arial, Systemfonts
• Keine Monospace als "Dev-Vibe"-Abkürzung
• Keine großen runden Icons über Überschriften

Farben

• Kein grauer Text auf buntem Hintergrund – stattdessen dunklere Varianten nutzen
• Keine "KI-Palette" (Cyan auf Dunkel, Lila-Blau-Verläufe, Neon auf Schwarz)
• Kein reines Schwarz/Weiß – immer abtönen

Layout

• Nicht alles in Karten packen
• Keine Karten-in-Karten-Verschachtelung
• Keine identischen Kartenraster
• Nicht alles zentrieren – asymmetrische Layouts nutzen

Bewegung

• Kein Bounce/Elastic-Easing, sondern sanfte Verzögerung
• Keine Animation von width, height, padding – nur transform und opacity

Diese Anti-Muster machen KI-Outputs unverkennbar. Mit Impeccable werden sie gezielt unterbunden.

Unter der Haube: Build-System, Unit-Tests & Multi-Tool-Support

Impeccable ist ein echtes Softwareprojekt – kein Prompt-File. Es gibt ein Build-System, Unit-Tests und Unterstützung für mehrere KI-Tools.

Das Build-System

Skill-Quellen liegen in source/skills/ und nutzen umfangreiches YAML-Frontmatter (siehe Agent Skills Spezifikation). Ein Build-Schritt kompiliert alle Formate für Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Pi:

bun run build      # Alle 8 Anbieterformate bauen
bun run rebuild    # Clean Build

Jedes Tool bekommt den korrekten Dialekt. Die Transformation geschieht modular über scripts/lib/transformers/.

Die Unit-Test-Suite

Impeccable bringt eine Bun-basierte Unit-Test-Suite (tests/build.test.js) mit. Getestet werden:

• Orchestrierung: Jeder Transformer wird mit korrekten Argumenten aufgerufen
• Integration: Echte Quelldateien erzeugen, Outputs prüfen
• Transformations-Korrektheit: z.B. dass Gemini {{args}} enthält, Codex $TARGET, Claude Code user-invokable: true
• Randfälle: Leere Skill-Listen, Pipeline-Stabilität

Tests ausführen mit:

bun test

So können Sie sicher beitragen und wissen sofort, ob Änderungen die Multi-Tool-Kompatibilität beeinträchtigen.

Impeccable + Apidog: Design- und API-Qualität verbinden

Impeccable sorgt für UI-Qualität, Apidog für API-Qualität.

Gerade bei KI-gestützter Produktentwicklung gilt: Ein tolles Frontend nützt wenig, wenn die APIs dahinter schlecht dokumentiert, ungetestet oder unzuverlässig sind. Apidog bringt dieselbe Präzision wie Impeccable – aber für Ihre Schnittstellen.

Mit Apidog können Sie:

• APIs visuell designen, bevor Backend-Code existiert
• Mock-Server automatisch generieren – Ihr Frontend rendert sofort echte Daten
• Automatisierte API-Tests ausführen und Fehler frühzeitig erkennen
• Interaktive API-Dokumentation mit dem Team teilen

Praxis-Tipp: Nutzen Sie Impeccable für individuell gestaltete, produktionsreife KI-Frontends und Apidog für zuverlässige, dokumentierte APIs. So schließen Sie die Qualitätslücke, die KI-Tools allein offenlassen.

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

Erste Schritte mit Impeccable

1. Laden Sie das Bundle unter impeccable.style herunter, wählen Sie Ihr Tool und entpacken Sie es.
2. Für Claude Code:

# Projektweit installieren
cp -r dist/claude-code/.claude your-project/

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

1. Führen Sie einmal /teach-impeccable aus, um den Designkontext zu speichern.
2. Nutzen Sie alle 20 Befehle für Ihr Frontend-Design.

FAQ

Was unterscheidet Impeccable vom offiziellen Anthropic-Skill?

Impeccable erweitert den offiziellen Skill mit 7 Referenzdateien, 20 Steuerbefehlen und expliziten Anti-Mustern zu einem umfassenden Designsystem.

Funktioniert Impeccable mit anderen Tools als Claude Code?

Ja. Unterstützt werden Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro und Pi – das Build-System erzeugt für jedes Tool das passende Format.

Wofür ist der Befehl /overdrive?

Für fortgeschrittene Effekte wie WebGL-Shader, 60fps-Tabellen, Federphysik bei Dialogen, Scroll-Reveal. Wenn Sie "Wow"-Ergebnisse wollen.

Wie laufen die Unit-Tests?

Mitgelieferte Bun-Test-Suite deckt Build-Pipeline und Transformationslogik ab. Einfach bun test ausführen.

Hilft Impeccable bei API-getriebenen Frontends?

Impeccable ist für UI-Qualität. Kombinieren Sie es mit Apidog für API-Design, Tests und Mock-Server.

Ist Impeccable kostenlos?

Ja, Open Source (Apache 2.0). Quellcode auf GitHub, Bundles auf impeccable.style.