Der impeccable-Skill für Claude: was er ist, wie du ihn installierst und nutzt

Wenn du nach „impeccable skill claude“ gesucht hast, bist du wahrscheinlich schon darauf gestoßen: impeccable wird neben Anthropics eigenem frontend-design-Skill als der Skill genannt, den man nimmt, wenn eine Seite nach einem echten Unternehmen aussehen soll. In unserem Überblick über die besten Claude Skills für Webdesign vergleichen wir ihn mit frontend-design und design-shotgun. Hier geht es nur um impeccable: was drinsteckt, wie du ihn installierst, welche Prompts funktionieren und was er nicht für dich erledigt.

Alles unten haben wir am 19. Oktober 2026 gegen das offizielle Repository und die Doku geprüft, am selben Tag ist Version 4.7.0 erschienen. Das Projekt entwickelt sich schnell. Wenn etwas nicht mehr passt, gilt die README von impeccable auf GitHub.

Das Wichtigste in Kürze

• impeccable ist ein einziger Skill mit 24 Befehlen, alle aufgerufen als /impeccable <befehl>, plus ein Prüfwerkzeug mit 61 Regeln, das ganz ohne KI-Modell läuft.
• In Claude Code installierst du ihn mit npx impeccable install (Node.js 18.19 oder neuer) und startest dann /impeccable init. Das schreibt deinen Produktkontext in PRODUCT.md.
• Er ist für Coding-Agenten gebaut, die in einem Projektordner arbeiten. Die Doku deckt Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI und weitere ab, aber nicht den Chat auf claude.ai.
• Gegenüber frontend-design kommen Modi, benannte Befehle, eine klare Regel für Verfeinern oder Neu-Entwerfen, gespeicherter Kontext und automatische Prüfungen dazu. Dafür kostet jeder Lauf mehr.
• Er verbessert das Design. Hosting, Formulare, Impressum, Datenschutzerklärung und SEO bleiben eigene Aufgaben.

Was impeccable ist und wer ihn gebaut hat

impeccable beschreibt sich selbst als Designanleitung für KI-Coding-Agenten. Entwickelt hat ihn Paul Bakaus. Er hat jQuery UI gebaut, später bei Google an den Chrome DevTools und an AMP gearbeitet und führt heute Renaissance Geek, die Firma hinter impeccable. Das Repository hat auf GitHub mehr als 80.000 Sterne. Skill, Befehle, CLI und Prüf-Engine sind kostenlos und Open Source (Apache 2.0). Was dein Coding-Tool oder dein Modellanbieter für die Nutzung berechnet, zahlst du wie bei jedem anderen Prompt.

Die README sagt offen, woher der Skill kommt: Anthropics frontend-design war der erste breit genutzte Design-Skill für Claude, und impeccable hat dort angefangen. Beide bekämpfen dasselbe Problem. Alle Modelle haben von denselben SaaS-Vorlagen gelernt, und ohne Anleitung kommen auf jedem Projekt dieselben Erkennungszeichen heraus: überall Inter, Verläufe von Lila nach Blau, Karten in Karten, graue Schrift auf farbigem Grund.

Was im Skill steckt

24 Befehle, nach Aufgabe sortiert

Jeder Befehl läuft als /impeccable <befehl> <ziel>. Das Ziel ist eine Seite, ein Abschnitt oder eine Datei. Gibst du nur /impeccable ein, zeigt er dir ein Menü, statt zu raten.

craft ist inzwischen nur noch ein veralteter Alias, den du ignorieren kannst. Nutzt du einen Befehl ständig, legt /impeccable pin audit eine eigene Abkürzung /audit an.

Vier Modi

Bevor impeccable gestaltet, legt er fest, was Erfolg für den Besucher auf genau dieser Seite heißt. Überzeugen (Persuade) gilt für Landingpages, Marketing und Preise. Bedienen (Operate) für Dashboards, Editoren und Einstellungen. Lesen (Read) für Artikel und Doku. Erleben (Experience) für Portfolios und Galerien. Der Modus richtet sich nach der Seite, nicht nach der Firma: Die Landingpage eines Software-Tools ist trotzdem Überzeugen. Überzeugen und Erleben bekommen mutige, entschiedene Gestaltung, Bedienen und Lesen bekommen Präzision und Zurückhaltung.

Gespeicherter Kontext

/impeccable init schaut sich dein Projekt an, fragt nur nach echten Lücken und schreibt die festen Fakten (Zielgruppe, Zweck, Rahmenbedingungen, Tonfall) in PRODUCT.md. Gestalterische Entscheidungen landen in DESIGN.md. Jeder spätere Befehl liest beide Dateien, die nächste Sitzung startet also dort, wo die letzte aufgehört hat.

Die Regeln gegen typische KI-Muster

Die README nennt fünf Grundregeln: keine abgenutzten Schriften (Arial, Inter, Systemschriften), keine graue Schrift auf farbigem Grund, kein reines Schwarz oder Grau, keine Karten in Karten und keine federnden oder elastischen Animationen. Eine Referenzdatei im Skill, der „craft floor“, geht weiter. Sie wird direkt vor jeder Änderung geladen und enthält messbare Prüfungen (Kontrast für Fließtext mindestens 4,5:1, Zeilen mit 65 bis 75 Zeichen, mehr Abstand über einer Überschrift als darunter) und eine Liste von Standardlösungen, die er ablehnt:

• Gleich große Karten aus Icon, Überschrift und Text als Gerüst der ganzen Seite.
• Die Hero-Kennzahl-Vorlage: große Zahl, kleines Label, ein paar Zusatzwerte.
• Ein kleines Label (eine „Eyebrow“) über einer Überschrift. Das ist ein striktes Verbot.
• Abschnittsnummern wie 01 / 02 / 03, wenn die Reihenfolge nichts bedeutet.
• Verlaufstext, Glas- und Unschärfe-Effekte als Deko, farbige Seitenstreifen an Karten.
• Emojis statt echter Icons.

Über allem steht eine Regel: Das Briefing gewinnt. Wünschst du dir eine bestimmte Epoche, Palette oder Schrift, hält sich impeccable daran, auch wenn dabei eine Warnung anschlägt.

Prüfwerkzeug, Hook und Live-Modus

Die 61 Regeln gibt es auch als Kommandozeilenwerkzeug. npx impeccable detect prüft einen Ordner, eine HTML-Datei oder eine URL, ohne Modell und ohne API-Schlüssel. In Claude Code richtet der Installer zusätzlich einen Hook ein, der nach jeder Änderung an einer UI-Datei prüft und die Funde an den Agenten zurückgibt. Im Live-Modus (Beta) klickst du auf deiner lokal laufenden Seite ein Element an, beschreibst, was du willst, vergleichst drei Varianten und behältst eine, die dann in deinen Quellcode geschrieben wird. Er unterstützt Vite, Next.js, SvelteKit, Astro, Nuxt, Bun und statisches HTML, und zwar nur auf einer lokalen Kopie, nie auf der Live-Seite.

So installierst du impeccable in Claude Code

Du brauchst Claude Code, einen Projektordner und für den empfohlenen Weg Node.js 18.19 oder neuer. Fängst du bei null an, erklärt unsere Anleitung Website mit Claude Code erstellen zuerst die Einrichtung.

1. Öffne ein Terminal in deinem Projektordner, also dort, wo die Dateien deiner Website liegen.
2. Führe npx impeccable install aus. Der Installer zeigt die gefundenen Tools (zum Beispiel ~/.claude), lässt dich die Auswahl ändern und fragt, ob er nur für dieses Projekt oder global installieren soll.
3. Bestätige den Design-Hook, wenn er angeboten wird. Er sorgt für die Prüfungen nach jeder Änderung.
4. Lade Claude Code neu oder starte eine neue Sitzung.
5. Starte /impeccable init und beantworte die Fragen: Für wen ist die Website, was darf sich nicht ändern? Lies danach die PRODUCT.md und korrigiere, was nicht stimmt.
6. Optional: Hat die Website schon ein Designsystem, halte es mit /impeccable document in DESIGN.md fest.

Zwei weitere Wege sind dokumentiert: in Claude Code /plugin marketplace add pbakaus/impeccable, dann /plugin, Discover, installieren. Oder npx skills add pbakaus/impeccable. Aktualisieren kannst du mit npx impeccable update. Das ersetzt die Dateien von impeccable und lässt deine PRODUCT.md und DESIGN.md in Ruhe.

Funktioniert impeccable auf claude.ai?

Nicht auf einem dokumentierten Weg. Doku und FAQ von impeccable nennen nur Coding-Tools. Das passt dazu, wie er arbeitet: Er bearbeitet Dateien in einem Projekt, startet eine kleine Engine, richtet einen Hook ein und öffnet deine Seite im Browser.

claude.ai selbst nimmt eigene Skills an. Laut Anthropics Hilfeartikel zu Skills schaltest du unter Einstellungen, Funktionen „Code-Ausführung und Dateierstellung“ ein, gehst dann zu Anpassen, Fähigkeiten, klickst auf + und wählst „Fähigkeit hochladen“. Hochgeladen wird ein ZIP mit dem Skill-Ordner auf oberster Ebene. Ob die Befehle und Prüfungen von impeccable dort funktionieren, dokumentiert sein Entwickler nicht. Sieh es also als Experiment. Im Chat auf claude.ai ist Anthropics frontend-design die dokumentierte Wahl: Laut Anthropic sind seine Beispiel-Skills in den bezahlten Tarifen bereits verfügbar.

Welche anderen Tools er unterstützt

So nutzt du ihn: Beispiel-Prompts

Die Reihenfolge zählt mehr als jeder einzelne Befehl. Einmal den Kontext festlegen, die Seite planen, bauen, anschauen, dann verfeinern. Für die Startseite eines kleinen Betriebs sieht das so aus. Die Befehle bleiben englisch, die Beschreibung darf deutsch sein:

/impeccable init
    
    /impeccable shape die Startseite. Wir sind eine Physiotherapie-Praxis in
    Leipzig. Die meisten neuen Patienten kommen mit einem Rezept vom Hausarzt
    und wollen zwei Dinge wissen: Bekomme ich bald einen Termin, und zahlt
    das die Kasse?
    
    /impeccable critique die Startseite
    /impeccable polish die Startseite
    
    /impeccable quieter den Leistungsbereich
    /impeccable adapt die Startseite für Handys
    /impeccable harden das Kontaktformular
    /impeccable audit die Kontaktseite
    
    /impeccable generate 3 mutige Varianten der Preiskarten

Was wir beim Einsatz gelernt haben:

• Sag bewusst „verfeinern“ oder „neu entwerfen“. Verfeinern behält Look, Texte und alles außerhalb des Ziels. Neu-Entwerfen behält Inhalt und Funktion, ersetzt aber den alten Look und hört nicht auf halber Strecke auf. „Polish den Hero“ und „Entwirf den Hero neu“ liefern sehr verschiedene Ergebnisse.
• Gib ihm einen Fakt, den er nicht erraten kann. shape stellt pro Runde zwei oder drei Fragen. Eine echte Antwort („die Hälfte unserer Patienten hat Angst vor der Behandlung“) schlägt jedes Adjektiv.
• Erst critique, dann polish. Die Kritik liefert eine Punktzahl und drei bis fünf vorrangige Probleme. Polish ist der letzte Schliff, nicht die Diagnose.
• Lass das Prüfwerkzeug über das Ergebnis laufen. npx impeccable detect index.html kostet fast nichts. Ein sauberer Scan ist ein Indiz, kein Beweis, also schau dir die Seite trotzdem auf dem Handy an.
• Teste mit deutschen Texten. Deutsche Wörter sind lang. harden und adapt fangen übergelaufene Buttons und gebrochene Zeilen ab, aber nur, wenn echte Inhalte auf der Seite stehen.

impeccable oder frontend-design?

Beide sind gut. frontend-design ist Anthropics einzelne Anweisungsdatei: Design aus dem Thema ableiten, ein kleines System aus Farben und Schriften planen, den Plan gegen das Briefing prüfen und eine benannte Liste typischer KI-Looks meiden. impeccable hat dort angefangen und einen ganzen Ablauf darum gebaut.

Unsere Kurzfassung: frontend-design für schnelle Arbeit, impeccable, wenn die Seite überzeugen muss.

Wo er hilft und wo nicht

impeccable verbessert Schrift, Layout, Farbe, Bewegung und Texte deiner Seiten und findet die Gewohnheiten, die eine Seite generiert aussehen lassen. Am stärksten ist er bei Startseiten, Landingpages und klaren Redesigns, und bei der langweiligen, aber wichtigen Arbeit von harden und adapt: Fehlermeldungen, die niemand gestaltet hat, und ein Layout, das auf dem Handy auseinanderfällt.

Alles außerhalb deiner Projektdateien fasst er nicht an. Er kann nicht:

• Die Website hosten oder veröffentlichen. Du brauchst weiterhin Hosting und eine Domain, siehe mit Claude erstellte Website veröffentlichen.
• Formulare zustellen. harden gestaltet Fehler- und Erfolgsmeldungen, aber eine statische Seite kann die Nachricht nirgendwohin schicken. Mehr dazu in was eine statische Website kann und was nicht.
• SEO erledigen. audit prüft Barrierefreiheit, Performance und Mobilansicht, nicht Seitentitel, Sitemap oder strukturierte Daten. Das ist SEO für statische Websites.
• Rechtstexte schreiben. Eine Firmenwebsite in Deutschland braucht ein Impressum, eine Datenschutzerklärung und eine Einwilligung vor Analytics. Das übernimmt kein Design-Skill.

Wenn du ihn nicht selbst bedienen willst

impeccable setzt ein Terminal, einen Projektordner und jemanden voraus, der Code-Änderungen prüft. Willst du die fertige Website statt der Werkzeugkette, ist das die Lücke, die ShiftPress füllt. Du beschreibst deine Website in ein paar Sätzen, und die KI baut echte Seiten mit echten Texten. Oder du lädst ein Design als ZIP-Export hoch und bekommst bearbeitbare Seiten mit gemeinsamem Header und Footer. Danach änderst du sie per Chat, per Sprache oder per Klick auf den Text, und jede Änderung siehst und bestätigst du, bevor sie live geht. Eigene Domain, SSL, Formulare, die Anfragen zustellen, sowie SEO und strukturierte Daten sind erledigt. Die ganze Website kannst du jederzeit als Code herunterladen.

Nächste Schritte

• Noch unsicher, ob Claude der richtige Weg ist? Der Ratgeber Website mit KI erstellen vergleicht alle Optionen.
• Bereit zum Bauen: Folge der Claude-Code-Anleitung ab dem leeren Ordner und installiere impeccable beim Schritt mit den Design-Skills.
• Design fertig: Bring es auf deine eigene Domain, mit einem Formular, das funktioniert.
• Mehr als ein Skill: Die besten Claude Skills für Webdesign zeigen den Ablauf, den wir mit design-shotgun und webapp-testing nutzen.

Häufige Fragen

Das Fazit

impeccable ist der vollständigste Design-Skill, den du Claude im Moment geben kannst: 24 Befehle als gemeinsame Sprache, eine klare Trennung zwischen Verfeinern und Neu-Entwerfen, gespeicherter Kontext und Prüfungen, die den KI-Look finden, bevor du es tust. Installier ihn mit npx impeccable install, starte /impeccable init und gib ihm ein Briefing, in dem etwas Echtes steht.

Und denk daran, was er nicht ist. Er sorgt dafür, dass eine Seite nach deinem Betrieb aussieht. Auf deine Domain bringt er sie nicht, Anfragen stellt er nicht zu, und gefunden wird sie dadurch auch nicht. Diese Schritte erledigst du selbst, oder du überlässt sie einer Plattform wie ShiftPress und behältst das Design.