Warum eine bestehende Website mit Fähigkeiten verbessern?

Wenn Sie jemals eine Schnittstelle von einer KI generieren ließen, kennen Sie das Ergebnis. Inter-Schriftart, violetter bis blauer Farbverlauf, verschachtelte Karten, grauer Text auf farbigem Hintergrund, zentrierter Held und Glasmorphismus für einen modernen Look. Unabhängig vom Projekt wird überall die gleiche Website angezeigt.

Dieses Phänomen wird oft als AI Slop bezeichnet.

Das Problem ist nicht, dass die Modelle unfähig sind. Sie kennen sich mit Typografie, OKLCH-Kontrasten und vertikalen Rhythmen aus. Aber sie wenden sie nicht spontan an. Ihnen mangelt es an Führungsvokabular und einer klaren Liste, was man vermeiden sollte.

Fähigkeiten ändern das. Sie geben Claude Code spezielle Befehle zur Prüfung, Korrektur und Verfeinerung einer vorhandenen Schnittstelle, ohne bei Null anfangen zu müssen.

Voraussetzungen für den Einstieg

Bevor Sie beginnen, stellen Sie sicher, dass Sie über diese Artikel verfügen.

  • Ein aktives Claude Pro-Konto

  • Claude Code auf Ihrem Computer installiert

  • Ein Website-Projekt, das bereits auf Ihrem Computer vorhanden ist

Schritt-für-Schritt-Anleitung

Schritt 1: Öffnen Sie Claude Code in Ihrem Projektordner

Starten Sie Ihr Terminal, gehen Sie zum Stammverzeichnis des Projekts und geben Sie dann den Befehl claude ein, um die Sitzung zu starten.

Schritt 2: Installieren Sie den Design-Skill

Führen Sie in Ihrem Terminal den Befehl npx skills add pbakaus/impeccable aus.

Der Skill wird automatisch geladen. Sie erhalten 23 spezielle Steuerelemente, die alle Dimensionen des Designs steuern, wie Typografie, Farbe, Layout, Bewegung, Mikrointeraktionen und UX-Text.

Schritt 3: Definieren Sie den Kontext Ihres Projekts

Geben Sie in Claude Code den Befehl /impeccable Teach ein.

Der Skill stellt Ihnen eine Reihe strukturierter Fragen. Ziel ist es zu verstehen, an wen sich Ihre Website richtet, welchen Stil Sie übernehmen möchten und welche Ästhetik Sie ausdrücklich ablehnen.

Die Antworten werden in den Dateien PRODUCT.md und DESIGN.md im Stammverzeichnis des Projekts gespeichert. Diese Dateien werden bei jeder Bestellung erneut gelesen, sodass Sie niemals denselben Auftrag wiederholen müssen.

Schritt 4: Prüfen Sie die Site in ihrem aktuellen Zustand

Geben Sie den Befehl /impeccable audit ein. Sie können eine bestimmte Seite auch mit einem Befehl wie /impeccable audit Landing gezielt ansprechen.

Der Skill scannt Ihren Code, vergleicht ihn mit 25 dokumentierten Anti-Patterns und sendet Ihnen dann einen Bericht, der nach Schweregrad von P0 bis P3 bewertet ist. Es kann beispielsweise violette Farbverläufe, überstrapazierte Schriftarten, verschachtelte Karten, unzureichende Kontraste oder unterbrochene typografische Hierarchien melden.

Das ist die Diagnose. Von dort aus beginnt alles.

Schritt 5: Typografie und Layout korrigieren

Fahren Sie dann mit /impeccabletypeset und dann mit /impeccablelayout fort.

Der erste Befehl legt die typografische Hierarchie, Größen und vertikale Rhythmen fest. Außerdem werden beliebte Schriftarten vermieden, es sei denn, Ihre DESIGN.md-Datei rechtfertigt sie ausdrücklich.

Der zweite Befehl korrigiert Abstände, Ausrichtungen, Linienlängen und zu kleine anklickbare Bereiche.

Schritt 6: Bestätigen Sie die visuelle Richtung

Wählen Sie je nach gewünschtem Ergebnis den Befehl, der der Design-Geste entspricht.

  • /impeccable fetter, um einen Abschnitt durchsetzungsfähiger zu machen

  • Tadellos leiser, um einen lauten Bereich zu beruhigen

  • /impeccable colorize, um die Palette in OKLCH zu überarbeiten

  • /tadellose Freude, gerechtfertigte Mikrointeraktionen hinzuzufügen

Jeder Auftrag weiß, in welchem ​​Modus er arbeitet, Marke oder Produkt, und passt sein Vokabular entsprechend an. Eine Landingpage ist kein Dashboard.

Schritt 7: Werfen Sie den letzten Pass

Geben Sie den Befehl „/impeccable polnischen“ auf der Seite ein, die Sie liefern möchten.

Dieser Befehl gleicht Ihren Code mit vorhandenen Tokens ab, führt den Anti-Pattern-Detektor erneut aus und gibt Ihnen eine versandbereite Seite zurück.

Schritt 8: Testen Sie auf einer vorhandenen Seite

Öffnen Sie eine Datei Ihrer Website und bitten Sie Claude Code, die Seite mit tadellosem Geschick zu prüfen, die Anti-Patterns in P0 und P1 zu korrigieren, den letzten Schliff zu verleihen und dann im Markenmodus eine durchsetzungsfähigere Variante des Helden vorzuschlagen.

Gehen Sie mit KI und Design weiter

Dieser Leitfaden zeigt Ihnen, wie Sie mit Claudes Fähigkeiten eine generische Website in eine professionellere Benutzeroberfläche umwandeln. Um fortzufahren, können Sie dieselbe Methode auf Ihre vorhandenen Verkaufsseiten, Dashboards oder Produktbildschirme anwenden.

Lesen Sie weiter

Um dieses Thema mit einem konkreteren Geschäftsablauf in Verbindung zu bringen:

– KI-Agent für die Neukundengewinnung auf LinkedIn – um vom Kontext zur nächsten Aktion zu gelangen

– MCP Yadulink Documentation – um KI-Assistenten mit dem Yadulink-Kontext zu verbinden