Impeccable ist weder ArtCraft noch Teil der ArtCraft-Produkte oder -Suite; diese Seite ist ein unabhängiger Leitfaden, und offizielle Angaben findest du unter impeccable.style und github.com/pbakaus/impeccable.
Impeccable: das Design-Vokabular für deinen Coding-Agent
Impeccable ist ein Design-Skill und ein Open-Source-Kommandozeilenwerkzeug, das deinem Coding-Agent ein gemeinsames Vokabular für das Prüfen, Justieren und Polieren von Oberflächen gibt. Paul Bakaus hat es entwickelt, ausgehend von Anthropics frontend-design-Skill; die Lizenz ist Apache-2.0. Diese Seite ist ein unabhängiger Leitfaden, keine offizielle Dokumentation.
- 24 Befehle: critique, polish, audit, typeset, distill und weitere
- Detektor mit 62 deterministischen Regeln, ohne LLM und ohne API-Key
- Unterstützt Claude Code, Cursor, Codex CLI, Copilot und 19 Agents insgesamt
Offizielle WebsiteGitHub-RepositoryDokumentation
Zuletzt aktualisiert: · English
Was ist Impeccable?
Impeccable ist ein Skill, der im Coding-Agent landet, plus eine eigenständige CLI. Es öffnet keine Leinwand, sondern übersetzt Design in Befehle, die der Agent ausführen kann: kritisieren, verdichten, setzen, aufräumen, härten. Entstanden ist das Projekt aus Anthropics frontend-design-Skill; veröffentlicht wird es unter Apache-2.0.
Die Zielscheibe ist der Standardgeschmack von Agents: überall Inter, Violett-Blau-Verläufe, Karten in Karten, grauer Text auf farbigem Grund, über jeder Überschrift eine abgerundete Icon-Kachel. 62 deterministische Regeln markieren diese Muster schon beim Editieren – ohne LLM, ohne API-Key.
Am stärksten ist es bei Oberflächen, die es schon gibt: auf eine Seite oder Komponente zeigen und iterieren. Neue Seiten kann es auch bauen, doch der eigene Projekttext räumt ein, dass dieser Modus schwieriger ist. Wichtig: Impeccable ist ein unabhängiges Open-Source-Projekt, kein ArtCraft-Produkt und kein Teil von dessen Suite.
Installation und Einrichtung
Führe den Befehl im Projektstamm aus. npx braucht Node 18.19 oder neuer. Der Installer erkennt deine Werkzeuge, fragt nach projektweiter oder globaler Installation und bietet den Design-Hook an, wo das Tool ihn unterstützt. Nimm ihn an.
Lade danach dein Coding-Tool neu und starte /impeccable init (bei Codex $impeccable init). Für Skripte gibt es --providers=claude,codex,cursor und --scope=project|global. Eine bestehende Installation frischt npx impeccable update auf.
npx impeccable install- Node 18.19+ prüfen und in den Projektstamm wechseln.
- npx impeccable install ausführen, Projekt- oder globale Installation wählen und den Design-Hook aktivieren, falls unterstützt.
- Das Coding-Tool neu laden und /impeccable init (bei Codex $impeccable init) ausführen, damit PRODUCT.md entsteht.
- Für ein festes visuelles System /impeccable document laufen lassen und DESIGN.md anlegen; danach mit npx impeccable update aktuell bleiben.
Die wichtigsten Befehle
Impeccable hat 24 Befehle. Aufgerufen werden sie als „Befehl plus Ziel“, etwa /impeccable critique the pricing cards; bei Codex ersetzt $ den Schrägstrich. Wer nur /impeccable eingibt, bekommt die Liste. Hier die sieben wichtigsten.
| Befehl | Was er tut | Wann er sich lohnt |
|---|---|---|
/impeccable init | Liest den Code, fragt nur das Unvermeidliche und schreibt PRODUCT.md. | Einmal zu Projektbeginn, damit die folgenden Befehle Kontext haben. |
/impeccable critique | Erstellt eine bewertete UX-Review nach Usability-Heuristiken und ordnet, was zuerst zu reparieren ist. | Vor einem Redesign oder um herauszufinden, wo ein Ablauf hakt. |
/impeccable polish | Macht den letzten Durchgang vor dem Ausliefern. | Wenn die Funktionen stehen und der Launch näher rückt. |
/impeccable audit | Schreibt einen technischen Qualitätsbericht zu Barrierefreiheit, Performance, Theming, Responsive-Verhalten und Integrität der Umsetzung, mit Befunden von P0 bis P3. | Vor einem Release oder um angesammelte Implementierungsschuld abzubauen. |
/impeccable typeset | Korrigiert Schriften, Hierarchie, Größen und Abstände. | Wenn die Typografie schwach wirkt oder die Hierarchie unklar ist. |
/impeccable distill | Entfernt, was die Seite nicht braucht. | Wenn zu viel Inhalt den Fokus verwischt. |
/impeccable hooks status|on|off | Zeigt den Design-Hook an, schaltet ihn ein oder aus; er prüft UI-Dateien, die der Agent bearbeitet. | Um zu kontrollieren, ob die automatische Prüfung läuft, oder sie vorübergehend abzuschalten. |
Empfohlener Arbeitsablauf
Erst Kontext, dann Bildschirm. init fragt nur, was sich nicht ableiten lässt: für wen das Produkt gedacht ist, was es leisten soll und welche Einschränkungen gelten. Die Antworten landen in PRODUCT.md und werden von allen späteren Befehlen gelesen. Wer schon ein visuelles System hat, lässt document laufen und hält die Markenregeln in DESIGN.md fest, damit der Agent nicht mitten in der Arbeit den Stil wechselt.
Je enger das Ziel, desto besser das Ergebnis. Statt „mach die ganze Seite neu“ lieber „critique die Pricing-Karten“. Häufige Befehle lassen sich mit /impeccable pin audit als /audit-Kürzel festnageln; vor dem Ausliefern schließt man mit audit und dann polish ab.
- /impeccable init einmal pro Projekt ausführen und die entstandene PRODUCT.md gegenlesen.
- Bei vorhandenem Designsystem /impeccable document starten und Schriften, Farben und Komponenten in DESIGN.md festhalten.
- Abschnittweise iterieren: /impeccable critique the pricing cards, danach mit bolder, quieter, distill oder typeset nachjustieren.
- Vor der Veröffentlichung /impeccable audit und /impeccable polish nacheinander laufen lassen und häufig genutzte Befehle pinnen.
Unterstützte Agents
Die offizielle Liste ist breit: Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness und Veto. Die Installation unterscheidet sich je nach Werkzeug; die vollständige Liste steht in der offiziellen Dokumentation.
Claude Code, Copilot und Grok haben Plugins; den Design-Hook gibt es für Claude Code, Cursor, Codex, GitHub Copilot, Grok Build und Hermes Agent. Bei Codex muss der Projekt-Hook in /hooks genehmigt werden, bei Grok Build hilft /hooks-trust, bei Hermes muss das Plugin aktiviert werden.
Wer kein Node installieren will, kopiert den Skill-Ordner von Hand. Nur den Detektor braucht man mit npx impeccable detect, ganz ohne Agent. Der Live-Modus unterstützt Vite, Next, SvelteKit, Astro, Nuxt und einfaches HTML, ändert aber ausschließlich eine lokale Arbeitskopie.
Impeccable im Vergleich zu ArtCraft MCP
Die Namen klingen ähnlich, weil beide Agents für praktische Arbeit nutzbar machen. Sie liegen aber auf verschiedenen Ebenen: Impeccable bearbeitet den Quellcode der Oberfläche, ArtCraft MCP ist das offizielle MCP/CLI pro App von storytold, das lokale Crafting Apps wie PhotoCraft steuert. Es ist auch nicht die gleichnamige Community-API auf Abo-Basis.
| Dimension | Impeccable | ArtCraft MCP |
|---|---|---|
| Worauf es wirkt | Frontend-Quellcode im Repository: Komponenten, JSX/TSX, CSS und Seitenstruktur. | Lokale Crafting Apps (etwa PhotoCraft) und deren Bild- und Videoworkflows. |
| Was es liefert | Designempfehlungen, Codeänderungen, critique-/audit-Berichte sowie PRODUCT.md und DESIGN.md. | Bilder oder Videos und automatisierte Aktionen innerhalb dieser Apps. |
| Wann es passt | Wenn eine Frontend-Oberfläche gebaut, bewertet oder poliert werden soll. | Wenn Bilder und Videos in Serie entstehen oder App-Abläufe automatisiert werden sollen. |
| Ergänzen sie sich? | Ja: die Oberfläche mit Impeccable, die Materialproduktion mit ArtCraft MCP. | Ja, aber nur für Medienassets. Es macht keine Design-Review der Oberfläche und ersetzt Impeccable nicht. |
ArtCraft-MCP-LeitfadenCrafting Apps
Grenzen und Sicherheit
Impeccable ist ein Frontend-Design-Skill und eine CLI, keine Design-App und kein Bildgenerator. Der Live-Modus ändert nur eine lokale Arbeitskopie; spiele ihn nicht in eine deployte Seite ein und lockere für ihn keine Produktions-CSP.
Hooks laufen außerhalb der Modellfreigabe. In Claude Code können installierte Command-Hooks auch dann ausgeführt werden, wenn du die Befehle des Modells ablehnst; die erste Bearbeitung kann den Engine-Download auslösen. Prüfe die Hooks vor unbeaufsichtigten Läufen oder schalte sie mit --settings '{"disableAllHooks": true}' ab.
Die Telemetrie hält anonym fest, welche visuellen Richtungen gezeigt und welche gewählt wurden; Projektname, Dateien, Code und PRODUCT.md werden nicht übertragen. Abschalten geht mit npx impeccable telemetry off, DO_NOT_TRACK=1 oder "telemetry": false in .impeccable/config.json. Beim Detektor bedeutet Exit-Code 2 Befunde, 1 ein nicht scanbares Ziel.
Verwandte Leitfäden
Häufige Fragen
Was ist Impeccable, und ist es ein ArtCraft-Produkt?
Impeccable ist ein Design-Skill und eine CLI für Coding-Agents von Paul Bakaus, mit 24 Befehlen und einem Detektor aus 62 Regeln unter Apache-2.0. Es ist kein ArtCraft-Produkt und gehört nicht zur ArtCraft-Suite. Diese Seite ist ein unabhängiger Leitfaden; offizielle Quellen sind impeccable.style und github.com/pbakaus/impeccable.
Wie wird es installiert?
Im Projektstamm npx impeccable install ausführen und das Coding-Tool neu laden. Danach /impeccable init starten, bei Codex $impeccable init, um PRODUCT.md zu erzeugen. npx setzt Node 18.19 oder neuer voraus; npx impeccable update frischt eine bestehende Installation auf, die vollständigen Schritte stehen auf impeccable.style/docs.
Worin unterscheiden sich critique und audit?
critique ist eine bewertete UX-Review anhand von Usability-Heuristiken und sagt, was zuerst zu beheben ist. audit liefert einen technischen Bericht zu Barrierefreiheit, Performance, Theming, Responsive-Verhalten und Integrität der Umsetzung, mit Befunden von P0 bis P3. Der eine beurteilt die Erfahrung, der andere die Technik; oft laufen beide nacheinander.
Braucht es einen API-Key?
Der Detektor nicht: Seine 62 Regeln arbeiten deterministisch und rufen weder ein LLM noch einen API-Key auf. Auch der Skill selbst läuft im Agent und braucht keinen zusätzlichen Modellschlüssel. Telemetrie lässt sich mit npx impeccable telemetry off oder DO_NOT_TRACK=1 abschalten.
Mit welchen Agents funktioniert es?
Mit Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness und Veto. Installation und Hook-Unterstützung unterscheiden sich je nach Werkzeug; die aktuelle Liste steht auf impeccable.style/docs.
Impeccable oder ArtCraft MCP?
Das hängt davon ab, was du ändern willst. Impeccable arbeitet am Code der Oberfläche und liefert Empfehlungen, Änderungen und Reviews. ArtCraft MCP steuert lokale Apps wie PhotoCraft, um Bilder und Videos zu erzeugen und Abläufe zu automatisieren. Beides lässt sich kombinieren, aber ArtCraft MCP ist kein Design-Review-Werkzeug und ersetzt Impeccable nicht.
Hinweis zur Unabhängigkeit
Impeccable ist ein unabhängiges Open-Source-Projekt von Paul Bakaus. Es steht in keiner Verbindung zu ArtCraft, ist kein ArtCraft-Produkt und gehört weder zur ArtCraft-Suite noch zu deren offiziellen Komponenten. Diese Seite schreibt ein Dritter für deutschsprachige Leserinnen und Leser; für Befehle, Voraussetzungen und Neuerungen gelten impeccable.style und github.com/pbakaus/impeccable. ArtCraft MCP ist eine andere offizielle Integration für Crafting Apps und löst eine andere Aufgabe.
Sources
Every fact on this page comes from the pages below, checked on 3 November 2026.