So nutzt du Impeccable in Codex und Claude Code.

Impeccable gibt deinem Coding-Agenten ein Designvokabular: Befehle wie bolder, quieter, critique und polish, dazu einen Detektor, der KI-typische Muster erkennt, ohne ein Modell aufzurufen. Am besten funktioniert er bei Oberflächen, die du schon hast. Dieses Tutorial zeigt, wie du ihn in Codex und Claude Code installierst, für dein Projekt einrichtest, welche Befehle du zuerst lernen solltest und welche Einstellungen du prüfst, bevor du alles einschaltest.

Aktualisiert am 6. November 2026 · 8 Min. Lesezeit

Was Impeccable ist

Impeccable ist ein Open-Source-Design-Skill (Apache 2.0) von Paul Bakaus. Er ging aus dem Skill frontend-design von Anthropic hervor und wuchs zu zwei Dingen heran: 24 benannte Befehle, von Design-Zügen wie bolder und quieter bis zu Reviews wie critique und audit, und ein deterministischer Detektor mit 62 Regeln für KI-Erkennungszeichen und Qualitätsprobleme. Version 4.8 funktioniert mit Codex, Claude Code, Cursor, GitHub Copilot, Gemini CLI und vielen weiteren Agenten.

Installation

Im Stammordner deines Projekts:

npx impeccable install

Der Installer findet deine Coding-Tools, fragt, ob du für dieses Projekt oder für alle Projekte installieren willst, und bietet einen Design-Hook an, der jede UI-Datei prüft, die der Agent bearbeitet. Lade danach dein Tool neu.

Codex: Öffne /hooks und bestätige den Projekt-Hook, sonst läuft er nicht. Mach das nach einem Update, das den Hook ändert, noch einmal. In Codex rufst du den Skill mit $impeccable (oder über /skills) auf statt mit einem Slash-Befehl.
Claude Code: Der Installer funktioniert auch hier. Oder füge das Plugin mit /plugin marketplace add pbakaus/impeccable hinzu und installiere Impeccable dann über /plugin.

Node wird nur zum Ausführen von npx gebraucht. Der Skill führt eine kleine Engine aus, die einmal nach ~/.impeccable/bin/ heruntergeladen wird. Mit npx impeccable update aktualisierst du sie.

Für dein Projekt einrichten

Führe init einmal pro Projekt aus:

$impeccable init      # Codex
/impeccable init      # Claude Code and most other agents

Der Befehl liest deinen Code, fragt nur nach dem, was er nicht selbst herausfinden kann (für wen das Produkt ist, was es leisten muss und welche Vorgaben gelten), und schreibt PRODUCT.md. Jeder spätere Befehl liest diese Datei. Hat deine App schon einen visuellen Stil, führe als Nächstes document aus, um ihn in DESIGN.md festzuhalten, damit spätere Änderungen markentreu bleiben. Behalte beide Dateien in deinem Repository.

Mit einer Komponente anfangen

Impeccable funktioniert am besten bei einem engen Ziel: Ein genau geprüfter Abschnitt schlägt eine ganze Seite auf einen Blick. Nenne einen Befehl und ein Ziel:

/impeccable critique the pricing cards
/impeccable quieter the landing page hero
/impeccable typeset the settings page
/impeccable polish checkout

In Codex schreibst du $impeccable statt /impeccable. Du kannst auch einfach beschreiben, was du willst, etwa „gestalte diesen Hero-Abschnitt neu“.

Die Befehle, die du zuerst lernen solltest

Gruppe	Befehle	Wofür du sie nutzt
Lenken	`bolder`, `quieter`, `distill`, `colorize`, `typeset`, `layout`, `animate`, `delight`, `overdrive`	Einen Teil des Designs in eine klare Richtung schieben
Prüfen	`critique`, `audit`	Eine bewertete UX-Prüfung oder einen technischen Bericht mit Rangfolge von P0 bis P3 bekommen
Abschließen	`polish`, `harden`, `clarify`, `adapt`, `optimize`, `onboard`	Letzter Feinschliff, Randfälle, Texte, Bildschirmgrößen, Tempo, Erststart-Zustände
Iterieren	`live`, `generate`	Varianten eines Elements im Browser ausprobieren
Einrichten	`shape`, `init`, `document`, `extract`	UX planen, die Kontextdateien schreiben, wiederkehrende Muster in dein System übernehmen

Ein guter erster Durchlauf: critique für einen Screen, das wichtigste Problem mit einem Lenk-Befehl wie quieter oder typeset beheben, dann polish. Tippe /impeccable allein, um die komplette Liste in deinem Agenten zu sehen, und hefte einen oft genutzten Befehl mit /impeccable pin audit an.

Den KI-Slop-Detektor ausführen

Der Detektor prüft 62 Regeln, 31 für KI-Erkennungszeichen und 31 für Qualität, und braucht weder ein Modell noch einen API-Schlüssel:

npx impeccable detect src/                   # scan your source files
npx impeccable detect http://localhost:5173  # scan a rendered page in Chrome or Edge
npx impeccable detect --github src/          # annotations for GitHub Actions
npx impeccable detect --list-rules           # list every rule

Quelldateien bekommen die Musterregeln; Regeln, die eine gerenderte Seite brauchen, etwa niedriger Kontrast und winziger Text, laufen nur, wenn du eine URL scannst, richte ihn also auch auf deinen Dev-Server. Bei Problemen beendet er sich mit Exit-Code 2, was es leicht macht, einen CI-Check scheitern zu lassen. Steht deine Markenschrift auf seiner Liste überstrapazierter Schriften, erlaube sie mit npx impeccable ignores add-value overused-font Inter --reason "Brand font".

Diese Einstellungen zuerst prüfen

Hooks laufen in Claude Code außerhalb der Modellfreigabe. Ein installierter Hook läuft auch dann, wenn du die Befehle des Modells ablehnst, sodass schon die erste Bearbeitung die Engine herunterladen kann. Prüfe Hooks vor unbeaufsichtigten Läufen.
Der Live-Modus kann einen Agenten ohne Freigaben starten. Wenn du im live-Modus Änderungen übernimmst und keine Chat-Sitzung zuhört, startet er die CLI codex oder claude mit ausgeschalteten Freigaben und ausgeschalteter Sandbox. Setze IMPECCABLE_LIVE_COPY_AGENT=chat, bevor du den Live-Modus startest, damit er in deinem Chat bleibt, oder off, um ihn zu deaktivieren.
Telemetrie. Neue Designs holen visuelle Richtungen aus dem Katalog von impeccable.style. Das Abschalten der Telemetrie (npx impeccable telemetry off oder DO_NOT_TRACK=1) stoppt die anonyme Aufzeichnung, welche Richtung du gewählt hast, nicht aber diese Anfrage.
Etwas kaputt? /impeccable doctor findet veraltete Kontextdateien und kaputte Hooks.

Häufige Fragen

Ist Impeccable kostenlos?

Ja. Er ist Open Source unter der Apache-2.0-Lizenz.

Funktioniert Impeccable mit Codex?

Ja. Führe npx impeccable install aus, bestätige den Projekt-Hook in /hooks und rufe ihn mit $impeccable auf.

Kann Impeccable mobile Apps gestalten?

Ja. Er deckt App-Screens ebenso ab wie Websites, mit Referenzen für iOS und Android. Für einen direkten Vergleich mit anderen Optionen siehe Taste Skill vs. Impeccable vs. UI UX Pro Max.