NCA Social Media
Aktualisiert:
Autor:
Roland Golla
Grüner Farbfächer mit Impeccable Schild und Roboter mit Pinsel

Was ist Impeccable?

Impeccable ist ein Open Source Design Skill für KI Coding Agents. Er gibt Agents wie OpenCode, Codex, Cursor oder Claude Code ein gemeinsames Design Vokabular, damit Oberflächen nicht mehr nach Template aussehen.

Entwickelt hat Impeccable Paul Bakaus. Das Paket bündelt einen Skill mit 24 Befehlen, Live Iteration im Browser und 61 feste Detector Regeln für KI generiertes Frontend Design. Gestartet ist das Projekt auf Basis des frontend-design Skills von Anthropic. Impeccable steht unter der Apache 2.0 Lizenz und ist kostenlos.

Im Alltag sieht das so aus: Du rufst im Agent Chat Befehle wie /impeccable polish oder /impeccable audit auf. Impeccable liest vorher deinen Produktkontext und dein bestehendes Design System. Erst dann schreibt der Agent Code.

Inhalt

Impeccable mit NCA: Schnelle Hilfe vom Experten

Wir bauen jeden Tag Frontends mit Astro, React, Vue und Tailwind CSS, und Coding Agents arbeiten dabei mit. Genau dort entsteht das Problem, das Impeccable angeht: Agents greifen zu denselben Mustern, und jede Seite sieht gleich aus. Impeccable ist nicht Teil unseres Production Stacks. Wir ordnen es für Teams ein, die mit Agents Oberflächen bauen und dabei Qualität, Barrierefreiheit und ein eigenes Design halten wollen.

In der NCA Vibe Coding Consulting klären wir, ob ein Design Skill zu deinem Workflow passt. Mit den NCA Agentic AI Coding Guardrails binden wir Prüfungen wie den Impeccable Detector in Regeln und Pipelines ein. Beim Codebase Audit für KI generierten Code schauen wir auch auf das Frontend, und im Accessibility Webdesign sorgen wir dafür, dass schöne Oberflächen auch barrierefrei sind. Im NCA KI Workshop für Developer üben Teams Agentic Coding im eigenen Setup, und die Vibe Coding Beratung begleitet den Weg danach.

NCA KI Workshop für Developer

Agentic Coding im Team, nicht nur im Glossar

Ein Tag inhouse mit Benjamin Klein für Developer, Tester und Admins. Context Engineering, Harness, ADRs und zwei Hands on Blöcke mit KI Agenten in eurem Setup.

  1. 1
    Kostenloses Vorgespräch
    Stand, Rollen und Ziele klären
  2. 2
    Workshoptag bei euch
    Praxis am Vormittag, Hands on danach
  3. 3
    Praxistag optional
    Agenten im eigenen Projekt
Benjamin Klein
Benjamin Klein
Senior Consultant
Zum Workshop für Developer arrow_forward

Warum Impeccable: Alle Agents kennen dieselben Templates

Jedes Modell hat mit denselben SaaS Vorlagen trainiert. Ohne Anleitung kommen deshalb immer wieder dieselben Muster heraus. In der Szene heißt das AI Slop. Typische Beispiele:

  • Inter als Schrift für alles
  • Verläufe von Lila nach Blau
  • Karten in Karten in Karten
  • graue Schrift auf farbigem Hintergrund
  • das abgerundete Icon Kästchen über jeder Überschrift

Das ist mehr als Geschmack. Graue Schrift auf Farbe scheitert oft am Kontrast. Verschachtelte Karten machen Seiten schwer lesbar. Und eine Seite, die aussieht wie tausend andere, schafft wenig Vertrauen.

Impeccable gibt dem Agent klare Regeln, was er vermeiden soll. Danach prüft der Detector das Ergebnis. So wird aus einem Bauchgefühl eine Prüfung, die jeder im Team nachvollziehen kann.

So arbeitet Impeccable: Kontext, Befehle, Detector

Impeccable besteht aus fünf Bausteinen. Zusammen geben sie dem Agent Wissen über dein Produkt, eine Sprache für Designarbeit und eine Kontrolle am Ende.

  • PRODUCT.md: /impeccable init fragt einmal nach Zielgruppe, Zweck und Rahmenbedingungen und speichert das Ergebnis. Spätere Befehle lesen diese Datei vor jeder Designarbeit.
  • DESIGN.md: /impeccable document liest Farben, Schriften, Abstände und Komponenten aus dem bestehenden Code. Der nächste Agent baut damit im gleichen Stil weiter.
  • 24 Befehle: ein gemeinsames Vokabular von polish über distill bis harden. Du sagst dem Agent in einem Wort, was du willst.
  • Detector: 61 feste Regeln finden AI Slop und allgemeine Designfehler wie zu lange Zeilen, zu kleine Klickflächen oder übersprungene Überschriften. Er läuft ohne KI Modell und ohne API Key.
  • Live Mode: Im laufenden Dev Server wählst du Elemente aus und lässt Varianten erzeugen. Die gewählte Variante schreibt der Agent in den Quellcode.

Für uns ist der Detector der spannendste Teil. Er arbeitet deterministisch: gleicher Code, gleiches Ergebnis. Genau so muss ein Quality Gate funktionieren.

Impeccable installieren und starten

Impeccable braucht keine eigene Runtime. Der Installer läuft über npx und setzt Node.js 22.18 oder neuer voraus. Im Projektordner reicht ein Befehl:

Code: 
          
npx impeccable install

Der Installer erkennt die vorhandenen Coding Tools und fragt, ob Impeccable nur für das Projekt oder global installiert wird. Danach das Tool neu laden und im Agent Chat einmal starten:

Code: 
          
/impeccable init

Updates laufen über npx impeccable update. PRODUCT.md und DESIGN.md bleiben dabei unangetastet. Wer Impeccable im Team versioniert haben will, bindet das Repository als Git Submodule ein und verlinkt es mit dem eigenen Coding Tool:

Code: 
          
git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=opencode

Die wichtigsten Impeccable Befehle im Überblick

Alle Befehle laufen über /impeccable. Diese acht decken den Weg von der Planung bis zum Release ab.

Befehl Was er macht Wann du ihn nutzt
/impeccable init Legt PRODUCT.md mit Zielgruppe und Zweck an Einmal zu Projektbeginn
/impeccable document Schreibt DESIGN.md aus dem bestehenden Code Bei Projekten mit eigenem Stil
/impeccable shape Plant UX und UI vor dem ersten Code Vor neuen Seiten und Features
/impeccable critique Prüft Hierarchie, Klarheit und Wirkung Im Review einer Seite
/impeccable audit Prüft Barrierefreiheit, Performance und Responsive Vor jedem Release
/impeccable harden Ergänzt Fehlerbehandlung, i18n und Textüberlauf Bei Formularen und Checkout
/impeccable distill Reduziert eine Seite auf das Wesentliche Wenn eine Seite überladen wirkt
/impeccable polish Letzter Durchgang und Abgleich mit dem Design System Kurz vor dem Ausliefern

Impeccable mit OpenCode: Was geht und was fehlt

OpenCode ist unser Coding Agent im Alltag. Impeccable liefert dafür einen eigenen Build mit. Skill und alle Befehle funktionieren dort wie in jedem anderen Tool.

Einen Unterschied gibt es beim Design Hook. Der Installer richtet ihn für Claude Code, GitHub Copilot, Codex, Cursor und Grok Build ein. Dort prüft er jede UI Änderung und meldet Funde direkt an den Agent zurück. Für OpenCode steht diese automatische Prüfung derzeit nicht auf der Liste.

Die Lücke lässt sich schließen. Der Detector läuft auch als eigenständige CLI. Wer ihn in die Pipeline holt, bekommt dieselben Regeln, egal mit welchem Agent der Code entstanden ist. Das gilt auch für schlanke Terminal Agents wie den Pi Coding Agent oder Editoren wie Cursor.

Impeccable in der Pipeline: Der Detector als Quality Gate

Bei Exact Coding zählen Prüfungen, die immer gleich laufen. Der Impeccable Detector passt genau da hinein. Er prüft Verzeichnisse, einzelne HTML Dateien oder eine laufende Seite:

Code: 
          
npx impeccable detect src/
npx impeccable detect --json . > impeccable-report.json
npx impeccable detect https://example.com

Die Exit Codes sind klar geregelt: 0 heißt keine Funde, 2 heißt Funde, 1 heißt, ein Ziel ließ sich nicht prüfen. Damit bricht ein Job in GitHub Actions oder GitLab CI sauber ab, wenn der Agent wieder lila Verläufe einbaut.

Ausnahmen gehören in die Konfiguration. Eine Markenschrift lässt sich gezielt freigeben, ohne die ganze Regel abzuschalten. So bleibt der Rest der Prüfung scharf. Wie wir solche Gates für KI Code aufbauen, zeigen wir bei Code Qualität mit KI Agenten.

Impeccable und Barrierefreiheit: Gute Hilfe, kein Nachweis

/impeccable audit prüft unter anderem die Barrierefreiheit. Der Detector findet zu kleine Klickflächen, übersprungene Überschriften und zu lange Zeilen. Das fängt viele Fehler früh ab, noch bevor ein Mensch die Seite sieht.

Die Entwickler sagen selbst: Ein sauberer Lauf ist ein Hinweis, kein Beweis. Er ersetzt nicht den Blick auf die gerenderte Seite in verschiedenen Viewports. Für echte Barrierefreiheit braucht es mehr:

Guardrails: Worauf Teams bei Impeccable achten sollten

Impeccable greift tief in den Workflow ein. Hooks laufen automatisch, Live Mode startet lokale Helfer, manche Befehle erzeugen Bilder. Diese Punkte gehören vor dem Rollout auf den Tisch:

  • Hooks prüfen: Hooks laufen unabhängig von der Freigabe einzelner Tool Aufrufe. Beim ersten Lauf lädt die Engine eine Binary nach. Vor unbeaufsichtigten Läufen gehört das ins Review.
  • Live Mode nur lokal: Live Mode arbeitet mit dem lokalen Dev Server. Auf einer Produktionsseite hat der Helper nichts zu suchen, und die Content Security Policy bleibt, wie sie ist.
  • Bildgenerierung im Blick: Einige Befehle können Bilder erzeugen. Je nach Tool läuft das über den Anbieter des Coding Tools oder als Fallback über die OpenAI API. Das kostet extra und schickt Daten an einen US Anbieter.
  • .impeccable sauber trennen: Screenshots und Session Daten landen im Ordner .impeccable. Flüchtige Dateien gehören in die .gitignore, Konfiguration und Reviews ins Repository.
  • Testdaten statt Kundendaten: Wie bei jedem Coding Agent läuft das Setup gegen lokale Umgebungen mit anonymisierten Daten.

Impeccable macht Agents besser im Design. Die Verantwortung für das Ergebnis bleibt im Team.

The design language that makes your AI harness better at design.

Paul Bakaus, Entwickler von Impeccable – Impeccable Repository auf GitHub

Aus der NCA Praxis: Design Qualität mit Coding Agents

Wir helfen Teams, Coding Agents so einzurichten, dass am Ende Oberflächen entstehen, die zur Marke passen und für alle nutzbar sind. Ein Design Skill ist dabei ein Baustein. Entscheidend sind Kontext, Regeln und Prüfungen in der Pipeline.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.

NCA Vibe Coding Consulting

Roland Golla ist Entwickler aus Leidenschaft – seit über 20 Jahren. Er hat hunderte Projekte begleitet, von Legacy-Refactoring bis KI-Integration. Bei Vibe Coding verbindet er das Beste aus beiden Welten: Die Geschwindigkeit von KI-generiertem Code mit der Qualität professioneller Softwareentwicklung. Kein Bullshit, keine Agentur-Floskeln – direkte Hilfe von jemandem, der selbst täglich im Code steckt.

E-Mail Kontakt

Häufige Fragen zu Impeccable

Die wichtigsten Antworten zu Impeccable: Installation, Befehle, Detector und Einsatz im Team.

Was ist Impeccable 2026?

<p>Impeccable ist ein Open Source Design Skill für KI Coding Agents. Er gibt Agents 24 Befehle für Designarbeit, liest den Produktkontext aus PRODUCT.md und das Design System aus DESIGN.md und prüft Ergebnisse mit 61 festen Detector Regeln. Entwickelt hat ihn Paul Bakaus, die Lizenz ist Apache 2.0.</p>

Ist Impeccable 2026 kostenlos?

<p>Ja. Skill, Befehle, CLI und Detector sind kostenlos und stehen unter der Apache 2.0 Lizenz. Kosten entstehen nur beim Coding Tool oder beim Modellanbieter, etwa für Tokens oder Bildgenerierung. Diese Kosten sind unabhängig von Impeccable und hängen davon ab, welches Modell dein Agent nutzt.</p>

Welche Coding Agents unterstützt Impeccable 2026?

<p>Impeccable läuft unter anderem mit OpenCode, Claude Code, Codex CLI, Cursor, GitHub Copilot, Gemini CLI, Pi, Kiro, Mistral Vibe und Google Antigravity. Der Installer erkennt die vorhandenen Tools und wählt den passenden Build. Den automatischen Design Hook gibt es für Claude Code, GitHub Copilot, Codex, Cursor und Grok Build.</p>

Wie installiere ich Impeccable 2026?

<p>Im Projektordner npx impeccable install ausführen. Der Installer braucht Node.js 22.18 oder neuer, fragt nach dem Coding Tool und installiert für das Projekt oder global. Danach das Tool neu laden und im Agent Chat /impeccable init starten. Updates laufen später über npx impeccable update.</p>

Was bedeutet AI Slop im Design 2026?

<p>AI Slop beschreibt die typischen Muster, die Agents ohne Anleitung immer wieder bauen: Inter als Standardschrift, lila Verläufe, Karten in Karten und graue Schrift auf farbigem Grund. Sie stammen aus denselben Vorlagen in den Trainingsdaten. Impeccable benennt diese Muster und lässt sie vom Detector automatisch finden.</p>

Braucht der Impeccable Detector ein KI Modell?

<p>Nein. Der Detector arbeitet mit festen Regeln und läuft ohne KI Modell und ohne API Key. Er prüft Verzeichnisse, einzelne HTML Dateien oder eine URL. Für Pipelines gibt es JSON Ausgabe und klare Exit Codes. Damit eignet er sich als Quality Gate in GitHub Actions oder GitLab CI.</p>

Was ist der Unterschied zwischen PRODUCT.md und DESIGN.md?

<p>PRODUCT.md hält fest, für wen das Produkt ist, welchen Zweck es hat und welche Rahmenbedingungen gelten. DESIGN.md beschreibt das visuelle System mit Farben, Schriften, Abständen und Komponenten. Die erste Datei entsteht mit /impeccable init, die zweite mit /impeccable document aus dem bestehenden Code.</p>

Funktioniert Impeccable mit OpenCode?

<p>Ja, Impeccable bringt einen eigenen Build für OpenCode mit. Skill und alle Befehle stehen dort zur Verfügung. Der automatische Design Hook wird für OpenCode derzeit nicht eingerichtet. Wer dieselben Prüfungen trotzdem will, ruft den Detector über die CLI auf, lokal oder in der Pipeline.</p>

Ersetzt Impeccable einen Designer?

<p>Nein. Impeccable gibt dem Agent Regeln und Vokabular, damit Oberflächen sauberer und eigenständiger werden. Entscheidungen über Marke, Zielgruppe und Wirkung trifft weiter ein Mensch. Gerade bei neuen Produkten lohnt sich ein Design System, das ein Designer vorgibt und Impeccable danach einhält.</p>

Prüft Impeccable die Barrierefreiheit einer Website?

<p>Teilweise. /impeccable audit prüft auch Barrierefreiheit, und der Detector findet etwa zu kleine Klickflächen und übersprungene Überschriften. Ein sauberer Lauf ist aber kein Nachweis. Für echte Barrierefreiheit braucht es zusätzlich manuelle Prüfungen und Tests mit Tools wie axe oder Lighthouse.</p>

Wo speichert Impeccable seine Daten im Projekt?

<p>Arbeitsdateien landen im Ordner .impeccable, zum Beispiel Screenshots, Live Mode Sessions und Caches. Diese flüchtigen Dateien gehören in die .gitignore. Konfiguration, design.json, Surface Briefs und Critique Reports sind geteilte Artefakte und bleiben im Repository. Impeccable liefert dafür einen fertigen Block für die .gitignore mit.</p>

Kann ich Impeccable im Team einheitlich ausrollen?

<p>Ja. Für Teams bietet sich ein Git Submodule an. Das Repository wird eingebunden und per npx impeccable link mit den Coding Tools verbunden. So nutzen alle dieselbe Version. Die geteilte Konfiguration mit Detector Ausnahmen liegt versioniert im Repository und gilt für alle gleich.</p>