Warum Claude standardmäßig generisches Design liefert, die 5 Fähigkeiten, die das in der Praxis beheben, und die Schritt-für-Schritt-Anleitung, um dein eigenes zu erstellen, wenn keines zu deiner Marke passt.
Du erkennst es sofort. Lila Farbverlauf auf weißem Hintergrund, Inter-Schriftart, weicher Schatten auf der Karte, ein verlorenes Emoji mitten im Abschnitt. Du siehst es und denkst: Das hat Claude gemacht.
Es ist nicht die Schuld des Modells. Es ist sein Standardverhalten.
Wenn du darum bittest, "eine Landingpage zu erstellen", ohne weitere Anweisungen, sucht das Modell nicht nach der interessantesten Wahl. Es sucht die wahrscheinlichste. Und die wahrscheinlichste Wahl ist der Durchschnitt von allem, was es während des Trainings gesehen hat: Millionen von sicheren, generischen, vergessbaren Seiten. Das Ergebnis ist Design, das nach KI-Design aussieht, weil es buchstäblich das statistische Zentrum dessen ist, was im Web existiert.
Anthropic hat dafür einen Namen, sie nennen es distributional convergence. In der Praxis bedeutet es eines: Ohne Richtung verfällt Claude immer ins Gewöhnliche.
Eine Fähigkeit (Skill) ist, wie du es da herausholst.
Was ist ein Skill, kurz erklärt
Stell dir eine Markdown-Textdatei vor, die Claude liest, bevor es mit der Arbeit beginnt. Anstatt deine Präferenzen, dein Designsystem und deinen Ton in jedem Prompt zu wiederholen, schreibst du es einmal und es wird automatisch geladen. Es ist eine Stellenbeschreibung, die du übergibst, bevor du die Aufgabe stellst.
Der Unterschied in der Ausgabe ist enorm. Gleicher Prompt, gleicher Claude, aber mit dem richtigen geladenen Skill wird er von einem generischen Designer zu einem Mitarbeiter, der deine Arbeit kennt.
Ich habe einige davon getestet, mit Vorher-Nachher-Vergleichen beim gleichen Prompt, um zu sehen, was wirklich den Unterschied macht. Wir können 5 identifizieren, die die Nadel für Webdesign wirklich bewegen.
1. Frontend Design (der offizielle von Anthropic)
Dies ist der beliebteste im Ökosystem, und das aus gutem Grund: Er wurde von Anthropic selbst veröffentlicht. Er hat über 277.000 Installationen.
Das Geheimnis liegt nicht darin, Claude beizubringen, schön zu zeichnen; es lehrt ihn, was er nicht tun soll. Die Datei listet explizit die Klischees auf, die es zu vermeiden gilt: überstrapazierte Schriftarten, die üblichen Farbschemata, diese Karten-Schattenstruktur, die jeder erkennt. Es ist eine kurze Lektion in gutem Geschmack, die dem Modell eingebaut wird.
Im Vorher-Nachher-Test wird das offensichtlich. Dieselbe Landingpage, die mit einem lila Farbverlauf und Emoji herauskam, verwandelt sich in etwas Redaktionelles, mit einer eleganten Kombination aus Serif und sauberer Sans-Serif, Scroll-Fade-Animationen und durchdachten Hover-Zuständen. Alles aus nur einem Prompt.
Wann verwenden: Immer wenn du ein Projekt von Grund auf neu startest und beim ersten Versuch dem Standard entkommen willst. Es ist deine Basis.
Und es bindet dich nicht an seinen Stil. Wenn du den Rest der Regeln, aber nur serifenlose Schriftarten haben möchtest, bearbeite einfach das Markdown und sag ihm: "Verwende nur Geist, Google Sans oder DM Sans." Claude passt die Datei an.
2. Impeccable (der Werkzeugkasten)
Erstellt von Paul Bakaus, wurde dies schnell zu einem Favoriten der Community und erreichte in kurzer Zeit über 45,9k Sterne auf GitHub. Und es ist leicht zu sehen, warum.
Das Coole daran sind die Befehle. Es gibt das reine /impeccable, aber es kommt mit etwa 20 Unterbefehlen, die du je nach Kontext aufrufst:
- /impeccable animate fügt Einführungsanimationen und Bewegung kohärent hinzu, und zwar so, dass es für die Seite sinnvoll ist
- /impeccable quieter führt eine "Rauschen"-Prüfung des Designs durch (zu viele Farbverläufe, fette Schriftstärke bei jeder Überschrift, verstreute Emojis) und entfernt den Überschuss, bringt Eleganz statt Geschrei
- /impeccable audit führt eine Qualitäts- und Zugänglichkeitsprüfung durch
- /impeccable document generiert eine design.md, die dein gesamtes Designsystem für jeden Agenten erfasst, der sie später liest
Darunter liegen 46 deterministische Regeln zur Slop-Erkennung – solche, die laufen, ohne dass das Modell raten muss. Es erkennt KI-generierte Muster präzise.
Wann verwenden: Um das zu iterieren, was du bereits hast. Eine Seite fertig und willst die Übertreibung zähmen? quieter. Fehlt Leben? animate. In zwei Prompts ändert die Seite ihr Niveau.
Detail, das über das Werkzeug hinausgeht: Impeccable hat einen "Slop"-Reiter, der die Muster zeigt, die es der KI beibringt zu vermeiden. Sieh dir diese Liste selbst an. Zu lernen, dass ein Akzentrand an der Seite einer Karte zu einem KI-Klischee geworden ist, lässt dich auch manuell besser designen.
3. UIUX Pro Max (der, der Claude zum Denken zwingt)
Dies ist eine Design-Datenbank auf Steroiden und der am meisten mit Sternen versehene auf der Liste: Er hat über 105k Sterne auf GitHub. Es gibt 67 UI-Stile, 161 Farbpaletten, 57 Schriftpaare, 99 UX-Richtlinien und 16 Tech-Stacks, damit er weiß, wie er in jedem Framework implementiert.
Der Sinn ist nicht, dir schnell Code zu liefern; es ist das Gegenteil. Es zwingt Claude, zu argumentieren, bevor es eine einzige Zeile schreibt. Es führt dein Layout durch eine Suche in fünf Bereichen parallel (Produkt, Stil, Farbe, Landing, Typografie), wendet Argumentationsregeln an und gibt erst dann ein vollständiges Designsystem zurück, mit bereits markierten Anti-Patterns, die es zu vermeiden gilt.
https://x.com/nett0eth/status/2073490435066982554
Das Ergebnis sind durchdachte Abschnitte, nicht dekorative. Im Test machte es Dinge wie einen Hell-Dunkel-Übergang direkt im KPI-Block, speziell um die Zahl hervorzuheben, die herausstechen muss. Es ist die Art von Entscheidung, die man von einem Menschen erwartet, nicht von einem Generator.
Wann verwenden: Wenn du Klarheit über den Inhalt hast und Designtiefe möchtest. Und ein Tipp, der Gold wert ist: Je spezifischer du bist, was du in jedem Abschnitt willst, desto besser. Ein Skill liest nicht deine Gedanken; er verstärkt deine Richtung. "Benutze den Skill und mache ein drastischeres Redesign, erkunde die Paletten und Schriftpaare" zu senden, ändert komplett, was zurückkommt.
4. Web Design Guidelines (der Auditor, von Vercel Labs)
Dieser ist für das Ende des Projekts, nicht für den Anfang. Er kommt von Vercel Labs, hat 29k Sterne auf GitHub und prüft deinen Code gegen Vercels Liste der Weboberflächenrichtlinien, über 100 Regeln: Tastaturfokus funktioniert, Zoom niemals deaktivieren, Einfügen nicht blockieren, Ladeanzeige auf Schaltflächen, Überschriftenhierarchie, ARIA und so weiter.
Und er hat einen Trick, den ich mag: Du kannst Claude bitten, Probleme direkt auf dem Vorschaubildschirm zu markieren. Anstatt eine Liste zu lesen, siehst du auf der Seite, in Orange, wo ein aria-label fehlt, wo die Tastaturnavigation unterbrochen wird, wo der CTA keinen Fokus hat. Es wird visuell.
Wann verwenden: Wenn das Design schon gut ist und du sicherstellen willst, dass es zugänglich ist und niemanden in Verlegenheit bringt, der eine Tastatur oder einen Screenreader benutzt. Es ist die Qualitätssicherung vor dem Livegang.
5. Astryx (das agentenbereite Designsystem, von Meta)
https://x.com/nett0eth/status/2073826299789889884
Der fünfte ist in einer anderen Kategorie: Es ist kein Geschmacksskill, es ist ein gesamtes Designsystem. Die 4 oben lehren Claude, besser zu designen, Bildschirm für Bildschirm. Meta setzte auf den entgegengesetzten Weg und öffnete Astryx, das Designsystem, das 8 Jahre intern gewachsen ist, das größte und am häufigsten genutzte im Unternehmen wurde und in über 13.000 Apps läuft. Jetzt ist es Open Source und, das Detail, das hier zählt, agentenbereit.
Der Haken ist: Anstatt zu hoffen, dass das Modell für jede Komponente gesunden Menschenverstand hat, gibst du ihm ein System, in dem alles bereits zugänglich und konsistent geboren ist. Es gibt über 150 Komponenten, 7 vorgefertigte Themes, einen Dark Mode und eine CLI, die sowohl die Person als auch der Agent auf die gleiche Weise nutzen, indem sie dasselbe Dokument lesen. Es gibt sogar eine CLAUDE.md im Repository, damit Claude das Haus versteht, bevor es die erste Zeile schreibt.
Es läuft auf React und StyleX, ist in der Beta-Phase und hat bereits 8,2k Sterne.
Wann verwenden: Wenn du Systemkonsistenz willst, nicht nur einen hübschen Bildschirm. Skills verfeinern den Geschmack des Modells; Astryx stellt sicher, dass das Fundament bereits vor jedem Prompt solide ist. Beide ergänzen sich.
Wo findest du weitere Skills
Diese 5 decken etwa 90% dessen ab, was ein Webdesigner in Claude macht. Aber wenn du erkunden möchtest, gibt es gute Verzeichnisse:
- UI Skills konzentriert sich auf Design-Ingenieure, ist aber auch für Webdesign geeignet. Es listet mehrere dieser 4 auf und hat Zugänglichkeits- und Shadcn-Dinge.
- Type UI ist mein Favorit für diejenigen, die zuerst visuell denken. Du scrollst und siehst eine Vorschau jeder Ästhetik (minimalistisch, Neo-Brutalismus, anspruchsvolles Corporate) und rufst die gewünschte auf, ohne einen Absatz Anweisung zu schreiben.
- MCP Market ist ein großes Community-Repository; gehe zu Agent Skills > Categories > Design Tools und es gibt eine endlose Liste.
- skills.sh ist der Ort, an dem Vercel und andere offiziell veröffentlichen – gut, um es direkt von der Quelle zu bekommen.
Wie du deinen eigenen Skill erstellst
Wenn keines zu 100% zu deiner Marke oder deinem Stack passt. Dann erstellst du deinen eigenen.
In der Claude App oder Claude Code, gehe zu Customize > Skills > Create Skill > Create with Claude. Es beginnt damit, dich zu fragen, was der Skill tun soll.
Der Teil, der einen nützlichen Skill von einem nutzlosen unterscheidet, ist, wie spezifisch du hier bist. Anstatt "mache schönes Design", gib Argumentationsregeln. Zum Beispiel:
- Identifiziere zuerst immer den Produkttyp (Dashboard, Landing, App), weil sich das Design mit dem Kontext ändert.
- Leite das Ziel des Bildschirms immer ab, bevor du zeichnest: Welche Aktion ist am wichtigsten und was sollte der Benutzer zuerst bemerken.
- Verwende standardmäßig eine zurückhaltende Palette, neutraleren Hintergrund und Oberfläche.
- Eine primäre Körpertextschriftart und, falls nötig, eine Auszeichnungsschriftart für große Überschriften.
Claude beginnt ein Gespräch und fragt nach deinem Stack (z. B. Tailwind-Tokens), deinen Abstandsproportionen, deinen Layouteinschränkungen. Sei detailliert; das macht den Skill wertvoll. Am Ende verpackt es alles in eine .md mit Referenzordnern, und du greifst über deinen eigenen Slash-Befehl darauf zu.
Aber den Skill zu erstellen, ist der einfache Teil. Der schwierige Teil ist sicherzustellen, dass er in der nächsten Sitzung nicht kaputt geht, und hier kommt die Achse ins Spiel, die viele überspringen. Ich habe Matt Pococks 8-Schritte-Framework zum Schreiben von Skills, die sich selbst erhalten (Trigger, Struktur, Richtung, Beschneidung), bereits in einem separaten Artikel aufgeschlüsselt, und es ist mehr wert als jeder Design-Skill, den du installierst:
https://x.com/nett0eth/status/2075976597513830727
Es lohnt sich, beides zusammen zu lesen; es ist die gleiche Denkweise "dem Modell das richtige Lineal geben", eine Ebene darüber angewandt. Anthropics offizieller Leitfaden, The Complete Guide to Building Skills for Claude, beschreibt auch die Prinzipien.
Was bleibt
Claude ist standardmäßig kein beeindruckender Designer. Das ist für niemanden neu, der nach einer Landingpage gefragt und den üblichen lila Farbverlauf bekommen hat.
Ein Skill ist, wie du diese Lücke schließt. Nicht, weil das Modell schlauer geworden ist, sondern weil du ihm das Lineal gegeben hast, das ein echter Designer im Kopf hat. Das Modell ist weniger wichtig als die Schleife, die du darum herum baust.
Konfiguriere es einmal. Der Sprung in der Ausgabe ist groß genug, dass du nicht mehr ohne arbeiten willst.
Die Frage bleibt: Wie viele deiner Projekte kommen immer noch mit dem üblichen lila Farbverlauf heraus, nur weil du nie einen Skill geladen hast, bevor du gefragt hast? Speichern und teilen 👍
Quellen / Links:
- Frontend Design (Anthropic)
- Impeccable (Paul Bakaus)
- Web Design Guidelines (Vercel Labs)
- UIUX Pro Max
- Astryx (agentenbereites Designsystem, von Meta)
- The Complete Guide to Building Skills for Claude
- Mein letzter Artikel (8-Schritte-Framework zum Erstellen von Skills):
