Design-Schule für Claude: so bringst du ihm Geschmack bei

So arbeitest du mit diesem Heft

Ich bin in diesem Heft dein Tutor. Du musst nichts programmieren können. Jede Lektion hat dasselbe Muster: erst verstehen, dann ausprobieren, dann merken.

Dein Lernziel: Am Ende baust du mit Claude eine Seite, die nach deiner Marke aussieht und nicht nach KI, und du weißt, welcher Skill wann dran ist.

Lektion 0: Was die Suchdaten verraten

Bevor wir loslegen, ein Blick auf die Nachfrage. Ich habe die Themen mit DataForSEO ausgewertet: Google-Suchvolumen pro Monat, Durchschnitt der letzten zwölf Monate, Stand 31.10.2026.

Was das für dich heißt:

• Design mit Claude ist gerade das Thema. „claude design“ ist in zwölf Monaten von fast null auf über 33.000 Suchen im Monat in Deutschland gewachsen.
• Die Leute fragen vor allem nach dem Wie. Die häufigsten Fragen: Wie installiere ich Skills, wie nutze ich sie, welche sind die besten, und „Impeccable oder Taste Skill?“. Genau das beantwortet dieses Heft.
• „AI Slop“ ist ein feststehender Begriff. Mehr als 60.000 Suchen pro Monat in den USA zeigen: Der austauschbare KI-Look fällt den Leuten auf. Wer ihn vermeidet, sticht heraus.

Lektion 1: Grundlagen

Was ist ein Skill?

Ein Skill ist eine Anleitung in einem Ordner, meist eine Datei SKILL.md, oft mit Skripten und Nachschlagewerken. Claude liest zuerst nur den Namen und eine kurze Beschreibung. Den ganzen Inhalt lädt er erst, wenn die Aufgabe passt oder du ihn mit /name aufrufst.

Wichtig zu wissen: Laut den offiziellen Claude-Code-Docs hat die Liste aller Skill-Beschreibungen ein festes Budget von 1 % des Kontextfensters. Installierst du sehr viele Skills, streicht Claude Code Beschreibungen, zuerst bei denen, die du selten nutzt. Dann findet Claude den passenden Skill schlechter. Mit /skill-doctor siehst du, welche Skills du nie benutzt.

Warum baut Claude den KI-Look?

Ohne Vorgaben nimmt ein Sprachmodell den Durchschnitt aller Seiten, die es kennt. Das Impeccable-README nennt die typischen Muster beim Namen:

• Inter als Schrift für alles
• Lila-blaue Farbverläufe
• Karten in Karten
• Graue Schrift auf farbigem Grund
• Ein abgerundetes Icon-Kästchen über jeder Überschrift

Das Modell: vier Rollen

Merk dir dieses Bild, es trägt den ganzen Kurs: Vorgaben → Bauen → Bewegung → Prüfen. Für jede Rolle gibt es einen Skill, und pro Aufgabe sitzt immer nur einer am Steuer.

Kurz-Check: Kannst du die vier Rollen aus dem Kopf aufzählen? Dann weiter.

Lektion 2: UI UX Pro Max, die Vorgaben

Was es ist: eine durchsuchbare Design-Datenbank für Claude, von Next Level Builder. Laut README: 79 UI-Stile, 192 Farbpaletten, 74 Schriftpaare, 25 Diagrammtypen, 119 UX-Regeln, 22 Technik-Stacks und 192 Branchenregeln. Rund 143.000 Sterne auf GitHub.

So arbeitet es: Claude ruft ein kleines Suchskript auf. Für eine neue Seite erstellt es ein komplettes Designsystem. Auf Wunsch speichert es dieses dauerhaft als design-system/<projekt>/MASTER.md. Ausnahmen für einzelne Seiten liegen in design-system/<projekt>/pages/.

Installieren:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Top 10 Anwendungsfälle

Ausprobieren

Nutze UI UX Pro Max und erstelle ein Designsystem für [Branche, z. B. Bäckerei in Hamburg]. Zielgruppe: [wer]. Speichere es dauerhaft im Projekt und zeig mir Farben und Schriften, bevor du weitermachst.

Merksatz: Erst Regeln, dann bauen. Wer ohne Vorgaben baut, bekommt den Durchschnitt.

Lektion 3: Taste Skill, das Bauen

Was es ist: ein Skill, der Claude eine Art-Direction gibt, von Leon Lin. Gebaut aus einer Studie von 247 Websites (Awwwards Sites of the Day und One Page Love). Rund 106.000 Sterne auf GitHub.

So arbeitet es: Claude liest den Auftrag. Ein Skript teilt drei von 20 recherchierten Richtungen aus, Claude wählt eine. Dann findet er eine Idee in einem Satz, baut mit echten Bildern aus offenen Archiven (mit Quellenangabe), prüft die Seite in einem echten Browser in drei Breiten und behebt in bis zu drei Runden die drei größten Probleme.

Was du wissen musst: Laut README dauert ein Durchlauf 30 bis 45 Minuten und kostet ein paar hunderttausend Tokens. Du brauchst Node 22 oder neuer und Chrome, Edge oder Chromium.

Installieren:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Top 10 Anwendungsfälle

Ausprobieren

Nutze Taste Skill und bau eine Landingpage für [Projekt]. Halte dich an das Designsystem im Projekt und an die Referenzen [Image #1] und [Image #2]. Nutze nur echte Inhalte: [Fakten, Preise, Öffnungszeiten]. Erfinde keine Zahlen und keine Kundenstimmen.

Merksatz: Ein Skill baut. Zwei Bau-Skills an derselben Seite ziehen in verschiedene Richtungen.

Lektion 4: Skills von Emil Kowalski, die Bewegung

Was es ist: eine Sammlung von Skills für Animationen und Interface-Details, von Emil Kowalski. Laut seinem README beruhen sie auf seiner Erfahrung bei Vercel und Linear. Rund 52.000 Sterne auf GitHub.

Warum das wichtig ist: Agenten wählen laut README oft die falsche Kurve, zum Beispiel ease-in für etwas, das ins Bild kommt. Richtig ist dort ease-out: schnell rein, sanft abbremsen. Solche Kleinigkeiten summieren sich und entscheiden, ob eine Seite hochwertig wirkt.

Installieren:

npx skills@latest add emilkowalski/skills

Top 10 Anwendungsfälle

Außerdem im Paket: apple-design (Apples Gestaltungsprinzipien fürs Web), pick-ui-library (bewährte Bibliotheken statt selbstgebauter Lösungen) und animate-expo (React Native).

Merksatz: Was ins Bild kommt, bekommt ease-out. Und nicht alles muss sich bewegen.

Lektion 5: Impeccable, das Prüfen

Was es ist: „The design vocabulary for your coding agent“, von Paul Bakaus, laut seinem GitHub-Profil Erfinder von jQuery UI. Impeccable bringt 24 Befehle und einen Slop-Detektor mit 62 festen Regeln mit, der ohne KI und ohne API-Key läuft. Rund 97.000 Sterne auf GitHub.

Installieren:

npx impeccable install

Danach dein Tool neu laden und einmal /impeccable init ausführen. Das Installationsprogramm bietet einen Design-Hook an, der jede Datei prüft, die Claude ändert. Nimm ihn an.

Top 10 Anwendungsfälle

Tipp aus dem README: Nimm dir ein Bauteil vor, nicht die ganze Seite. /impeccable critique the pricing cards liefert bessere Ergebnisse als ein Blick auf alles.

Merksatz: Impeccable hat das letzte Wort, bevor etwas online geht.

Lektion 6: Kombinationen, die funktionieren

Jetzt setzen wir die Rollen zusammen. Jeder Ablauf ist so geschrieben, dass du ihn direkt übernehmen kannst.

Ablauf A: Neue Landingpage

1. Drei Screenshots von Seiten, die dir gefallen, in Claude Code ziehen oder mit Strg+V einfügen. Sie erscheinen als [Image #1], [Image #2].
2. UI UX Pro Max erstellt das Designsystem und speichert es als MASTER.md.
3. Taste Skill baut zuerst nur den oberen Bereich der Seite.
4. /impeccable critique auf diesen Bereich, die ersten drei Punkte beheben.
5. Taste Skill baut den Rest, Emils review-animations prüft die Bewegung.
6. Zum Schluss /impeccable audit und /impeccable polish.

Ablauf B: Bestehende Seite sieht nach KI aus

1. npx impeccable detect https://deine-seite.de zeigt, welche Muster gefunden werden.
2. /impeccable critique sortiert die Probleme.
3. Gezielt beheben: typeset für Schrift, colorize für Farbe, distill gegen Überladung.
4. Taste Skill nur, wenn die ganze Seite neu soll, dann im Redesign-Modus mit Vorher-Nachher-Vergleich.

Ablauf C: Dashboard oder App-Bereich

1. UI UX Pro Max mit hoher Dichte und einer Diagramm-Empfehlung.
2. Taste Skill im App-Lauf baut die Oberfläche.
3. Emils break-ui testet mit Extremdaten, mobile-native kümmert sich um die Handy-Ansicht.
4. /impeccable audit vor dem Livegang.

Ablauf D: Feste Firmenfarben

1. /impeccable document hält dein bestehendes Design in DESIGN.md fest.
2. Taste Skill mit --keep palette,type: deine Farben und Schriften bleiben, nur der Aufbau wird neu.
3. Impeccable prüft. Ist zum Beispiel Inter deine Markenschrift, gib sie frei: npx impeccable ignores add-value overused-font Inter --reason "Markenschrift".

Ablauf E: Agentur mit mehreren Kunden

1. Pro Kunde ein Projektordner mit eigener MASTER.md (UI UX Pro Max) oder DESIGN.md (Impeccable).
2. Immer derselbe Bau-Skill, damit die Qualität vergleichbar bleibt.
3. npx impeccable detect --github in der Pipeline: Jede Änderung wird automatisch geprüft.

Ablauf F: Animationen nachrüsten

1. find-animation-opportunities zeigt, wo Bewegung hilft.
2. animate baut sie mit der richtigen Kurve.
3. remove-animations und animation-performance räumen auf.

Diese Kombinationen besser nicht

So stellst du ein, dass nur einer baut: Ruf den Bau-Skill beim Namen auf („Nutze Taste Skill für …“). Selten genutzte Skills stellst du in den Claude-Code-Einstellungen mit skillOverrides auf "user-invocable-only". Dann startet Claude sie nur, wenn du /name tippst.

Guide: Deine erste Seite in 60 Minuten

Prompts zum Kopieren

Referenzen auswerten:

Schau dir [Image #1] und [Image #2] an. Beschreib in 5 Punkten, was diese Seiten gut machen (Schrift, Farben, Abstände, Bilder, Aufbau). Bau noch nichts, ich will erst deine Analyse sehen.

Designsystem für die Branche:

Nutze UI UX Pro Max und erstelle ein Designsystem für [Branche]. Zielgruppe: [wer]. Stil: [ruhig / mutig]. Speichere es dauerhaft im Projekt und zeig mir Farben und Schriften, bevor du weitermachst.

Nur den oberen Bereich bauen:

Nutze Taste Skill und bau nur den oberen Bereich der Startseite für [Projekt]. Halte dich an das Designsystem und an [Image #1]. Zeig mir das Ergebnis im Browser, bevor du den Rest baust.

Feste Firmenfarben:

Unsere Marke nutzt nur diese Farben: [Hex-Werte] und diese Schriften: [Namen]. Ändere daran nichts. Gestalte nur Aufbau, Bilder und Abstände neu.

Animationen prüfen:

Prüfe alle Animationen auf dieser Seite mit den Skills von Emil Kowalski. Liste, was zu langsam, zu viel oder mit der falschen Kurve animiert ist, und schlag Korrekturen vor.

Mit echten Daten testen:

Nutze break-ui und teste diese Seite mit extremen Daten: sehr lange Namen, leere Listen, sehr große Zahlen. Zeig mir, was kaputtgeht.

Ehrliche Kritik:

/impeccable critique die Startseite

Typische Fehler und Lösungen

Alternativen, wenn einer nicht passt

Grenzen und Risiken

• Fremde Designs nicht kopieren. Screenshots sind Inspiration. Eine fremde Seite oder Marke 1:1 nachzubauen, kann Marken- und Urheberrecht verletzen. Für Logos, Bilder und Texte anderer bist du selbst verantwortlich.
• Bildrechte prüfen. Taste Skill nutzt Bilder aus offenen Archiven und setzt die Quellen auf die Seite. Lass diese Angaben stehen oder ersetze die Bilder durch eigene.
• Fremden Code bewusst installieren. Jeder Skill ist Code oder Anleitung von jemand anderem. Schau ins Repo, bevor du installierst, besonders bei Hooks, die automatisch laufen.
• Sterne sind kein Qualitätsbeweis. Es gibt keinen unabhängigen Vergleichstest. Sterne zeigen Aufmerksamkeit, nicht Eignung für dein Projekt.
• Erfundene Inhalte. Bau-Skills können Funktionen oder Zahlen dazudichten. Lies alles gegen, bevor die Seite online geht.

Lernkontrolle

Beantworte die Fragen, bevor du die Lösung liest.

1. In welcher Reihenfolge arbeiten die vier Rollen? Lösung: Vorgaben, Bauen, Bewegung, Prüfen.
2. Warum nicht zwei Bau-Skills gleichzeitig? Lösung: Ihre Regeln überschneiden sich und widersprechen sich teils, jeder zieht in seine Richtung.
3. Welche Kurve bekommt ein Element, das ins Bild kommt? Lösung: ease-out.
4. Wo speichert UI UX Pro Max dein Designsystem? Lösung: in design-system/<projekt>/MASTER.md.
5. Was zeigt dir /skill-doctor? Lösung: welche Skills du nie benutzt und was sie an Kontext kosten.

• Ich kenne die vier Rollen und ihre Skills
• Ich habe die vier Skills installiert
• Ich habe ein Designsystem für meine Branche erstellt
• Ich habe einen Abschnitt mit Taste Skill gebaut
• Ich habe ihn mit Impeccable geprüft und verbessert
• Ich habe die Animationen mit Emils Skills geprüft

Mein Tipp

Fang klein an: ein Abschnitt, drei Screenshots, feste Farben. Wenn der obere Bereich gut aussieht, baut der Rest darauf auf. Und lass Impeccable immer das letzte Wort haben, bevor etwas online geht.

Alle Links, Befehle und Zahlen am 31.10.2026 in den Repos und auf den offiziellen Seiten geprüft. Suchvolumen: DataForSEO (Google-Ads-Daten), Monatsdurchschnitt der letzten zwölf Monate.