Impeccable: Die Website, die nicht nach KI aussieht

Was es ist und warum es zählt

Du öffnest deine Website und siehst es sofort: Das hat die KI gemacht. Überall Inter, ein Verlauf von Lila nach Blau, Karten in anderen Karten, grauer Text auf farbigem Hintergrund. Das README von Impeccable nennt das die Erkennungszeichen, die in jedem Projekt wiederkehren: Alle KI-Modelle haben von denselben Websites von der Stange gelernt.

Impeccable ist dafür da, sie loszuwerden. Es ist ein Skill, also ein Paket mit Anweisungen für Claude Code, mit 24 Befehlen, die zu einem gemeinsamen Vokabular zwischen dir und Claude werden. Dazu kommt ein Detektor mit 62 festen Regeln, der ohne KI und ohne API-Schlüssel läuft. Es ist Open Source auf GitHub, unter der Lizenz Apache 2.0, mit mehr als 90.000 Sternen Ende Oktober.

Es ist für alle, die allein mit Claude Code bauen, ohne Designer. Um eine neue Seite von Grund auf zu gestalten, gibt es einen anderen Guide, GUSTO. Dieser hier fängt mit einer anderen Frage an: Die Website hast du schon, wie bekommst du den KI-Look wieder weg?

1. Was du brauchst und wie du es in Claude Code installierst

Du brauchst Claude Code, den Projektordner und eine aktuelle Version von Node.js, dem Programm, das npx ausführt (prüf es mit node -v im Terminal). Dann:

1. Starte im Hauptordner des Projekts den Installer, die Zeile hier unten.
2. Wähl unter den gefundenen Werkzeugen die aus, die du nutzt, zum Beispiel Claude Code, und ob nur in diesem Projekt oder in allen installiert wird.
3. Wenn er dir die automatische Prüfung bei jeder Änderung anbietet, sag Ja: Mehr dazu in Punkt 5.
4. Starte Claude Code neu, damit es den Skill lädt.

npx impeccable install

Alternativ gibt es das Plugin: Gib in Claude Code /plugin marketplace add pbakaus/impeccable ein, öffne dann /plugin, installiere Impeccable unter Discover und starte neu. Ich nehme den Installer: Das ist der Weg, den das README empfiehlt, und die automatische Prüfung kommt mit ihm.

2. Der erste Befehl: /impeccable init

Alle Befehle laufen über /impeccable. Den ersten, einmal pro Projekt, gibst du im Chat von Claude Code ein:

/impeccable init

Zuerst liest es das Projekt: Dokumente, Funktionen, Code, Bilder. Dann fragt es nur nach dem, was fehlt: für wen das Produkt ist, in welcher Situation man es nutzt, wozu es dient, welche Vorgaben gelten. Und es lässt dich bestätigen, was es selbst herausgefunden hat.

Dann schreibt es PRODUCT.md, eine Textdatei im Projekt, mit den Fakten, auf die ihr euch geeinigt habt, und den offenen Entscheidungen. Das zählt, weil jeder Befehl dort ansetzt und weiß, wen die Seite anspricht, statt es zu raten. Lies die Datei und korrigiere sie; wenn sich das Produkt ändert, starte init noch einmal.

Wenn die Website schon einen eigenen Stil hat, gib auch /impeccable document ein: Es hält ihn in DESIGN.md fest, und der Detektor prüft, dass sich deine Seiten nicht davon entfernen.

3. Prüf deine Website in einer Minute, ohne KI

Mein Lieblingsteil: Der Detektor läuft im Terminal, ohne Claude und ohne Schlüssel. Statt src/ setzt du den Code-Ordner ein, eine Datei oder eine Adresse, auch http://localhost:3000. Für Adressen nutzt er Chrome, Chromium oder Edge; mit --viewport 390x844 siehst du die Seite in Handygröße.

npx impeccable detect src/

• Er findet die KI-Erkennungszeichen: lila Verläufe, Text mit Verlauf gefüllt, dunkles Leuchten, federnde Animationen, die überstrapazierte Schrift.
• Und Qualitätsprobleme: zu lange Zeilen, enge Abstände, Buttons, die zum Tippen zu klein sind, Überschriften, die eine Ebene überspringen.

Achte auf die Zahl, mit der er endet: 0, keine Hauptprobleme; 2, Probleme gefunden; 1, etwas konnte er nicht prüfen, die Prüfung ist also fehlgeschlagen. Mit --json bekommst du die Ergebnisse in einem Format, das Claude sofort liest; --list-rules zeigt dir alle Regeln.

Und denk daran, was im README steht: Eine saubere Prüfung ist ein Hinweis, kein Beweis. Diese Regeln haben nichts gefunden, aber öffne die Seite trotzdem, auch auf dem Handy.

4. Die fünf Befehle, die du zuerst auf deiner bestehenden Seite nutzt

Du gibst sie im Chat von Claude Code ein: /impeccable, den Befehl und was angesehen werden soll, in ganz normalen Worten. Ersetze die Teile in [ ] durch deine.

critique: was sie bremst

Ein Design-Review: wo die Seite beliebig oder verwirrend wirkt und was zuerst zu beheben ist. Es ändert nichts, du bekommst einen Bericht.

/impeccable critique die Startseite. Wer hier landet, soll [die App laden]. Sag mir, was sie nach KI aussehen lässt und was du zuerst beheben würdest.

audit: die technischen Prüfungen

Barrierefreiheit, Geschwindigkeit, Themes, Handy. Jedes Problem bekommt eine Priorität von P0, blockiert, bis P3, Feinschliff. Auch audit lässt den Code, wie er ist.

/impeccable audit die Preisseite. Sag mir bei jedem Problem, wen es trifft und wie man es behebt. Ändere noch nichts.

distill: weg mit dem Überflüssigen

Es entfernt, was der Hauptaktion im Weg steht: doppelte Informationen, Deko ohne Aussage. Ist die Hauptaktion unklar, fragt es dich zuerst.

/impeccable distill die Startseite. Die Hauptaktion ist [sich auf die Warteliste setzen]. Nimm die Karten in Karten raus, behalte [die Preise].

typeset: die Schrift

Hierarchie der Überschriften, Größen, Zeilenlänge. Deine Schriften behält es, außer du bittest darum, sie zu ändern: Wenn Inter einfach voreingestellt war, sag es ihm.

/impeccable typeset die ganze Website. Die aktuelle Schrift ist voreingestellt, keine Markenentscheidung: Schlag mir eine Alternative vor, die zu [wer das Produkt nutzt] passt.

polish: der letzte Durchgang

Es verfeinert eine Seite, deren Richtung schon stimmt: fehlende Zustände, Abstände, Ausrichtung. Es ändert den Code, also sieh dir die Änderungen an. Wenn die Richtung nicht stimmt, bitte um eine Neugestaltung.

/impeccable polish die Anmeldeseite. Behalte Layout und Markenfarben. Sag mir am Ende, was du geändert hast, und starte npx impeccable detect noch einmal.

5. Die automatische Prüfung bei jeder Änderung

Mit dem Installer bekommt Claude Code zwei Hooks, also Befehle, die von selbst starten. Nach jeder Änderung an einer Oberflächendatei sucht eine schnelle Prüfung nach kaputten Bildern, überlaufendem Text, Leuchteffekten; am Ende des Zugs sieht sich eine breitere die angefassten Dateien an. Was sie findet, geht an Claude zurück, das es behebt oder die Entscheidung erklärt. Du siehst sie mit /hooks.

• /impeccable hooks status sagt dir, ob sie aktiv ist; /impeccable hooks off schaltet sie aus, /impeccable hooks on wieder ein.
• npx impeccable install --no-hooks installiert ohne Hook, nur dieses eine Mal.
• /impeccable doctor prüft, ob alles richtig installiert ist: Wenn sie schweigt, kann sie auch einfach aus sein.

Und wenn Inter wirklich deine Schrift ist? Sag es einmal: Die Regel bleibt für die anderen Schriften aktiv, und die Ausnahme gilt für den Hook und für detect.

npx impeccable ignores add-value overused-font Inter --reason "Markenschrift"

Häufige Fehler

• Einem sauberen detect blind vertrauen. Es ist ein Hinweis, kein Beweis: Öffne die Seite und bitte um eine critique.
• polish nutzen, um die Richtung zu ändern. polish verfeinert, es gestaltet nicht neu.
• Wegen einer Schrift alles abschalten. Trag die Ausnahme mit ignores add-value ein und behalte die anderen Regeln.
• Den ganzen Ordner .impeccable/ samt Screenshots und temporären Dateien in git einchecken. Kopier den Block aus dem README in deine .gitignore.

Checkliste

• Nach dem Neustart sieht Claude Code /impeccable
• PRODUCT.md existiert und ich habe sie gelesen und korrigiert
• npx impeccable detect auf meinem Code endet mit 0
• /impeccable hooks status sagt, dass die automatische Prüfung aktiv ist

Häufige Fragen