Impeccable

Was ist Impeccable?

Impeccable ist ein Open-Source-Design-Skill für KI-Coding-Agenten. Er wird in Coding-Tools wie Claude Code, Codex, Cursor und GitHub Copilot installiert und gibt dem Agenten anschließend Designanleitungen, ein Vokabular benannter Designbefehle und eine automatische Prüfung auf Oberflächenmuster, die KI-generierte Frontends häufig wiederholen.

Der Impeccable Design-Skill wird so positioniert, dass er einem Agenten die Designkompetenz gibt, Oberflächen von Grund auf zu bauen, bestehende zu verbessern und einem vorhandenen Designsystem treu zu bleiben. Sein Repository fasst das Paket als einen Skill, 24 Befehle, Live-Iteration im Browser und 61 deterministische Erkennungsregeln für KI-generiertes Frontend-Design zusammen.

Die Website nennt Paul Bakaus als Schöpfer, und neue Installationen laden eine Engine herunter, die von Renaissance Geek, Inc. signiert ist; dieses Unternehmen ist auch als Entwickler der Chrome-Erweiterung von Impeccable aufgeführt. Laut README des Projekts war frontend-design von Anthropic der erste weit verbreitete Design-Skill für Claude, und Impeccable hat dort seinen Ausgangspunkt genommen.

„Impeccable“ ist außerdem ein gewöhnliches Wort, das auch von nicht verbundenen Unternehmen verwendet wird; diese Seite behandelt den Design-Skill, der aus dem Repository pbakaus/impeccable veröffentlicht wird.

Laut einer Erfassung vom 5. Oktober 2026 zeigte dieses Repository 76,3k Sterne unter der Lizenz Apache-2.0. Am selben Tag wies der Store-Eintrag der Erweiterung 60.000 Nutzer aus.

Kernfunktionen

Alles läuft über einen Hauptskill, /impeccable, gefolgt von einem Befehl oder einer Anfrage in normaler Sprache; audit, polish, critique und die übrigen Befehle müssen nicht separat installiert werden.

Befehlsfamilien

Die Befehlsreferenz ordnet die Befehle sechs Familien zu: Erstellen (2), Bewerten (2), Verfeinern (8), Vereinfachen (3), Absichern (4) und System (5).

• Erstellen: impeccable nimmt eine Beschreibung dessen entgegen, was erstellt oder verbessert werden soll; shape macht aus einer Idee ein umsetzbares Designbriefing.
• Bewerten: audit findet Umsetzungsprobleme und priorisiert Korrekturen; critique findet, was das Design zurückhält.
• Verfeinern: animate, bolder, colorize, delight, layout, overdrive, quieter und typeset verstärken jeweils eine Qualität, etwa Bewegung, Farbe oder Typografie.
• Vereinfachen: adapt, clarify und distill decken andere Geräte, klarere nächste Schritte und weniger Unordnung ab.
• Absichern: harden, onboard, optimize und polish kümmern sich um Fehlerzustände, erste Nutzung, Geschwindigkeit und einen letzten Feinschliff.
• System: init, document, extract, generate und live verwalten Kontext, Designaufzeichnungen, gemeinsame Komponenten und Varianten.

Ein häufig genutzter Befehl lässt sich als Verknüpfung anheften, etwa /impeccable pin critique; die Verknüpfung leitet Anfragen an den Hauptskill weiter, sodass dessen Verbesserungen weiterhin wirken.

Projektkontext in PRODUCT.md und DESIGN.md

Impeccable fragt einmal nach Ihren Nutzern und deren Zielen, speichert diesen Kontext in PRODUCT.md und liest ihn vor späteren Designarbeiten. Der Befehl document liest die Oberfläche und hält Farben, Typografie und Komponentenregeln in DESIGN.md fest, damit die nächste Seite oder der nächste Agent denselben Entscheidungen folgen kann. Ein Update von Impeccable ersetzt die eigenen installierten Dateien und lässt PRODUCT.md und DESIGN.md eines Projekts unberührt.

Detektor für KI-Slop und Qualitätsprobleme

Der KI-Slop-Detektor ist der Teil, der ohne Sprachmodell funktioniert. Sein Katalog listet 61 Erkennungsregeln sowie 6 Muster, die der Designprüfung vorbehalten sind. Die Prüfungen suchen nach Problemen wie geringem Kontrast, überlaufendem Text, gängigen KI-Designmustern und Abweichungen von einem dokumentierten Designsystem.

• Scans im Terminal: npx impeccable detect akzeptiert einen Ordner, eine Datei oder eine URL; bei URL-Scans wird die Seite standardmäßig in einem Browser mit 1280 × 800 gerendert.
• Maschinenlesbare Ergebnisse: ein JSON-Flag dient Skripten und CI, und Exit-Codes kennzeichnen keine primären Befunde (0), primäre Befunde (2) oder ein Ziel, das nicht gescannt werden konnte (1).
• Abdeckung des Quellcodes: HTML-Scans beziehen verlinktes lokales CSS ein, während JSX-, TSX-, Vue-, Svelte-, Astro- und Stylesheet-Dateien Quellcodeprüfungen erhalten.
• Designsystem-Prüfungen: mit einer lokalen DESIGN.md werden auch die dokumentierten Schriften, Farben, Eckenradien und Schriftgrößen geprüft.
• Enge Ausnahmen: eine bewusste Entscheidung, etwa eine als übermäßig verwendet markierte Markenschrift, lässt sich nach Wert ignorieren, während die Regel aktiv bleibt.

Design-Hooks

Design-Hooks führen den Detektor aus, während der Agent an UI-Dateien arbeitet, sodass Befunde eintreffen, solange die Änderung noch im Kontext ist. Claude Code und Codex erhalten nach jeder Bearbeitung gezieltes Feedback und zusätzlich eine breitere Prüfung, wenn der Agent seinen Zug beendet; GitHub Copilot führt den vollständigen Detektor nach unterstützten Bearbeitungen aus; und in Cursor kann ein Befund einen vorgeschlagenen Schreibvorgang blockieren, bis der Agent ihn überarbeitet.

Live-Modus und generate

Mit dem als Beta gekennzeichneten Live-Modus wählen Sie einen Teil einer laufenden Seite aus und vergleichen drei Varianten direkt an Ort und Stelle, oder Sie nutzen die Funktion „Steuern“, um die gesamte Seite zu lenken; die Version, die Sie übernehmen, wird Teil Ihres Quellcodes. Der Befehl generate startet einen ähnlichen Vergleich aus dem Chat heraus, wenn Sie Element und Richtung bereits benennen können, etwa generate 3 mutige Varianten der Preiskarten.

Designrichtungen und Mockups

Für neue Arbeiten greift Impeccable auf von Menschen geprüfte Designrichtungen zurück, jede mit eigenen visuellen Regeln, und wägt sie gegen Ideen ab, die aus Ihrem Produkt stammen. Mit Bildgenerierung kann es zuerst ein Mockup erstellen (comp-led); ohne sie baut Impeccable direkt im Code (code-led), was tendenziell stimmiger, aber meist weniger ambitioniert aussieht.

Anleitung

Erste Schritte

Für den Einstieg brauchen Sie ein Coding-Tool, einen Projektordner und Node.js 22.18 oder neuer; ein leeres Projekt oder eine frisch erzeugte App ist in Ordnung.

1. Führen Sie in einem Terminal im Projektstamm npx impeccable install aus, wählen Sie Ihr Coding-Tool und ob die Installation für dieses Projekt oder für alle Projekte gelten soll, und laden Sie das Tool dann neu.
2. Führen Sie im Agenten-Chat /impeccable init aus, beantworten Sie die Fragen dazu, wem das Projekt dient, lesen Sie dann die erzeugte PRODUCT.md und korrigieren Sie alles, was falsch verstanden wurde.
3. Bei einem bestehenden visuellen System führen Sie zuerst /impeccable document aus.
4. Schalten Sie die automatischen Prüfungen mit /impeccable hooks on ein und schließen Sie dann den Schritt zur Hook-Freigabe oder zum Arbeitsbereich-Vertrauen Ihres Coding-Tools ab.
5. Beschreiben Sie die erste Aufgabe in normaler Sprache, zum Beispiel /impeccable polish die Preisseite, oder fordern Sie eine neue Seite an und sagen Sie, für wen sie gedacht ist.
6. Öffnen Sie das Ergebnis, testen Sie dessen Hauptaufgabe auch auf einem schmalen Bildschirm und prüfen Sie die Codeänderungen.

Updates und gemeinsame Teamversionen

Über den Installer eingerichtete Umgebungen aktualisieren Sie mit npx impeccable update, und npx impeccable check sucht nach einer neueren Version; Marketplace-Installationen werden über den Plugin-Manager des Coding-Tools aktualisiert. Teams können stattdessen eine festgehaltene Version als Git-Submodul führen, das mit ihren Coding-Tools verknüpft ist.

Impeccable: Anwendungsfälle und Beispiele

• Eine bereits funktionierende Seite verfeinern: polish verfeinert Abstände, Typografie, Beschriftungen und Interaktionszustände innerhalb des bestehenden Designs.
• Eine Seite vor der Veröffentlichung prüfen: ein audit einer benannten Seite prüft Barrierefreiheit, Performance, responsives Verhalten und andere Umsetzungsprobleme.
• Mit einem Briefing beginnen: Sie beschreiben eine Seite, ihr Publikum und was Besucher tun können sollen; im Mockup-zuerst-Ablauf geben Sie eine Komposition frei, bevor die Umsetzung beginnt.
• Pull-Requests absichern: die CLI liefert Befunde und Exit-Codes, auf die ein Build reagieren kann, sodass UI-Änderungen in Pull-Requests automatisch geprüft werden können.
• Wiederkehrende Muster zu einem System machen: extract überführt wiederholte UI-Muster in gemeinsame Komponenten und Stile, die spätere Seiten wiederverwenden können.

Für wen ist es

• Einsteiger in Design oder in KI-Coding-Tools: Designerfahrung oder Designvokabular sind nicht erforderlich; Sie beschreiben, was Sie bauen, für wen es ist und was sich falsch anfühlt.
• Designer, die in den Code wechseln: in einem Interview im Juli 2026 schätzte der Schöpfer, dass Designer inzwischen mindestens die Hälfte des Publikums ausmachen.
• Teams mit etabliertem Erscheinungsbild: Impeccable baut und verfeinert mit den vorhandenen Farben, Komponenten und Regeln eines Projekts, sodass sich neue Seiten wie Teil desselben Produkts anfühlen.

In zwei Situationen passt es weniger gut:

• Native Mobile-Entwicklung: Hooks prüfen Web-Code und überspringen Projekte, deren PRODUCT.md ios, android oder adaptive deklariert; für Prüfungen nativer Oberflächen wird audit empfohlen.
• Ein fertiges Design mit einem Prompt erwarten: der Schöpfer hat gesagt, dass es nie ein Tool für One-Shot-Design sein wird.

Plattformen

Zu den unterstützten Coding-Tools gehören unter anderem Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode und Pi.

Als Claude Code Design-Skill erhält Impeccable vom Installer mehr als nur die Skill-Dateien: Bei Claude Code, Cursor, Codex, GitHub Copilot und Grok Build fügt der Installer dem aktuellen Projekt außerdem ein plattformeigenes Hook-Manifest hinzu.

Der Live-Modus funktioniert mit Webseiten auf einem laufenden Entwicklungsserver oder mit lokalem statischem HTML, und zu den unterstützten Frameworks gehören Vite-basierte Apps, Next.js, SvelteKit, Astro und Nuxt. Außerhalb des Coding-Tools fügt eine Chrome-Erweiterung den DevTools ein Impeccable-Panel hinzu, das Designprobleme auf Seiten anzeigt, die Sie zur Prüfung auswählen.

Preise

Die öffentlichen Skills, Befehle, die CLI und die Erkennungs-Engine von Impeccable sind kostenlos und unter der Lizenz Apache 2.0 quelloffen; anfallende Kosten stammen von den Tools drumherum:

• Nutzung von Coding-Tool und Modell: Ihr Coding-Tool oder Modellanbieter kann Nutzungsgebühren verlangen, auch für Bildgenerierung, und diese Kosten sind von Impeccable getrennt.
• Bildgenerierung: die integrierte Generierung in Codex zählt zu den Nutzungslimits von Codex, während der Rückgriff auf die OpenAI API Ihr eigenes API-Projekt belastet, und jedes Mockup oder jede Überarbeitung kann eine Anfrage hinzufügen.

Die Datenschutzerklärung beschreibt außerdem eine Warteliste für Impeccable Pro, die Anmelde-E-Mails speichert, um Interessierte zu benachrichtigen, sobald Pro bereit ist. Auf den geprüften Seiten waren keine Pro-Funktionen oder -Preise veröffentlicht.

Alternativen zu Impeccable

Zwei weitere Agenten-Skills tauchen neben Impeccable in unabhängigen Übersichten zu Frontend-Design-Skills auf.

frontend-design von Anthropic ist der Frontend-Design-Skill, von dem Impeccable ausgegangen ist; er beschreibt sich selbst als Anleitung für unverwechselbares, bewusstes visuelles Design beim Bau neuer oder beim Umgestalten bestehender Oberflächen. Das README von Impeccable stellt seine Ergänzungen als einen einzigen Einrichtungsablauf, 24 Befehle und 61 deterministische Erkennungsregeln dar, die CLI und Browsererweiterung ohne LLM und ohne API-Schlüssel ausführen.

taste-skill ist eine MIT-lizenzierte Sammlung portabler Agenten-Skills, die auf stärkere Layouts, Typografie, Bewegung und Abstände abzielt als schablonenhaft wirkende Oberflächen; ihr Repository enthält außerdem Bildgenerierungs-Skills für Referenzboards zu Web, Mobile und Brand-Kit.

Einschränkungen

• Nur Weboberflächen: der Detektor prüft Weboberflächen und verweist native iOS- oder Android-Arbeit an audit, und auch der Live-Modus lässt sich nicht an native iOS- oder Android-Oberflächen anbinden.
• Der Live-Modus ist noch Beta: die Dokumentation bezeichnet ihn als bereit zum Ausprobieren, ungewöhnliche Projekt-Setups können aber noch Fehlersuche erfordern.
• Gemeldete Fehler beim Schreiben in den Quellcode: ein öffentliches Issue vom September 2026 beschreibt, wie der Live-Modus in einem Projekt mit Next.js 16 und React 19 ungültiges TSX in den Quellcode schrieb, was nur über git diff und eine TypeScript-Prüfung auffiel. Ein zweites, gegen Version 4.4.0 eingereicht, berichtet, dass mehrzeilige JSX-Elemente nicht gefunden werden konnten und ein Ausweichschritt aus Verwerfen und Wiederherstellen das ursprüngliche Element löschen konnte.
• Ein sauberer Scan ist kein Designurteil: ein sauberes Ergebnis bedeutet nur, dass diese Prüfungen kein zu meldendes Problem gefunden haben; critique ist der Befehl, um das Design als Ganzes zu beurteilen.
• Hooks hängen von Ihrem Tool ab: Codex etwa führt die PostToolUse- und Stop-Hooks von Impeccable erst aus, nachdem Sie sie geprüft und ihnen vertraut haben, und Stille kann eine saubere Bearbeitung, den stillen Modus oder einen inaktiven Hook bedeuten.
• Mockups verlieren im Code Details: die Übersetzung von Bild zu Code ist verlustbehaftet, sodass sich ein Teil des Charakters und der Details eines Mockups ändert oder verloren geht, und die Dokumentation rät, mit einigen Runden aus Prompts und Prüfung zu rechnen.
• Rückmeldungen rund um den Start: in einem Thread eines Entwicklerforums rund um den öffentlichen Start bewerteten mehrere Kommentierende die veröffentlichten Vorher-nachher-Beispiele als schlechter als die Originale, einer davon verwies auf ein Dashboard, das den Großteil seiner nützlichen Informationen verloren hatte. Der Schöpfer bezeichnete die Beispiele als überhastet, entfernte sie und schrieb, dass Vokabular weder den Nutzer noch das LLM zu einem großartigen Designer macht.

Datenschutz und Datenverarbeitung

• Projektprüfungen laufen lokal und laden weder Projektdateien noch Erkennungsergebnisse auf die Server von Impeccable hoch, Ihr Coding-Tool kann jedoch Prompts, Dateien, Screenshots und weiteren Kontext an seinen eigenen KI-Anbieter senden.
• Eine Versionsprüfung, die normalerweise höchstens einmal täglich läuft, sendet keine Projektinhalte und lässt sich mit IMPECCABLE_NO_UPDATE_CHECK=1 abschalten.
• Anfragen nach Designrichtungen senden einen zufälligen Los-Schlüssel, einen Geltungsbereich und optionale Filter, aber nicht Ihren Projektnamen, Dateipfade, Ihren Prompt oder Ihr Briefing. Ein optionaler Auswahlbericht lässt sich mit IMPECCABLE_NO_TELEMETRY=1 oder DO_NOT_TRACK=1 deaktivieren, was Katalog- oder Vorschaubild-Anfragen nicht stoppt.
• Der Bildgenerator sendet, wenn er mit OPENAI_API_KEY ausgeführt wird, den Bild-Prompt und etwaige Referenzbilder an OpenAI, und diese Prompts können Projektdetails enthalten.
• Die Website verwendet Google Analytics auf der Startseite und PostHog auf jeder Seite, wobei Seitenaufrufe, Klicks, kopierte Befehle und die gewählte Installationsmethode erfasst werden.
• Die Chrome-Erweiterung verarbeitet Seiten-Snapshots und Befunde lokal, fordert aber Zugriff auf alle URLs an, damit sie die von Ihnen gewählten Websites prüfen kann.

FAQ

Q1. Ist Impeccable kostenlos?

Ja. Die öffentlichen Skills, Befehle, die CLI und die Erkennungs-Engine sind unter der Lizenz Apache 2.0 kostenlos. Nutzungsgebühren Ihres Coding-Tools, Ihres Modellanbieters oder für Bildgenerierung werden von diesen Anbietern separat abgerechnet.

Q2. Braucht der Detektor ein KI-Modell oder einen API-Schlüssel?

Nein. Detektor und Design-Hooks laufen als Code ohne KI-Modell oder API-Schlüssel; nur die Designarbeit Ihres Agenten nutzt dessen Modell.

Q3. Wann sollte ich generate statt live verwenden?

Verwenden Sie generate, wenn Sie das gewünschte Element und die Richtung benennen können, und den Live-Modus, wenn Sie Elemente während einer Browsersitzung selbst auswählen, annotieren oder die ganze Seite lenken möchten.

Q4. Kann ich es für eine iOS- oder Android-App verwenden?

Nur teilweise. Detektor, Hooks und Live-Modus zielen auf Weboberflächen ab, daher empfiehlt die Dokumentation für native Prüfungen den Befehl audit.