Impeccable Skill für Claude Code: Test auf meiner Website
Ich hätte es fast nicht installiert. Ein weiterer Open-Source-Claude Code-Skill, ein weiterer Dienstag, ein weiteres GitHub-Repo, das verspricht, das Problem „AI sieht aus wie AI“ zu beheben. Ich hatte diesen Film schon einmal gesehen. Also habe ich es mit einem Lesezeichen versehen und bin zurück zum Versand gegangen.
Dann habe ich einen Befehl für mein eigenes Portfolio ausgeführt.
impeccable critique hat eine Zahl zurückgegeben, die ich nicht sehen wollte: 25 von 40. Grenzlinie AI Slop. Die Fertigkeit wies auf fünf spezifische Dinge hin – drei davon waren Entscheidungen, die ich persönlich getroffen, in Designprüfungen verteidigt und mit Zuversicht ausgeliefert hatte. Bei den anderen beiden handelte es sich um verzögerte Standardeinstellungen, die mir nie aufgefallen waren, da ich jeden Tag die gleiche Website besuche.
Das war der Moment, in dem ich Impeccable nicht mehr als einen weiteren Skill im Verzeichnis behandelte, sondern ihn als zweites Augenpaar behandelte. Im Laufe der nächsten Woche habe ich damit Abschnitte von zwei Projekten neu erstellt, das craft-Interview von Grund auf auf einer gefälschten SaaS-Landingpage durchgeführt und den Alpha-Live-Modus auf sechs verschiedene Arten unterbrochen. Dieser Beitrag ist der ehrliche Bericht. Was hat funktioniert. Was nicht. Was ich nach der Partitur auf meiner eigenen Website geändert habe, war hässlich.
Wenn Sie im Jahr 2026 einen Frontend-Code mit
Was Impeccable eigentlich ist (ohne den Marketing-Spin)
Entfernen Sie die Website-Kopie und den [Impeccable
Das klingt langweilig, bis man liest, was im Abschlag steht.
Dreiundzwanzig Befehle. Sieben domänenspezifische Referenzdateien – Typografie, Farbe, räumliches Design, Reaktionsfähigkeit, Interaktionen, Bewegung und UX-Schreiben. Eine Liste expliziter „Do not“-Regeln, die in den Arbeitsspeicher des Modells integriert sind. Das Ganze wird mit einem Befehl installiert und funktioniert in Claude Code, Cursor, Gemini CLI und Codex CLI. Ab Version 1.5.1 (ausgeliefert am 17. März 2026, liegt derzeit nördlich von 10.000 GitHub-Sternen) deckt es den Großteil der Front-End-Design-Pipeline ab, die ein einzelner Entwickler oder ein kleines Produktteam anfassen würde.
Der Autor ist Paul Bakaus. Die zugehörige Website unter impeccable.style hostet before/after-Galerien, Dokumente, eine Chrome-Erweiterung und eine eigenständige CLI zum Scannen von Dateien außerhalb eines AI-Harness. Es gibt eine Marketing-Infrastruktur rund um das Projekt, aber der Kernwert liegt in der Fähigkeit selbst. Wenn Sie nur den Skill installieren und alles andere ignorieren, profitieren Sie dennoch von den meisten Vorteilen.
Hier ist, was niemand sonst klar sagt: Diese Fähigkeit ist im Grunde eine Verbesserung des Wortschatzes. Anthropics eigener frontend-design-Fähigkeit (der mit Claude Code gelieferte) gibt dem Modell eine Designrichtung. Impeccable geht noch einen Schritt weiter, indem es ihm Worte verleiht. Spezifische Wörter. „Leiser.“ „Mutiger.“ "Destillieren." "Polieren." "Anpassen." Bei jedem handelt es sich um einen Befehl, den das Modell für eine Komponente ausführen kann, mit dokumentierten Regeln darüber, was jedes Wort visuell bedeutet.
Die meisten AI-Designausgaben sehen gleich aus, da das Modell kein Vokabular für die Design-Richtung hat. Es kann beschreiben: „Verwenden Sie eine 16-Pixel-Schriftart mit einer Zeilenhöhe von 1,5“ – aber es kann nicht anweisen: „Machen Sie diesen Abschnitt leiser, damit der CTA die Aufmerksamkeit auf sich zieht.“ Impeccable installiert diese Richtungsebene. Das ist die eigentliche technische Innovation.
Die Anti-Pattern-Liste, die mich zehn Minuten lang zum Schweigen brachte
Lassen Sie mich Ihnen zeigen, was mir den Kopf zerbrochen hat, als ich die Skill-Dateien zum ersten Mal gelesen habe.
Im Repo gibt es eine Liste expliziter „DO NOT“-Regeln. Dinge wie: Verwenden Sie keinen grauen Text auf farbigen Hintergründen. Verwenden Sie nicht die AI-Palette (Cyan-auf-Dunkel-, Lila-zu-Blau-Verläufe). Verwenden Sie kein reines Schwarz oder reines Weiß ohne leichte Tönung. Laden Sie nicht drei Schriftfamilien und versenden Sie nur zwei. Dekorieren Sie nicht mit Clip-Art-Modellen von Telefonen. Begraben Sie den primären CTA nicht in einer Karte mit demselben Hintergrund wie der umgebende Abschnitt.
Ich saß da und las und dachte: Ich habe jedes einzelne davon in den letzten sechs Monaten verschickt.
Nicht, weil ich es nicht besser wüsste. Denn wenn ich Claude Code um 23:00 Uhr auffordere und ihm sage, dass es „einen Heldenabschnitt erstellen“ soll, gibt mir das Modell an, wie seine Trainingsdaten lauten, wie ein Heldenabschnitt aussieht. Die Trainingsdaten sind das öffentliche Internet. Das öffentliche Internet besteht ab 2026 hauptsächlich aus Tailwind UI, Vercel-Vorlagen und von AI generierten Landingpages. Das statistische Zentrum dieser Verteilung ist genau das Aussehen, das die Anti-Muster von Impeccable beschreiben.
Anthropic hat dafür einen Namen – Verteilungskonvergenz. Die Modelle reproduzieren das statistische Zentrum von Designentscheidungen, da sie auf das statistische Zentrum von Designentscheidungen trainiert wurden. Der Beitrag von Impeccable besteht nicht darin, dass es das Modell „intelligenter“ macht. Es bringt das Modell aus der Mitte, indem es willkürliche Einschränkungen einfügt, auf die sich kein Designausschuss im öffentlichen Internet jemals geeinigt hat.
Das ist ein wichtigerer Beitrag, als es sich anhört. Die meisten „Anti-Slop“-Tools versuchen, fehlerhafte Ausgaben im Nachhinein zu erkennen. Impeccable verhindert, dass die Ausgabe überhaupt erfolgt, indem es dem Modell eine andere Referenzverteilung gibt. Es ist der Unterschied zwischen dem Bearbeiten eines Entwurfs und dem Ändern dessen, was entworfen wird.
Ich werde Sie gleich durch die sieben Design-Säulen führen, aber ich möchte hier ein Zeichen setzen: Allein die Anti-Pattern-Liste ist es wert, den Skill zu installieren. Selbst wenn Sie nie einen einzigen Befehl verwenden, wird die Anwesenheit dieser Regeln in Ihrem Claude Code-Kontext die Lieferung des Modells messbar verändern.
Die sieben Säulen (und warum sie wichtiger sind als die Befehle)
Den größten Teil der Presse bekommen die 23 Befehle, aber die tragende Struktur der Fertigkeit sind die sieben Referenzdateien. Jedes ist ein tiefer Einblick in eine einzelne Designdomäne, und Claude greift darauf zurück, wann immer es diesen Bereich des Codes berührt.
Typografie. Nicht „Inter verwenden“ – tatsächliche Regeln. Optische Dimensionierung über Haltepunkte hinweg. Die Beziehung zwischen der Höhe der Textzeile und dem Abstand des umgebenden Absatzes. Wann werden Anzeigeschriftarten verwendet und wann sollte die Hauptschriftart vergrößert werden? Die Anti-Referenzen des Skills weisen ausdrücklich auf die Überbeanspruchung von Inter hin, was ich zu schätzen wusste, da ich bei drei meiner vier Projekte daran schuld war.
Farbe. Hier gehen die meisten AI-Ausgaben unter. Die Referenzdatei drängt auf Zurückhaltung, Akzentdisziplin und getönte Neutraltöne gegenüber reinem Schwarz und reinem Weiß. Es gibt einen speziellen Abschnitt zu dem, was der Skill „decoration discipline“ nennt – Farbe, die der Hierarchie dient, nicht der Spannung. Nachdem ich dies auf meiner Website ausgeführt hatte, entfernte ich zwei Hintergrundhintergründe mit Farbverlauf und die Seite wurde deutlich selbstbewusster.
Räumliches Design. Polsterung, Ränder und Rhythmus zwischen Abschnitten. In der Referenzdatei geht es um einen konsistenten vertikalen Rhythmus über Haltepunkte hinweg – ein Punkt, den AI-generierte Layouts fast nie richtig hinbekommen, da die Trainingsdaten voller inkonsistenter Abstände sind.
Reaktionsfähigkeit. Spezifische Regeln darüber, wie sich Layouts zwischen Haltepunkten ändern und nicht nur in der Größe ändern sollen. Dies ist eine der Säulen, bei denen sich die Ausgabe von Impeccable deutlich von der Standardgenerierung von Claude Code unterscheidet.
Interaktionen. Schwebezustände, Fokusringe und das, was der Skill „zustandsbehaftete Oberflächen“ nennt. Es gibt eine stille, aber wichtige Regel, dass Schwebezustände etwas Sinnvolles tun müssen und nicht nur leicht abgedunkelt werden müssen. Nachdem ich es gelesen hatte, ging ich meine eigene Website durch und stellte fest, dass sieben meiner Schaltflächen Schwebezustände hatten, die im Grunde nichts bewirkten.
Bewegung. Eine Referenzdatei mit starken Meinungen zu Lockerungskurven, Dauerbereichen und wann Bewegung überhaupt angemessen ist. Die Anti-Pattern-Callouts sind hier scharf: Bounce-Eliminierung bei seriösen Produkten, Parallaxe bei Seiten mit dichtem Inhalt und Animation, die um ihrer selbst willen existiert.
UX Writing. Das hier hat mich überrascht. Der Skill beinhaltet Anleitungen dazu, wie Schaltflächenbeschriftungen, Fehlermeldungen und Überschriften klingen sollten. Nicht nur Grammatik – Stimme. Es gibt eine Regel zum Vermeiden von „Klicken Sie hier“ und „Weitere Informationen“ als Linktext, die ich als decoration discipline-Regel an Claude Code gesendet habe und die ich nun ablehne, Code zusammenzuführen, der dagegen verstößt.
Die Säulen sind wichtiger als die Befehle, da die Befehle eine Abkürzung für das Aufrufen der Regeln in den Säulen sind. Wenn Sie impeccable polish eingeben, liest das Modell die Säulen Typografie, Farbe, Raum und Interaktionen gleichzeitig und wendet sie auf die ausgewählte Komponente an. Ohne die Säulen wären die Befehle nur Verben.
Der Greenfield-Workflow – Ausführen von impeccable craft von Grund auf
Ich habe dies an einem gefälschten SaaS-Produkt namens Lighthouse getestet – einem Tool zur Aggregation von Kundenfeedback. Neues Repo, neue Claude Code-Sitzung, kein vorheriger Designkontext. Ich wollte sehen, was impeccable craft tun würde, ohne dass eine vorherige Eingabe die Ausgabe formt.
Der Befehl leitet ein Interview ein. Etwa 13 Fragen, je nachdem, wie Sie die verzweigten Fragen beantworten. Die Struktur des Interviews ist der Teil, über den niemand spricht, also lassen Sie mich durchgehen, worum es eigentlich geht:
- Produkttyp. App-Benutzeroberfläche, Marketing-Website, Dashboard, Redaktion. Die Antwort bestimmt, ob der Skill im „Marken“-Modus (Design IST das Produkt) oder im „Produkt“-Modus (Design DIENT dem Produkt) ausgeführt wird. 2. Zielgruppe. Wer wird dies verwenden? Nicht „jeder“ – eine bestimmte Person mit einem bestimmten Job und einem bestimmten Maß an Designkompetenz. 3. Stimme und Ton. Selbstbewusst, verspielt, zurückhaltend, technisch. Mit Unterfragen dazu, ob sich die Stimme zwischen verschiedenen Kontexten ändert (z. B. Marketing vs. Fehlermeldungen). 4. Primärer CTA. Was ist die wichtigste Einzelaktion, die der Benutzer ausführt? Das Interview wehrt sich energisch gegen vage Antworten – „Anmelden“ wird durch „Wofür konkret“ ergänzt.
- Sehumfang. Hell, dunkel oder beides. Markenfarben, falls vorhanden. Typografiepräferenzen mit expliziten Warnungen vor generischen Entscheidungen. 6.
Anti-Referenzen. Wie es NICHT aussehen soll. Das war die klügste Frage. Der Skill fordert Sie auf, drei Konkurrenzseiten oder ästhetische Richtungen zu nennen, die Sie aktiv meiden möchten. 7. Persönlichkeitsdimensionen. Schieberegler entlang von Achsen wie „verspielt ↔ ernst“, „minimal ↔ maximal“, „sanft ↔ scharf“. Die Ausgabezusammensetzung ändert sich je nachdem, wo Sie landen.
Das Interview dauert zwischen 5 und 8 Minuten, wenn Sie nachdenklich antworten. Am Ende schreibt der Skill zwei Dateien in Ihr Repo: product.markdown und design.md.
product.markdown trägt die strategische Ebene – Register, Publikum, Stimme, Antireferenzen, Designprinzipien. Das „Wer, Was, Warum“ des Produkts. design.md trägt die visuelle Ebene – Farben, Typografie, Höhe, Komponenten, Gebote und Verbote, formatiert in derselben sechsteiligen Struktur, die Google Stitch im Jahr 2025 populär gemacht hat.
Nachdem diese beiden Dateien vorhanden sind, werden sie von jeder zukünftigen Claude Code-Interaktion als Kontext gelesen. Hier liegt der eigentliche Hebel. Sie fordern das Modell nicht auf, jedes Mal einen Entwurf von Grund auf neu zu entwerfen – Sie fordern es auf, ein bereits dokumentiertes System zu erweitern.
Die Lighthouse-Demo – Erster Durchgang, dann drei Varianten
Nach dem Interview bat ich Claude Code (mit geladenem Impeccable-Skill und den beiden neuen Dateien im Kontext), eine Landingpage für Lighthouse zu erstellen. Eine Aufforderung. Keine Nachverfolgungen.
Der erste Durchgang war sauber. Nicht aufregend – aber sauber. Ein Held mit einer fokussierten Überschrift, einem einzigen primären CTA über dem Falz, einem ruhigen Feature-Raster und einem Testimonial-Bereich, der nicht schreit. Kein Glasmorphismus. Kein violetter Farbverlauf. Inter war nirgendwo in der Akte. Bei der Schriftart handelte es sich um eine Serifenschrift gepaart mit einer humanistischen Sans-Schriftart, beides Entscheidungen, die sich aus den Interviewantworten zum Thema Stimme ergaben.
Dann habe ich den zweiten Befehl ausgeführt – impeccable variants – und nach drei Layoutrichtungen gefragt: redaktionell, durchnässt und brutalistisch.
Die redaktionelle Variante sah aus wie ein langer Zeitschriftenartikel – randlose Fotografie, Initialen in der Überschrift, ein Pull-Zitat-Layout in der Seitenleiste. Die durchnässte Variante brachte die Markenfarbe dazu, 70 % des Sichtfeldes mit kontrastreicher weißer Schrift einzunehmen. Bei der brutalistischen Variante wurde die Dekoration vollständig entfernt – schwere schwarze Ränder, rohe HTML-Ästhetik, monospaced Anzeigetyp.
Was mich überraschte, war nicht, dass die Varianten unterschiedlich waren. Es war so, dass sie sich leserlich unterschieden. Von AI generierte Varianten sehen normalerweise wie das gleiche Design mit drei verschiedenen Farbpaletten aus. Diese haben sich tatsächlich auf bestimmte ästhetische Richtungen festgelegt, so wie sich ein leitender Designer festlegen würde, wenn er Optionen für einen Kunden skizziert.
Der beste Vergleich, den ich habe, ist die Variantengenerierung von Google Stitch, aber Stitch arbeitet innerhalb einer eigenen Leinwand. Impeccable generiert die gleiche Reihe unterschiedlicher Richtungen, liefert sie jedoch als tatsächlichen Produktionscode in Ihrem Claude Code-Workflow. Dieser Unterschied ist wichtig, wenn der nächste Schritt „Versenden“ und nicht „Screenshot“ ist.
Ich habe die durchnässte Variante für Lighthouse ausgewählt und bin in den Live-Modus gewechselt.
Live Mode - wo er glänzt und wo er stolpert
impeccable live ist die Alpha-Funktion und das Alpha-Label leistet einige Arbeit. Lassen Sie mich zu beiden Hälften ehrlich sein.
Der Glanz zuerst. Im Live-Modus wird eine Browsersitzung geöffnet, Ihr lokaler Entwicklungsserver geladen und Sie können Komponenten direkt in der gerenderten Ausgabe auswählen. Klicken Sie auf einen Helden. Führen Sie bolder aus. Der Held wird optisch schwerer – mehr Gewicht auf dem Typ, dichtere Komposition, tieferer Kontrast. Klicken Sie auf quieter. Das Gegenteil. Klicken Sie auf distill. Das Bauteil verliert an Ornamentik und reduziert sich auf seine Kernelemente. Klicken Sie auf polish. Das Modell geht über Abstands-, Ausrichtungs- und kleine visuelle Rhythmusprobleme hinweg und korrigiert diese, ohne die Struktur zu verändern.
Es gibt einen micro-variations-Modus, der vier oder fünf kleine Variationen der ausgewählten Komponente nebeneinander generiert. Sie akzeptieren die gewünschte Variante, lehnen die anderen ab und die gewählte Variante wird in die Datei zurückgeschrieben. Diese Schleife – Auswählen, Variieren, Akzeptieren – kommt der Entwurfsiteration in Echtzeit mit einem AI-Partner am nächsten. Wenn es funktioniert, macht es richtig Spaß.
Der Befehl detect führt den Anti-Pattern-Scanner für die Live-Seite aus und zeigt Probleme inline an. Bei der Lighthouse-Demo wurde eine Feature-Karte mit unzureichender Touch-Target-Größe auf Mobilgeräten, ein Heading-Sprung von h1 zu Alle drei waren echte Probleme. Keiner von ihnen wäre von einem Standard-Linter erwischt worden.
Jetzt die Stolpersteine. Der Live-Modus ist Alpha und er verhält sich auch so.
Die Browsersitzung verliert gelegentlich die Verbindung zum Claude Code-Prozess und Sie müssen beide neu starten. Die Komponentenauswahl ist auf Seiten mit tief verschachteltem DOM schwierig – manchmal wählen Sie ein Wrapper-Element aus, wenn Sie die sichtbare Karte haben möchten. Der Befehl adapt (der eine Komponente in ein anderes visuelles Register übersetzen soll) erzeugte zweimal eine Ausgabe, die das bestehende Layout zerstörte und eine manuelle Wiederherstellung erforderte. Und in einer besonders langen Sitzung schrieb das Akzeptieren einer Variante die Änderung in die falsche Datei in einem Monorepo und ich verlor etwa zehn Minuten mit der Wiederherstellung.
Wenn Sie den Live-Modus wie ein funktionierendes Skizzentool behandeln – schnelle Iteration, Bruch erwarten, häufiges Commit – ist er leistungsstark. Wenn Sie es als fertiges Feature betrachten, wird es Sie frustrieren. Der Autor hat wöchentlich Fixes verschickt, und der Verlauf sieht gut aus, aber Ende April 2026 ist es immer noch Alpha.
Die Mood-Board-Falle - warum detaillierte Prompts visuelle Inspiration schlagen
Hier ist ein Befund, mit dem ich nicht gerechnet habe. Impeccable akzeptiert Moodboard-Eingaben – Sie können Referenzbilder einfügen und den Skill bitten, daraus eine visuelle Richtung zu extrahieren. Ich habe dies zweimal anhand detaillierter Textaufforderungen für dasselbe Projekt getestet.
Beide Male gewannen die ausführlichen Textansagen.
Der Grund ist mechanisch. Wenn der Skill ein Moodboard aufnimmt, muss er die Bilder interpretieren und in dasselbe Vokabular übersetzen, das der Rest des Skills verwendet. Dieser Interpretationsschritt fügt Lärm hinzu. Wenn Sie die Antwort in Worten formulieren – „Ich möchte ruhige Typografie, großzügige Abstände, eine einzige Akzentfarbe, keine Verzierung“ –, überspringen Sie die Interpretation und das Modell führt die Ausführung entgegen Ihrer direkten Absicht aus.
Moodboards funktionieren immer noch. Sie sind nicht nutzlos. Aber die Menschen, die mit dieser Fähigkeit den größten Nutzen erzielen, sind diejenigen, die in Worte fassen können, was sie wollen. Wenn Ihr Designvokabular schwach ist, werden Moodboards die Lücke füllen. Wenn Ihr Designvokabular stark ist, sind Wörter schneller und präziser.
Dieser Kompromiss hat eine nützliche Implikation: Diese Fähigkeit ist ein Vokabeltrainer. Je häufiger Sie es verwenden, desto besser können Sie Design in Worten beschreiben und desto besser werden Ihre Ergebnisse. Es ist nicht nur ein Werkzeug – es ist eine Praxis.
Bearbeiten vorhandener Websites – Wo ich die 25/40-Bewertung erhalten habe
Lassen Sie mich nun zu dem Teil kommen, der mein Ego verletzt hat. Ich habe impeccable document auf meinem eigenen Portfolio bei mejba.me ausgeführt. Dieser Befehl erstellt ein Reverse Engineering eines design.md aus einer vorhandenen Codebasis und liest die tatsächlichen Stile, Komponenten und Muster, um ein Dokument zu erstellen, das beschreibt, was die Site derzeit ist – und nicht das, was Sie sich gewünscht haben.
Dieses Dokument ist brutal. Es ist ein ehrlicher Spiegel.
Dann habe ich impeccable critique ausgeführt. Der Skill ergab eine Design-Gesundheitsbewertung von 25 von 40. Der Grenzwert für „borderline AI slop“ liegt bei 26. Ich lag einen Punkt darunter.
Spezifische Probleme, auf die hingewiesen wurde:
- Kognitive Belastung auf der Startseite. Drei konkurrierende visuelle Schwerpunkte oberhalb der Falte. Das Auge wusste nicht, wohin es zuerst gehen sollte. Ich hatte dies in Designrezensionen als „reichhaltig“ verteidigt – der Skill nannte es „verstreut“.
- Visuelle Hierarchie im Blog-Index. Beitragstitel und Metainformationen hatten einen unzureichenden Größenkontrast. Ich habe dies mit benutzerdefiniertem CSS geliefert, auf das ich stolz war. Die Fähigkeit erkannte richtig, dass der Stolz auf die Autorenschaft Vorrang vor der Klarheit hatte. - Mehrdeutige CTAs. Drei Schaltflächen in der Kopfzeile, keine davon eindeutig die primäre Aktion. Das Model machte darauf aufmerksam und empfahl die Herabstufung von zwei auf Textlinks. - Glasmorphismus-Überbeanspruchung. Zwei Karten auf der Projektseite verwendeten Hintergrundunschärfeeffekte ohne funktionalen Grund. Ich hatte sie hinzugefügt, weil sie „modern aussahen“. Im Jahr 2022 sahen sie modern aus. – Unbenutzte Schriftarten geladen. Die Seite hat drei Schriftfamilien geladen. Zwei wurden verwendet.
Eines war ein Überbleibsel einer früheren Iteration, das ich nie entfernt habe. Reine Verschwendung, sowohl optisch als auch vom Seitengewicht her.
Ich habe nicht alle fünf auf einmal repariert. Ich habe die beiden wichtigsten herausgesucht – das Problem der kognitiven Belastung und die mehrdeutigen CTAs – und habe den Homepage-Helden neu erstellt, indem ich impeccable craft auf einem neuen Interview-Antwortsatz ausgeführt habe. critique erneut ausführen. Die neue Punktzahl war 32 von 40. Solide, nicht perfekt.
Die ehrliche Erkenntnis: Auf die Punktzahl kommt es nicht an. Der Punkt ist, dass die Fertigkeit spezifische, umsetzbare Probleme mit dazugehöriger Begründung identifiziert und die Probleme normalerweise richtig sind. Ich habe aufgehört, meinem eigenen Geschmack bei Layouts zu vertrauen, auf die ich zu lange gestarrt habe. Ich führe stattdessen critique aus.
decoration discipline und delight – Die beiden Befehle, über die niemand spricht
Die am häufigsten diskutierten Befehle sind craft, polish, live und critique. Die beiden, die stillschweigend die Art und Weise verändert haben, wie ich CSS schreibe, sind decoration discipline und delight.
decoration discipline prüft eine Komponente oder Seite auf unnötige visuelle Dekoration. Jeder Schatten, jeder Farbverlauf, jeder Rand, jede abgerundete Ecke und jeder Farbschnörkel wird anhand der Frage bewertet: „Verdient das seinen Platz?“ Dinge, die nicht entfernt werden. Der Output ist normalerweise 30–40 % magerer als der Input. Zuversichtlich. Zurückhaltend. Die Art von Design, die den Benutzer denken lässt: „Das ist die beste Version dieses Produkts“ und nicht „Das ist ein schickes Produkt“.
delight macht das Gegenteil. Nachdem ein Abschnitt diszipliniert wurde, führen Sie delight aus, um die Persönlichkeit wieder hinzuzufügen – aber insbesondere nur in den Momenten, in denen sie dem Benutzer dient. Ein Schwebezustand, der etwas Unerwartetes bewirkt. Ein leerer Staat mit Charakter. Ein Ladeskelett, das sich nicht für die Ladezeit entschuldigt. Die Regeln des Skills für delight sind eindeutig: niemals dekorativ, immer funktional, immer selten.
Die Reihenfolge ist wichtig. Disziplin zuerst, delight zweitens. Wenn Sie delight vor der Disziplinierung anwenden, wird die Persönlichkeit unter Lärm begraben. Wenn Sie ohne delighting disziplinieren, ist das Ergebnis kompetent, aber kalt. Die beiden Befehle sind ein Paar, und die meisten Tutorials, die ich gesehen habe, behandeln sie als getrennt.
Dies ist die Art von Nuance, die mich glauben lässt, dass die Fähigkeit von jemandem entwickelt wurde, der tatsächlich Produkte geliefert hat, und nicht nur über Design geschrieben hat. Andere Claude Code-Fähigkeiten, die es wert sind, installiert zu werden konzentrieren sich tendenziell auf die Arbeitsgeschwindigkeit; Bei Impeccable steht das Handwerk im Mittelpunkt.
Gemeinsame Ergebnisse auf fünf von mir getesteten Websites
Nach der Lighthouse-Demo und meiner eigenen Website habe ich den Skill mit vier weiteren Codebasen ausgeführt – zwei Kundenprojekten (mit Genehmigung), einem Open-Source-Repo, zu dem ich beitrage, und einem von der Vercel-Vorlage abgeleiteten Starter. Insgesamt fünf Websites, einschließlich meiner eigenen.
Einige Erkenntnisse wiederholen sich bei jedem einzelnen:
- Clip-Art-Modelle von Telefonen oder Laptops im Heldenbereich. Vier von fünf Websites hatten dies. Der Skill markiert es, weil es die visuelle Komplexität erhöht, ohne etwas über das eigentliche Produkt zu sagen. - Glasmorphismus-Überbeanspruchung. Drei von fünf. Hintergrundunschärfe auf Karten, Modalitäten und Overlays. Der Skill empfiehlt die Verwendung von Glasmorphismus nur dann, wenn er der Bedeutung der Oberfläche dient – ein schwebender Tooltip, ein Hover-Panel – und niemals als Dekoration. - Nicht verwendete Schriftarten geladen. Auf allen fünf Websites war mindestens eine Schriftartfamilie geladen, aber auf der gerenderten Seite nicht verwendet. Dabei handelt es sich um ein Problem mit der Seitenlänge und gleichzeitig um ein Problem mit der visuellen Kohärenz. - Fehlendes persönliches Branding. Vier von fünf hatten keine eindeutige visuelle Signatur. Es hätte jedes Produkt in ihrer Kategorie sein können.
Der craft-Workflow des Skills geht dem gezielt entgegen, indem er nach Anti-Referenzen fragt – wie Sie NICHT aussehen möchten – was eine Differenzierung erzwingt. - CTAs, die miteinander konkurrieren. Jede einzelne Website hatte mindestens zwei CTAs mit gleicher visueller Bedeutung auf der Startseite. Der Skill weist darauf konsequent hin und empfiehlt eine klare primäre, sekundäre und tertiäre Hierarchie.
Wenn Sie gerade eine Front-End-Codebasis erstellen oder pflegen und wissen möchten, was ein externer Prüfer erkennen würde, sind dies die fünf Dinge, auf die Sie zuerst achten sollten. Sie brauchen nicht einmal die Fähigkeit, sie zu finden – Sie brauchen jemanden, der bereit ist, Ihnen gegenüber ehrlich zu sein, was tatsächlich auf der Seite steht.
Die Einschränkungen, über die ich ehrlich sein sollte
Ich war während des gesamten Beitrags positiv eingestellt und die Fähigkeiten haben es mir verdient. Aber es gibt echte Grenzen.
Es funktioniert am besten mit westlichen, modernistischen Designkonventionen. Die Trainingsdaten und Referenzdateien lehnen sich stark an eine bestimmte ästhetische Tradition an – klare Schriftart, großzügiger Raum, zurückhaltende Farbe, minimale Verzierung. Wenn Ihr Projekt eine andere visuelle Tradition erfordert (stark ornamental, kulturspezifisch oder bewusst maximalistisch), wird die Fähigkeit zurückdrängen. Manchmal ist dieser Widerstand richtig. Manchmal ist es das nicht. Sie müssen wissen, wann Sie es überschreiben müssen.
Sie kann die gestalterische Beurteilung neuartiger Entscheidungen nicht ersetzen. Die Fähigkeit eignet sich hervorragend für die Anwendung bekannter Gestaltungsprinzipien auf ausgeführte Arbeiten. Es ist weniger gut darin, eine visuelle Richtung zu entwickeln, die noch niemand zuvor versucht hat. Wenn Sie etwas wirklich Neues bauen, hilft Ihnen die Fähigkeit dabei, eine saubere Version davon zu liefern, aber der Funke muss von Ihnen selbst ausgehen.
Live-Modus ist Alpha. Ich habe dies oben bereits behandelt, aber es verdient noch einmal darauf hingewiesen zu werden. Wenn Sie sich diese Fähigkeit aneignen und davon ausgehen, dass der Live-Modus einwandfrei funktioniert, werden Sie an Grenzen stoßen. Die nicht aktiven Befehle sind stabil und ausgezeichnet. Der Live-Modus ist eine Vorschau darauf, wohin das Projekt geht.
Es erhöht die Kontextnutzung. Das Laden von 23 Befehlen und 7 Referenzdateien in eine Claude Code-Sitzung verbraucht mehr Kontext als die Ausführung ohne den Skill. Bei großen Codebasen ist dies wichtig. Ich habe begonnen, impeccable selektiv zu verwenden – geladen für Design-fokussierte Sitzungen, entladen für Refactor-Sitzungen – um die Kontextausgaben im Gleichgewicht zu halten.
Die Chrome-Erweiterung und die CLI sind nett, aber optional. Die Begleitseite unter impeccable.style bietet unterstützende Tools, aber der Kernwert ist die Fähigkeit selbst. Lassen Sie sich nicht von der umliegenden Infrastruktur ablenken. Installieren Sie den Skill, führen Sie craft aus, führen Sie critique aus und liefern Sie bessere Frontends. Alles andere ist ein Bonus.
Was ich in der nächsten Stunde empfehlen würde
Wenn Sie bis hierhin gelesen haben, verfügen Sie über genügend Kontext, um eine echte Entscheidung zu treffen. Das würde ich tun, wenn ich jetzt neben dir säße.
Öffnen Sie Ihr Terminal. Navigieren Sie zu einem Nebenprojekt – nicht zu Ihrem wichtigsten, sondern zu einem Projekt, bei dem Sie ohne Konsequenzen experimentieren können. Installieren Sie den Skill mit npx skills add pbakaus/impeccable. Führen Sie impeccable document auf der vorhandenen Codebasis aus. Lesen Sie die Ausgabe, ohne sich zu verteidigen.
Führen Sie dann impeccable critique aus. Holen Sie sich die Punktzahl.
Unabhängig von der Punktzahl wählen Sie das Problem mit der größten Auswirkung aus der Liste aus und beheben Sie es mit dem in Ihrer Claude Code-Sitzung geladenen Skill. Ein Problem. Versuchen Sie nicht, alles zu reparieren. Versenden Sie den Fix, führen Sie critique erneut aus und beobachten Sie, wie sich die Punktzahl verändert hat.
Das ist die Schleife. Der erste Durchlauf dauert eine Stunde. Danach dauert es zehn Minuten. Innerhalb einer Woche haben Sie das Vokabular des Skills so weit verinnerlicht, dass Sie beginnen können, besseren Front-End-Code zu schreiben, mit oder ohne geladenen Code.
Das ist der zweite Vorteil, den niemand im Marketing erwähnt – die Verwendung dieser Fähigkeit macht Sie zu einem besseren Designer und nicht nur zu einem besseren Souffleur. Der Wortschatz wird übertragen. Die Anti-Muster-Bewusstseinsübertragungen. Der Disziplin-dann-delight-Rhythmus wird übertragen.
Ich begann diesen Beitrag mit dem Hinweis, dass ich es fast nicht installiert hätte. Ich beende es mit dem Hinweis, dass es der zweite Skill ist, den ich in jedem neuen Claude Code-Projekt lade, direkt nach meinen Agentendefinitionen. Wenn Sie zum ersten Mal sehen, wie sich ein Kritikpunkt von 25 auf 32 verschiebt, weil Sie tatsächlich die richtigen Dinge behoben haben, werden Sie verstehen, warum.
Wenn Sie im Jahr 2026 Frontend-Arbeiten mit AI erstellen und keine Anti-Pattern-Erkennung für Ihre Ausgabe ausführen, liefern Sie dieselbe Zielseite wie alle anderen. Der Skill ist kostenlos. Die Installation dauert dreißig Sekunden. Die Stunde, die Sie damit verbringen, es durch Ihre bestehende Codebasis laufen zu lassen, ist die Stunde mit dem höchsten Nutzen, die Sie diesen Monat haben werden.
Was gerade auf Ihrem Bildschirm angezeigt wird, würde wahrscheinlich eine Punktzahl unter 30 erreichen. Meiner hat das geschafft. Der nächste Schritt liegt bei Ihnen.
Lassen Sie uns zusammenarbeiten
Möchten Sie AI-Systeme aufbauen, Arbeitsabläufe automatisieren oder Ihre technische Infrastruktur skalieren? I'd love to help.
- Fiverr (benutzerdefinierte Builds und Integrationen): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (Unternehmenslösungen): ramlit.com
- ColorPark (Design & Branding): colorpark.io
- xCyberSecurity (Sicherheitsdienste): xcybersecurity.io
