Die Design-Kette für Claude Code

Bitte Claude Code um eine Landingpage, und du bekommst fast immer dieselbe Seite: eine mittige Überschrift, ein kleines Etikett darüber, drei Karten mit Symbolen, ein weicher Farbverlauf. Nichts daran ist falsch. Es wurde nur nichts entschieden. Genau das sieht man einer Seite an, und genau daran erkennen Besucher, dass eine KI sie gebaut hat.

Gegen diesen Einheitslook gibt es inzwischen gute, kostenlose Design-Skills. Die meisten Listen im Netz zählen sie einfach auf. Wer sie alle gleichzeitig lädt, merkt schnell das Problem: Die Skills widersprechen sich. Der eine will mehr Mut, der andere mehr Ruhe, der dritte poliert Knöpfe, bevor überhaupt feststeht, welche Farbe sie haben.

Die Skills hat jeder. Den Unterschied macht die Reihenfolge.

Was ist die Design-Kette?

Die Design-Kette ist eine feste Reihenfolge von sieben Schritten, in der Claude Code eine Webseite gestaltet und prüft. Jeder Schritt arbeitet mit dem, was der vorige festgelegt hat, und keiner macht die Arbeit eines anderen zunichte. Unser Web-Team geht diese Kette bei jeder neuen Seite und bei jeder Nachbesserung, auch bei kleinen Korrekturen.

1. 1web-design-dev: dein eigenes Hauswissen aus den letzten Projekten
2. 2taste-skill: die Haltung, also wie mutig, ruhig oder dicht die Seite wird, und was verboten ist
3. 3ui-ux-pro-max: das System mit Farben, Schriften, Mustern und Barrierefreiheit
4. 4impeccable, danach impeccable critique als Prüfung: das Handwerk an den Bausteinen
5. 5emil-design-eng: die Bewegung, also Kurven, Dauern und Federn
6. 6Lenis und die GSAP-Skills: das Scrollen und alles, was am Scrollen hängt
7. 7apple-design und danach ein Durchgang von Hand nach Apples Gestaltungsregeln

Danach kommt die Abnahme auf vier Bildschirmbreiten. Erst dann gilt eine Seite als fertig. Die Checkliste dazu steht weiter unten.

Warum ist die Reihenfolge so wichtig?

Weil jede Entscheidung eine Ebene tiefer auf der vorigen aufbaut. Erst fällt die Haltung, dann das System, dann die Bausteine, dann die Bewegung. Andersherum polierst du ins Blaue: Du stimmst die Schatten eines Knopfes ab und stellst danach fest, dass das System gar keine Schatten vorsieht. Dann baust du zweimal.

Ein Bild aus dem Hausbau hilft: Niemand streicht die Wände, bevor die Grundrisse stehen. Die Regler von taste-skill sind der Grundriss, ui-ux-pro-max ist die Statik, impeccable ist der Innenausbau, und die Bewegung ist das Licht, das am Ende alles in Szene setzt.

Bevor du startest: was du brauchst

• Claude Code auf deinem Rechner (wie das geht, steht im Guide „Claude Code für Einsteiger“, Link unten).
• Ein Projekt, an dem Claude arbeiten darf, am besten in Git, damit jeder Schritt rückgängig zu machen ist.
• Node.js für die npx-Befehle und Python 3 für das Skript von ui-ux-pro-max.
• Dein Corporate Design, falls es eins gibt: Farben, Schriften, Logo. Es ist die Leitplanke für alle Schritte.

Optional vor dem Start: das Design einer Referenz auslesen

Bei einem Relaunch oder einer Inspiration lohnt ein Schritt vor der Kette: designlang liest Farben, Schriften, Abstände und Bewegungen einer öffentlichen Seite direkt aus dem Browser aus. So arbeitest du mit den echten Werten statt mit geschätzten.

npx designlang@13.3.2 https://deine-alte-seite.de

Drei Auflagen, an die wir uns halten: die Version festschreiben statt immer die neueste zu ziehen, die Option --smart weglassen (sie schickt Daten an ein Sprachmodell) und nur öffentliche Seiten auslesen.

Erst das Hauswissen: web-design-dev

Was er tut: web-design-dev ist unser eigener Skill und nicht öffentlich. Er enthält alles, was wir aus früheren Webseiten gelernt haben: die feste Reihenfolge der Kette, unsere Markenfarben und Schriften, die Liste der KI-Erkennungszeichen, die wir nie wieder sehen wollen, und Fehler, die uns schon einmal Zeit gekostet haben. Nach jeder Korrektur kommt eine neue Lehre dazu.

Warum zuerst: Die öffentlichen Skills kennen dein Haus nicht. Wer zuerst die eigenen Regeln lädt, verhindert, dass ein generischer Skill sie überstimmt.

So legst du deinen eigenen an: Ein Skill ist ein Ordner mit einer Datei SKILL.md unter ~/.claude/skills/. Oben stehen Name und eine Beschreibung, wann Claude ihn nutzen soll. Darunter schreibst du deine Regeln in klaren Sätzen. Diese fünf Abschnitte haben sich bei uns bewährt:

• Der Ablauf: die Kette in deiner Reihenfolge, mit dem Hinweis, dass sie auch für Nachbesserungen gilt.
• Die Marke: Farben als Werte, Schriften, Abstände, ein Akzent, sparsam eingesetzt.
• Die Verbote: was nach KI aussieht und bei dir nie vorkommen darf, zum Beispiel Farbverläufe im Text oder drei gleiche Karten nebeneinander.
• Die Lehren: Fehler aus echten Projekten, je ein Satz mit der Regel, die daraus folgt.
• Die Abnahme: Breiten, Mindestgrößen und wer die Screenshots ansieht.

Lege unter ~/.claude/skills/web-hausregeln/SKILL.md einen Skill an. Frontmatter: name "web-hausregeln", description "Nutzen bei jeder Webseite und jeder Nachbesserung: unsere Design-Regeln". Abschnitte: 1. Ablauf (taste-skill, ui-ux-pro-max mit --design-system, impeccable plus critique, emil-design-eng, Lenis und GSAP, apple-design plus Durchgang von Hand, dann Abnahme bei 320/393/768/1440 Pixeln). 2. Marke: [deine Farben als Hex-Werte, deine Schriften]. 3. Verbote: [was du nie sehen willst]. 4. Lehren: zunächst leer, nach jeder Korrektur trägst du dort eine Zeile ein. 5. Abnahme. Zeig mir die Datei, bevor du sie speicherst.

Erledigt, wenn: Claude Code den Skill bei einer Web-Aufgabe von selbst lädt und deine Marke nennt, ohne dass du sie erwähnst. Typischer Fehler: den Skill einmal schreiben und nie ergänzen. Sein Wert wächst mit jeder Lehre.

Dann die Haltung: taste-skill

Was er tut: taste-skill (Repo Leonxlnx/taste-skill) legt fest, wie die Seite auftritt, bevor auch nur ein Abschnitt gebaut ist. Er verbietet die typischen Verlegenheitslösungen: kleine Etiketten über jeder Überschrift, Reihen gleicher Symbolkarten, Farbverläufe, Schatten auf ruhenden Flächen, eine Monospace-Schrift als Dekoration. Stattdessen verlangt er große Typografie, echte Bilder und eine Idee, die aus dem Thema selbst kommt.

Warum hier: Das sind Entscheidungen über das Layout. Sie müssen fallen, bevor es ein Layout gibt.

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

Die Hilfsskripte des Skills brauchen Node 22 und einen installierten Chrome oder Chromium. Starte sie bewusst, nicht nebenbei. Erledigt, wenn: du in einem Satz sagen kannst, welche Richtung die Seite nimmt und welche Muster verboten sind. Typischer Fehler: die Verbote abnicken und danach doch die gewohnte Heldenfläche mit mittiger Überschrift bauen.

Das System: ui-ux-pro-max

Was er tut: ui-ux-pro-max füllt den Rahmen mit einem Design-System: Farben, Schriftpaare, Muster, Effekte, Anti-Muster und eine Checkliste für die Barrierefreiheit. Kern ist ein Suchskript, das aus einer kurzen Beschreibung deines Projekts ein komplettes System vorschlägt.

Warum hier: Das System füllt die Grenzen, die taste-skill gezogen hat. Würde es vorher laufen, entstünde ein System für eine Seite, die es so nie geben soll.

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

# danach im Projekt, Beschreibung anpassen:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "Schreinerei Landingpage, warm, handwerklich" --design-system -p "Mein Projekt"

Den Pfad des Skripts kennt Claude selbst, du kannst auch einfach sagen: „Lass das Skript von ui-ux-pro-max mit --design-system laufen.“ Erledigt, wenn: das System schriftlich vorliegt und jede Abweichung von deinem Corporate Design begründet ist. Typischer Fehler: den Vorschlag eins zu eins übernehmen. Als wir das Skript für diesen Guide laufen ließen, schlug es Playfair Display, Inter und einen grünen Knopf vor. Unsere Marke sagt Bricolage Grotesque, Figtree und Gold. Die Marke gewinnt.

Das Handwerk: impeccable und impeccable critique

Was er tut: impeccable von Paul Bakaus arbeitet an den Bausteinen: Abstände, Hierarchie, Typografie, Zustände von Knöpfen und Feldern. Er bringt ein gemeinsames Vokabular mit, etwa polish, distill, bolder oder quieter. Mit critique prüft er danach die fertige Oberfläche wie ein strenger Kollege: Ist klar, was wichtig ist? Wo stolpert der Blick?

Warum hier: Feinschliff lohnt erst, wenn das System steht. Sonst polierst du zweimal.

# 1. Auf impeccable.style das ZIP für Claude Code laden
# 2. Die Skill-Ordner nach ~/.claude/skills/ kopieren
# 3. Danach in Claude Code:
/impeccable polish
/impeccable critique

Erledigt, wenn: die Kritik keine schweren Befunde mehr meldet und du die übrigen bewusst entschieden hast. Typischer Fehler: alle Unterbefehle hintereinander laufen lassen. Das sind Werkzeuge nach Symptom, keine Pflichtschritte. Wirkt die Seite zu laut, nimm quieter. Wirkt sie zu brav, nimm bolder.

Die Bewegung: emil-design-eng

Was er tut: emil-design-eng von Emil Kowalski kümmert sich um alles, was sich bewegt. Er weiß, welche Kurve ein Element beim Hereinkommen braucht, warum Animationen kurz sein sollen und warum man nur transform und opacity animiert. Wer fertige Übergänge für Menüs, Dialoge oder Aufklapper sucht, findet sie zusätzlich auf transitions.dev.

Warum hier: Bewegung wirkt auf das Gebaute. Solange die Bausteine nicht fertig sind, gibt es nichts, was sich sinnvoll bewegen könnte.

npx skills@latest add emilkowalski/skills

Das Paket enthält sechzehn Skills. Für die Kette brauchst du zwei: emil-design-eng hier und apple-design im letzten Schritt. Erledigt, wenn: jede Bewegung einen Zweck hat und die Seite mit ausgeschalteter Bewegung (prefers-reduced-motion) genauso vollständig ist. Typischer Fehler: alles einblenden lassen. Bewegung, die nichts erklärt, kostet nur Zeit.

Das Scrollen: Lenis und die GSAP-Skills

Was sie tun: Lenis von darkroom.engineering macht das Scrollen weich und gleichmäßig. Es ist eine Bibliothek, kein Skill. GSAP mit ScrollTrigger hängt Abläufe an den Scrollweg: Abschnitte, die stehen bleiben, Linien, die mitlaufen, Bilder mit Tiefe. Die offiziellen GSAP-Skills von GreenSock bringen Claude bei, GSAP richtig zu verwenden.

Warum hier und in dieser Reihenfolge: Lenis zuerst, weil alles andere am Scrollen hängt. Danach GSAP. Und nie GSAP und Framer Motion im selben Komponentenbaum mischen, sonst ziehen zwei Systeme an denselben Elementen.

npm i lenis@1.3.27

# GSAP-Skills in Claude Code:
/plugin marketplace add greensock/gsap-skills

GSAP ist laut README der GSAP-Skills (gelesen am 21.10.2026) seit der Übernahme durch Webflow komplett kostenlos, auch mit allen Plugins und für kommerzielle Projekte. Erledigt, wenn: das Scrollen sich auf Trackpad, Mausrad und Handy gleich anfühlt und keine Animation den Text verdeckt. Typischer Fehler: Scroll-Effekte auf eine Seite setzen, deren Inhalt das nicht trägt. Ein Effekt pro Seite, der eine Geschichte erzählt, schlägt zehn, die nur glänzen.

Der Schluss: apple-design und der Durchgang von Hand

Was er tut: apple-design aus demselben Paket wie emil-design-eng übersetzt Apples Gestaltungsregeln aus den WWDC-Vorträgen ins Web: Rückmeldung ohne Verzögerung, Bewegungen, die man jederzeit unterbrechen kann, Federn statt fester Dauern.

Warum zum Schluss: Dieser Schritt prüft das fertige Erlebnis aus Sicht des Menschen, der die Seite benutzt. Danach gehen wir die Seite selbst durch, mit diesen sieben Fragen:

• Benennt jede Beschriftung ihren Inhalt? „Details“ ist ein Sammelbegriff, „Ausführung & Verlauf“ sagt, was drin ist.
• Gibt es eine Tür statt zwei? Was zusammengehört, steht hinter einem Aufklapper, und die geschlossene Zeile trägt schon die wichtigste Zahl.
• Gibt es Attrappen? Was klickbar aussieht, muss etwas tun.
• Kommt die Rückmeldung beim Drücken, nicht erst beim Loslassen?
• Laufen greifbare Bewegungen als Federn und starten sie vom aktuellen Wert?
• Geht ein Element auf demselben Weg hinaus, auf dem es hereinkam?
• Werden reduzierte Bewegung, reduzierte Transparenz und erhöhter Kontrast bedient?

Erledigt, wenn: alle sieben Fragen mit Ja beantwortet sind. Typischer Fehler: diesen Schritt weglassen, weil die Seite schon gut aussieht. Gut aussehen und sich gut anfühlen sind zwei verschiedene Dinge.

Wann ist eine Seite wirklich fertig?

Wenn sie die Abnahme besteht und jemand die Screenshots selbst angesehen hat. Ein grüner Test sagt nur, dass nichts Verbotenes gemessen wurde. Ob die Seite gut ist, sieht man nur im Bild. Unsere Abnahme-Checkliste:

• Vier Breiten: 320, 393, 768 und 1440 Pixel. 320 ist ein iPhone mit eingeschaltetem Anzeigezoom, das gibt es öfter, als man denkt.
• Kein seitliches Scrollen auf keiner Breite.
• Keine Schrift unter 12 Pixeln, auch nicht in Grafiken.
• Jede Trefferfläche mindestens 44 Pixel.
• Die Konsole des Browsers zeigt keine Fehler.
• Jede Interaktion einmal durchgeklickt: Knöpfe, Formulare, Aufklapper, Kopier-Knöpfe.
• Jeden Screenshot selbst angesehen, nicht nur den ersten Bildschirm.

Beschriftungen in Karten, die nebeneinanderstehen, bleiben einzeilig und auf gleicher Höhe, notfalls mit einer Kurzform statt eines Umbruchs. Danach lassen wir eine unabhängige Prüfung durch einen eigenen Review-Agenten laufen und wägen seine Vorschläge gegen das ab, was der Kunde ausdrücklich will.

Vorher und nachher: drei Befunde von thezign.de

Die Kette ist kein Plan auf Papier. Diese drei Befunde stammen von unserer eigenen Website und sind gemessen, nicht geschätzt.

Die Seite, die nur aus Text bestand

Am 21.09.2026 haben wir unsere Produktseite gemessen: 542 Zeilen reiner Text, 0 Bilder, 0 Grafiken, 0 Farbverläufe. Nach dem Durchlauf durch die Kette zeigt eine Grafik die acht Abteilungen des Systems, und eine Linie läuft beim Scrollen mit. Die Abnahme fand dabei noch etwas: Die Beschriftungen der Grafik lagen auf dem Handy bei 9,2 Pixeln, unter unserer Grenze von 12. Jetzt sind es 12,3.

Die Blogbilder, die auf dem Handy die Hälfte verloren

Am 04.10.2026 haben wir den Blog bei 320 Pixeln Breite gemessen. Die Aufmacher-Karte war höher als breit und schnitt 61 % der Bildbreite ab, genau dort, wo die Überschrift im Bild stand. Nach der Umstellung auf ein festes Seitenverhältnis von 16:9 sind es 0 %. Ohne die Abnahme bei 320 Pixeln wäre das niemandem aufgefallen.

Der Abstand, der auf jeder Seite anders war

Am 17.10.2026 begann der erste Text bei 393 Pixeln Breite je nach Seite bis zu 379 Pixel unter dem oberen Rand. Ein gemeinsamer Wert für den Abstand oben bringt ihn jetzt auf allen Seiten auf 152 Pixel. Der Besucher sieht den Inhalt sofort, ohne zu scrollen.

Der Ketten-Prompt zum Kopieren

Dieser Prompt lässt Claude Code die ganze Kette in der richtigen Reihenfolge abarbeiten. Er funktioniert für eine neue Seite genauso wie für eine Nachbesserung. Setz deine Seite und dein Ziel ein.

Gestalte [Seite oder Abschnitt] für [Zielgruppe]. Ziel der Seite: [Anfrage, Termin oder Kauf]. Arbeite die Design-Kette in genau dieser Reihenfolge ab und lass keinen Schritt aus:

1. Lies zuerst meinen Hausregel-Skill und mein Corporate Design. Die Marke schlägt jede Skill-Regel.
2. taste-skill: Lege Richtung und Verbote fest, bevor du ein Layout baust. Nenne sie mir in drei Sätzen.
3. ui-ux-pro-max: Lass das Skript mit --design-system laufen und gleiche das Ergebnis mit meiner Marke ab. Begründe jede Abweichung.
4. impeccable: Arbeite die Bausteine innerhalb dieses Systems aus. Danach /impeccable critique und behebe die schweren Befunde.
5. emil-design-eng: Bewegung nur mit Zweck, nur transform und opacity, prefers-reduced-motion bedienen.
6. Lenis zuerst, dann GSAP mit den GSAP-Skills, nur wo der Inhalt es trägt. Nie GSAP und Framer Motion im selben Komponentenbaum.
7. apple-design und danach ein Durchgang von Hand: Beschriftungen benennen ihren Inhalt, eine Tür statt zwei, keine Attrappen, Rückmeldung beim Drücken, Federn statt fester Dauern, gleicher Weg hinein und hinaus. prefers-reduced-motion, prefers-reduced-transparency und prefers-contrast bedienen.

Abnahme: 320, 393, 768 und 1440 Pixel, kein seitliches Scrollen, Schrift mindestens 12 px, Trefferflächen mindestens 44 px, Konsole fehlerfrei, alle Interaktionen durchgeklickt. Sieh dir jeden Screenshot selbst an.

Bericht: Nenne je Schritt den Befund, also was du gefunden und was du geändert hast. Ein Schritt ohne Befund steht trotzdem im Bericht.

Der letzte Absatz ist der wichtigste. Wer je Schritt einen Befund verlangt, merkt sofort, wenn Claude einen Schritt nur behauptet hat.

Häufige Fragen zur Design-Kette

Brauche ich wirklich alle sieben Schritte?

Für eine neue Seite ja. Bei einer kleinen Korrektur gehen die Schritte schnell, weil das meiste schon entschieden ist. Ein Schritt ohne Befund steht trotzdem im Bericht. Genau daran siehst du, dass er gelaufen ist.

Kosten die Design-Skills etwas?

Nein. taste-skill, ui-ux-pro-max, die Skills von Emil Kowalski, Lenis und die GSAP-Skills stehen unter MIT-Lizenz, impeccable unter Apache-2.0. Du zahlst nur für Claude Code selbst.

Was mache ich, wenn zwei Skills sich widersprechen?

Dann gilt die Reihenfolge: Der frühere Schritt hat entschieden, der spätere arbeitet innerhalb dieser Entscheidung. Über allem stehen dein Corporate Design und die Barrierefreiheit.

Funktioniert die Kette auch mit Webflow, WordPress oder Shopify?

Ja, mit einer Einschränkung: Wenn die Seite auf einem Theme oder Template steht, nutzt Claude nur dessen vorhandene Bausteine und Einstellungen. Die Kette entscheidet dann, wie diese Bausteine eingesetzt werden, nicht, ob neue entstehen.

Warum ist web-design-dev nicht öffentlich?

Weil er unsere Marke, unsere Kunden und unsere Fehler enthält. Sein Wert liegt genau darin, dass er nur zu uns passt. Deinen eigenen legst du mit dem Prompt oben in ein paar Minuten an.