Impeccable: Websites mit Claude Code ohne AI-Slop

Das ist der komplette Ablauf, mit dem ich Seiten mit Claude Code baue: Installation, meine Prompts, meine Inspo-Quellen. Das Prinzip dahinter ist ein Satz.

Du bringst den Geschmack mit, Impeccable bringt die Regeln, und der Feinschliff passiert im Browser statt im Chat.

Impeccable installieren

Impeccable ist ein Skill für Claude Code, also ein Paket an Regeln und Befehlen, das Claude beim Bauen mitliest. Öffne das Terminal in dem Ordner, in dem deine Website liegen soll, und tipp:

npx impeccable install

Der Installer fragt dich zwei Dinge: für welche Tools (Claude Code bestätigen) und ob global oder nur für dieses Projekt. Nimm global, dann läuft der Skill in allen Projekten. Den automatischen Design-Check mit Ja bestätigen. Danach Claude Code neu starten und /impeccable tippen. Wenn eine Befehlsliste aufgeht, sitzt der Skill. Für eine neue Version später:

npx impeccable update

Wenn du das Terminal nicht anfassen willst, geht es auch über Claude Code selbst:

Alternativ: Claude installieren lassen

Installier mir den Skill Impeccable von https://github.com/pbakaus/impeccable. Global, damit er in allen Projekten läuft, und mit dem automatischen Design-Check. Sag mir Bescheid, wenn ich Claude Code neu starten muss.

Wenn dein Claude Code schon ein Bildmodell mitbringt, zum Beispiel über die Higgsfield-MCP, nutzt Impeccable das stattdessen.

Referenz holen

Claude hat keinen Geschmack, den musst du mitbringen. Deshalb fängt jeder Bau bei mir mit einem Screenshot an, nicht mit einem Prompt.

Landbook (land-book.com) ist meine erste Adresse. Eine kuratierte Galerie echter Websites, sortiert nach Landing Page, Portfolio, Blog, Ecommerce. Oben schaltest du zwischen Websites, Sections, Mobile und Motion um. Sections ist der Reiter, den die meisten übersehen: einzelne Seitenabschnitte statt ganzer Seiten.

Dribbble (dribbble.com) nehme ich, wenn ich mutigere Sachen sehen will. Suche nach „landing page” oder „web design”, dann auf den Reiter Popular. Das sind Entwürfe, keine gebauten Seiten, und genau deshalb sind sie oft freier.

21st.dev (21st.dev) ist für einzelne Bausteine: Hero, Pricing, Buttons, Testimonials. Bei jeder Komponente gibt es einen Knopf „Copy prompt”. Den Prompt fügst du direkt in Claude Code ein, und der Agent baut die Komponente in dein Projekt.

Was du suchst, ist der Look, nicht der Inhalt: Schriftcharakter, Farbstimmung, wie viel Luft zwischen den Blöcken liegt. Leg dir ein bis drei Screenshots in einen Ordner referenzen in deinem Website-Ordner. Mehr brauchst du nicht.

init beantworten

Mach einen leeren Projektordner auf, starte Claude Code darin und tipp:

/impeccable init

Impeccable schaut sich erst den Ordner an und stellt dir dann Fragen. Nach der Optik fragt es ausdrücklich nicht, das kommt erst im nächsten Schritt. Gefragt wird:

Wer benutzt das, in welcher Situation, und was will die Person erledigen? Antworte konkret. „Marketing-Leute in kleinen SaaS-Firmen, die eine Demo buchen sollen” ist brauchbar, „alle” nicht.
Was macht das Produkt möglich, und was ist daran anders? Ein bis zwei Sätze reichen.
Welche Fakten müssen stehen bleiben? Echte Zahlen, Logos, Texte, rechtliche Angaben, Belege. Was du hier reinschreibst, erfindet Claude später nicht neu.

Dazu kommen zwei Entscheidungen. Die erste ist der Stack, also die Technik, mit der die Seite gebaut wird. Wenn dir das nichts sagt, antworte „deine Wahl”, dann entscheidet Claude. Und wenn Bildgenerierung eingerichtet ist, fragt Impeccable einmal, wie neue Seiten entstehen sollen: comp-first heißt, erst entsteht ein Bild, dann wird der Code danach gebaut. code-first geht direkt in den Code. Nimm comp-first. Es dauert länger und bringt mutigere Seiten.

Das Ergebnis ist eine Datei PRODUCT.md in deinem Website-Ordner. Die liest Claude ab jetzt bei jedem Auftrag mit.

Bau-Prompt mit deiner Referenz

Jetzt kommt der Screenshot rein. Das ist der Prompt, den ich benutze. Drei Blöcke: Look, Intent, Inhalte. Eine Verbotsliste brauchst du nicht, die Slop-Regeln bringt Impeccable selbst mit.

Bau-Prompt mit Referenz

Bau mir eine Landingpage für [Produkt].

LOOK: Das angehängte Bild ist meine Referenz. Übernimm Schriftcharakter, Farbstimmung und Rhythmus, nicht die Inhalte. In zwei Wörtern: [z. B. ruhig, redaktionell].

INTENT: [Für wen ist die Seite, und was soll die Person danach tun? Beispiel: Für Marketing-Teams in kleinen SaaS-Firmen, die eine Demo buchen sollen.]

INHALTE: [Was auf die Seite kommt: Produktname, echte Zahlen, Texte, Logos. Wenn du noch nichts hast, schreib: Nimm Platzhalter und markier sie als Platzhalter.]

Leg mir erst die Richtungen vor, bevor du Code schreibst.

Das Bild hängst du an, indem du es in das Claude-Code-Fenster ziehst oder im Prompt den Dateinamen aus deinem Ordner referenzen nennst. Deine Referenz schlägt alles, was Impeccable sonst vorschlagen würde. Was du festlegst, bleibt festgelegt.

Impeccable baut jetzt nicht los. Es öffnet eine Auswahlseite im Browser mit mehreren Richtungs-Karten. Jede Karte hat eine These, eine Palette, die Materialien und die erste Bildschirmseite. Dazu drei Knöpfe: neu würfeln, lenken, und der Kategorie-Standard, falls du bewusst konventionell willst.

Wenn eine Richtung fast passt, lenk sie, statt neu zu würfeln:

Steer auf der Auswahlseite

Nummer drei geht in die richtige Richtung, ist mir aber zu brav. Behalt Farbwelt und Schriftcharakter, mach die erste Bildschirmseite deutlich größer und ruhiger, und gib mir davon neue Varianten.

Du wählst eine Richtung. Mit comp-first rendert Impeccable danach mehrere Entwürfe dieser Richtung als Bilder und legt sie unter .impeccable/mocks/ ab. Die schaust du dir an, wählst wieder, und erst dann wird Code gebaut.

Nach dem Build startet ein zweiter Agent mit frischem Kontext, der Finish Reviewer. Der prüft das gebaute Ergebnis gegen den gewählten Entwurf und liefert eine Liste mit Fixes. Die lässt du in einem Rutsch abarbeiten, dann ist die erste Fassung fertig.

Feinschliff mit live

Kleine Sachen prompte ich nicht mehr. Dafür gibt es den Live-Modus.

Dafür muss die Seite auf deinem Rechner laufen. Starte den Dev-Server deines Projekts im Terminal, bei den meisten Projekten mit npm run dev. Alternativ sagst du Claude „starte meine Seite lokal“. Dann tippst du in Claude Code:

/impeccable live

Deine Seite geht im Browser auf, mit einer Leiste unten. Du klickst ein Element an, wählst eine Kategorie oder tippst frei, was du willst, und bekommst mehrere Varianten nebeneinander. Die beste übernimmst du mit einem Klick, und sie landet direkt im Code.

Die Kategorien in der Leiste sind dieselben wie die Befehle: bolder, quieter, distill, polish, typeset, colorize, layout, adapt, animate, delight, overdrive. Über Insert fügst du an einer Stelle ein neues Element ein, über Detect prüfst du die Seite auf die bekannten Slop-Muster.

Live arbeitet an der Seite auf deinem Rechner, nicht an der veröffentlichten. Für große Richtungswechsel gehst du zurück in den Chat mit Claude:

Richtungswechsel mit neuer Referenz

Schau dir das angehängte Bild an. Die Seite läuft gerade lokal bei mir.

Ich will mit der Landingpage in eine neue Richtung: [z. B. gedruckte Zeitschrift statt SaaS]. Übernimm aus der Referenz Schrift, Farbwelt und Bildsprache, nicht die Inhalte. Struktur und Texte bleiben, wie sie sind.

Wenn du dafür Bilder brauchst, erzeug sie und setz sie ein. Bau das als neue Variante, die aktuelle Fassung lässt du stehen.

Danach öffnest du /impeccable live erneut und schleifst weiter.

Bestehende Seite verbessern

Bei einem Projekt, das schon steht, ist die Reihenfolge eine andere. Erst Kontext, dann Urteil, dann gezielte Eingriffe:

/impeccable init
/impeccable document
/impeccable critique

document liest dein vorhandenes Design aus dem Code und schreibt es als DESIGN.md fest, also Farben, Schriften, Komponenten, Abstände. critique gibt dir ein Designreview mit Befunden, ohne etwas umzubauen. Danach greifst du gezielt ein. Das sind die fünf Befehle, die ich am häufigsten benutze:

Fünf Befehle für bestehende Seiten

/impeccable typeset die Startseite

/impeccable layout die Startseite

/impeccable quieter den Hero-Bereich

/impeccable polish die Startseite

/impeccable audit die ganze Seite

Hinter jeden Befehl schreibst du in Worten, welchen Bereich du meinst. Claude findet die passende Datei selbst.

Wenn du nur wissen willst, ob eine fertige Seite Slop-Muster hat, lässt du den Detektor laufen. Der prüft 61 feste Regeln, ohne etwas zu ändern:

npx impeccable detect src/
npx impeccable detect https://example.com

Alternativ sagst du Claude: „Lass den Impeccable-Detektor über meine Seite laufen und zeig mir die Funde.“

Alle Befehle im Überblick

Jeder Befehl läuft als /impeccable <befehl>, optional mit dem Bereich dahinter, zum Beispiel /impeccable quieter den Hero-Bereich.

Befehl	Was er macht
shape	Zweck und Ablauf klären, Briefing schreiben, noch kein Code
init	Produktwissen in PRODUCT.md festhalten
document	Vorhandenes Design aus dem Code als DESIGN.md schreiben
extract	Wiederkehrende Werte und Komponenten ins Designsystem ziehen
critique	Designreview mit Befunden, ohne umzubauen
audit	Barrierefreiheit, Performance, Themes, Responsive prüfen
polish	Letzter Durchgang vor dem Ausliefern
bolder	Einen zu braven Bereich ausdrucksstärker machen
quieter	Farben, Kontraste und Bewegung zurücknehmen
distill	Überflüssiges und Wiederholungen rauswerfen
harden	Lange Texte, Fehler, leere Daten, Übersetzungen abfangen
onboard	Einstieg, leere Zustände, Weg zum ersten Erfolg
animate	Bewegung mit Zweck ergänzen
colorize	Farbe für Hierarchie und Bedeutung einsetzen
typeset	Schriften, Hierarchie, Lesbarkeit, Zeilenmaß
layout	Anordnung, Abstände, Leserichtung, Dichte
delight	Persönliche Details an sinnvollen Stellen
overdrive	Technisch ambitionierte Effekte bauen
clarify	Beschriftungen, Fehlermeldungen und Hilfetexte
adapt	An andere Geräte und Größen anpassen
optimize	Lade- und Renderprobleme finden und beheben
live	Im Browser Elemente anklicken und Varianten vergleichen

Dazu kommen zwei Helfer: /impeccable hooks schaltet die automatische Prüfung nach jeder Änderung an oder aus, /impeccable doctor räumt auf, wenn die Impeccable-Dateien im Projekt nicht mehr zusammenpassen.