Die besten Claude-Skills für Webdesign

Inzwischen haben alle zugesehen, wie Claude in vier Minuten eine Landingpage baut, und alle hatten denselben zweiten Gedanken: gut, aber sieht aus wie alle anderen. Großer mittiger Hero, weicher Farbverlauf dahinter, drei Feature-Kacheln, eine Zahlenreihe, dunkler Fuß. Technisch sauber. Und komplett vergessbar.

Skills sind die Lösung, und sie sind der am wenigsten genutzte Teil des Werkzeugkastens. Ein Skill ist ein Ordner mit Anweisungen, den das Modell lädt, sobald er relevant wird, und ein paar davon sind im Design wirklich gut. Das hier ist der ehrliche Überblick: welche Skills für Websites zählen, worin jeder stark ist und wo jeder dich hängen lässt. Wir bauen damit täglich Kundenseiten, die Kritik ist also aus erster Hand und keine Funktionsliste.

Was ein Claude-Skill ist, in einer Minute

Ein Agent Skill ist ein Verzeichnis mit einer Datei SKILL.md darin: oben etwas YAML, das sagt, was der Skill tut und wann man ihn nutzt, darunter die Anweisungen, dazu optional Referenzdateien und Skripte. Claude lädt das in Stufen. Name und Beschreibung sind immer im Kontext (grob 100 Tokens pro Skill), die Anweisungen kommen erst dazu, wenn eine Anfrage passt, und mitgelieferte Referenzdateien kosten gar nichts, solange sie niemand liest. Deshalb kannst du ein Dutzend Skills installieren, ohne dass etwas langsamer wird.

Sie laufen in Claude Code (Ordner nach ~/.claude/skills/ für dich selbst oder nach .claude/skills/ fürs Projekt), auf claude.ai (ZIP-Upload in den Einstellungen, in den Bezahlplänen) und über die API. Eine Einschränkung solltest du ernst nehmen: Ein Skill besteht aus Anweisungen plus Code, den Claude ausführt. Installiere ihn also wie jede andere Software, aus Quellen, denen du vertraust, und sieh dir vorher an, was im Ordner liegt.

Die Auswahl im Überblick

1. frontend-design: die Grundlage, die jeder haben sollte

Woher: aus Anthropics eigenem Skills-Repository. Es ist die Referenz, auf der mehrere andere Design-Skills aufbauen.

Stark ist der Skill, weil er eine Entscheidung erzwingt, bevor eine Zeile Code entsteht. Wähle einen Ton und geh damit ins Extrem: radikal minimal, maximalistisch, retrofuturistisch, redaktionell, Art déco, industriell. Danach folgen erstaunlich konkrete Regeln. Kein Arial, kein Inter, keine System-Schriften; kombiniere eine markante Display-Schrift mit einer ruhigen Lese-Schrift. Entscheide dich für eine dominante Farbe mit scharfen Akzenten statt für eine brave, gleichmäßig verteilte Palette. Steck das Bewegungsbudget in einen gut choreografierten Seitenaufbau mit gestaffelten Einblendungen, statt überall Mikro-Interaktionen zu verstreuen. Brich das Raster. Gib dem Hintergrund Atmosphäre statt einer Flachfarbe. Und der Skill führt eine ausdrückliche Verbotsliste des KI-Looks, allen voran lila Farbverläufe auf Weiß.

Gut für: Komponenten, Dashboards, interne Werkzeuge, eine schnelle Landingpage, alles, wo du das Konzept schon im Kopf hast und es nur sauber umgesetzt haben willst. Es ist auch der richtige Skill, wenn Einheitlichkeit wichtiger ist als Überraschung.

2. impeccable: der Skill, der versteht, was das Unternehmen ist

Woher: pbakaus/impeccable, installiert mit npx impeccable install. Er baut auf frontend-design auf und geht deutlich weiter. Außerdem ist er einer der am schnellsten wachsenden Skills überhaupt, im September 2026 jenseits von 250.000 Installationen.

Vier Dinge machen ihn in der Praxis anders:

• Er legt zuerst einen Modus fest. Überzeugen, Bedienen, Lesen oder Erleben, also: Was heißt Erfolg für einen Besucher auf genau dieser Seite? Eine Preisseite und ein Einstellungsbildschirm sind verschiedene Aufgaben, und er behandelt sie nicht länger gleich.
• Er hat 24 Befehle, nicht einen. shape, critique, audit, polish, bolder, quieter, distill, harden, animate, typeset, layout, delight, overdrive, adapt, optimize, clarify. „Mach es ruhiger“ oder „das wirkt billig“ werden damit zu Anweisungen mit einem Verfahren dahinter statt zu einem Gefühl, von dem du hoffst, dass es ankommt.
• Verfeinern und Neu-Entwerfen sind getrennte Entscheidungen. Verfeinern behält die Identität und fasst nichts außerhalb des Auftrags an. Neu-Entwerfen behandelt den alten Look als Beleg dafür, was nicht funktioniert hat, und ersetzt ihn. Der Skill weigert sich, den Mittelweg zu gehen, und genau dieser Mittelweg ist der Brei, den die meisten KI-Redesigns produzieren.
• Er merkt sich etwas. Produkt- und Designkontext werden festgehalten, die nächste Sitzung startet also dort, wo die letzte aufgehört hat. Dazu kommen feste Prüfregeln, die bekannte Fehlmuster ohne Modellaufruf finden.

Der eigentliche Grund für die Installation ist aber keiner dieser Punkte. Es ist, dass impeccable nach der Idee sucht. Bitte ihn um ein Redesign, und er liest zuerst, was das Unternehmen tatsächlich tut, und sucht dann eine Form, die das trägt. Die Seite einer Arztpraxis, aufgebaut wie ein Rezept. Die Startseite einer Physiotherapie, die sich liest wie der Behandlungsplan, den du durchläufst. Ein Materialhersteller, dessen ganze Startseite eine einzige Molekülkette ist, die sich beim Scrollen zeichnet und an jedem Glied erklärt, was man daran einstellen kann. Das ist der Unterschied zwischen einer Seite, die gestaltet aussieht, und einer Seite, die von etwas handelt.

Drei Dinge, die wir beim Einsatz auf echten Kundenseiten gelernt haben:

• Er nimmt dich wörtlich, sei also vorsichtig mit dem Wort „Redesign“. Sag „verfeinere diesen Hero“, wenn du das meinst. Bittest du um ein Redesign, ersetzt er die ganze Welt, statt sie zu polieren.
• Das Konzept muss für den Besucher lesbar sein, nicht nur für dich. Wir haben eine Seite für ein technisches Produkt zweimal gebaut. Die erste Fassung war für die Fachperson entworfen und setzte voraus, dass man die Kategorie kennt; Laien sind sofort abgeprallt. Die zweite Fassung erklärte unterwegs, und die Fachleute mochten diese sogar lieber. Genau diese Asymmetrie ist die Lehre: Die erklärende Fassung funktioniert für beide, die Insider-Fassung nur für eine Seite.
• Ein Durchlauf kostet mehr. Größerer Prompt, Prüfdurchgänge, Screenshots. Passe den Aufwand an die Aufgabe an, und lass aus einer Frage zu einem Abschnitt keinen Umbau der ganzen Seite werden.

Gut für: Startseiten, Landingpages, ein echtes Redesign und jeden Fall, in dem die Kritik lautet „das sieht generisch aus“.

3. design-shotgun: wenn du nicht beschreiben kannst, was du willst

Woher: der Skill design-shotgun in garrytan/gstack, Teil einer größeren, sehr meinungsstarken Werkzeugkette.

Der Ablauf ist der Punkt. Er stellt eine kurze Runde Fragen zu Zielgruppe, Ziel und Ablauf (höchstens zwei Runden, damit kein Verhör daraus wird), liest nach, was du früher freigegeben hast, damit er deinem Geschmack folgt, und schreibt dann mehrere Konzepte als Text. Meist drei, bis zu acht, mit der harten Regel, dass jedes eine andere Schriftfamilie, eine andere Farbpalette und einen anderen Layout-Ansatz nutzen muss. Du bestätigst die Konzepte, er lässt die Varianten parallel bauen und rendern und öffnet dann ein Vergleichsboard im Browser. Du bewertest, hinterlässt Notizen pro Variante, und das Ergebnis wird gespeichert, damit die nächste Runde näher an dem startet, was dir gefällt.

Warum das funktioniert, ist fast psychologisch. Der schlimmste Schritt im KI-Design ist, einen einzelnen Entwurf ohne Vergleich zu beurteilen, wo dir nur „hm, noch nicht ganz“ einfällt. Drei klar verschiedene Optionen sagen dir in etwa dreißig Sekunden, was du eigentlich willst, und dein Feedback wird viel brauchbarer: die Schrift aus der zweiten, das Layout aus der dritten, von der ersten nichts.

Gebaut wurde er für Produktoberflächen, aber er funktioniert auch für Websites und ist besonders stark bei der Startseiten-Entscheidung, die ja alles Weitere vorgibt. Zwei Einschränkungen. Was du vergleichst, ist ein erster Entwurf, du nimmst den Gewinner also weiter zu impeccable oder frontend-design, um ihn richtig zu bauen. Und mehrere Agenten parallel laufen zu lassen ist nicht billig, nutze ihn also für die Entscheidungen, die zählen, nicht für jeden Abschnitt.

Gut für: den Projektstart und genau den Moment, in dem du dich sagen hörst „gefällt mir nicht“, ohne zu wissen, warum.

Drei weitere, die sich lohnen

theme-factory (Anthropic). Zehn fertige Themes mit abgestimmten Paletten und Schriftpaaren, oder er erzeugt eins, und wendet es auf das an, was du schon gebaut hast. Die meisten KI-gebauten Seiten fallen bei Seite fünf auseinander, wenn jede Seite ihre eigene Meinung zu Buttons entwickelt hat. Das ist die günstigste Lösung dafür.

webapp-testing (Anthropic). Playwright, Screenshots, Browser-Logs. Ein Design-Skill ohne das ist Gestalten mit verbundenen Augen. Lass die KI die Seite in Handy- und Desktopbreite öffnen, hinsehen und dann alles Gefundene in einem Rutsch beheben. Seitliches Scrollen, überlappender Text, ein Hero, der auf dem Handy den ganzen ersten Bildschirm frisst, Grau auf Grau: im Screenshot offensichtlich, im Code unsichtbar.

canvas-design und algorithmic-art (Anthropic). Für Poster, Teilbilder und generative Hero-Grafik. Beide schreiben zuerst eine Design-Philosophie auf und setzen sie erst dann visuell um, deshalb hält das Ergebnis besser zusammen als jedes „mach mir ein Hero-Bild“. Für eine Seite, die nicht wie alle anderen aussehen will, schlägt eigene generierte Grafik Stockfotografie deutlich.

Der eigentliche Hebel: schreib deinen eigenen

Der beste Design-Skill, den du je nutzen wirst, ist der, der dein eigenes System beschreibt. Es ist ein Ordner mit einer Markdown-Datei darin. Schreib deine Schriften hinein, deine Abstandsskala, deine Button-Regeln, deine erprobten Snippets und die Korrekturen, die du immer wieder machst. Von da an startet die KI jede Aufgabe bereits im Markenbild, statt in jedem einzelnen Prompt über deine Marke aufgeklärt zu werden. Anthropics Skill brand-guidelines ist genau dieses Muster (Farben und Typografie, verpackt), und skill-creator hilft dir, deinen eigenen zu schreiben.

Wir halten zum Beispiel einen für Bewegung: vier erprobte Snippets für Seitenaufbau-Choreografie, Scroll-Einblendungen, einen Canvas-Hero und Seitenübergänge, dazu die Rückfallebenen für reduzierte Bewegung und abgeschaltetes JavaScript, die man um 23 Uhr gern vergisst. Er ist mehr wert als jeder generische Animations-Prompt, weil er unserer ist und bereits stimmt.

Ein Hinweis, der wichtiger ist, als er klingt: Schreib die Zeile description sorgfältig. Sie ist der einzige Teil, der immer im Kontext liegt, und sie entscheidet, ob dein Skill überhaupt geladen wird.

Wie du sie kombinierst

Skills lassen sich kombinieren, und die Reihenfolge zählt. Die Schleife, die wir tatsächlich nutzen:

1. Schreib das Briefing. Drei Sätze: was das Unternehmen wirklich tut, wer der Besucher ist und was er als Nächstes tun soll, und die eine Sache, die er sich merken soll.
2. design-shotgun für drei Richtungen. Wähl eine aus. Das dauert Minuten und spart Stunden.
3. impeccable, um den Gewinner richtig zu bauen: erst formen, dann bauen, dann Typografie und Bewegung, dann polieren und produktionsfest machen.
4. webapp-testing, um es auf Desktop und Handy anzusehen und alles in einem Rutsch zu beheben. Danach aufhören.
5. theme-factory oder dein eigener Marken-Skill, damit jede weitere Seite demselben System folgt.

Das „danach aufhören“ in Schritt vier ist eine echte Anweisung, kein Nebensatz. Endlose Selbstkontroll-Schleifen verbrennen erstaunlich viel Geld damit, schlecht zu tun, was ein gebündelter Durchgang gut erledigt.

Der Teil, den kein Skill für dich übernimmt

Jeder Skill in dieser Liste hebt den Boden. Keiner schreibt das Briefing. Ob KI-Design gut wird, hängt am klarsten nicht davon ab, welchen Skill du geladen hast, sondern davon, ob in deiner Anfrage eine Tatsache über das Unternehmen stand, die das Modell nicht hätte erraten können.

„Mach meine Zahnarztseite modern“ liefert die moderne Zahnarztseite, die mit dem weichen Blauverlauf und dem lächelnden Stockfoto. „Wir sind die einzige Praxis im Ort mit Samstagssprechstunde, und die Hälfte unserer Patienten hat echte Angst vorm Zahnarzt“ liefert etwas völlig anderes, weil es jetzt etwas gibt, worüber man gestalten kann. Das ist auch der Grund, warum derselbe Skill bei einem Menschen preisverdächtige Arbeit abliefert und beim nächsten eine Vorlage. Gleiches Werkzeug, anderes Futter.

Wenn du die längere Fassung willst, wohin das führt: Wir haben darüber geschrieben, was KI in der Webentwicklung wirklich automatisiert.

Wenn du nicht programmierst

All das setzt ein Terminal voraus, ein Repository und die Bereitschaft, eigenes CSS zu debuggen. Die meisten Unternehmerinnen und Unternehmer haben nichts davon, und genau für diese Lücke haben wir ShiftPress gebaut.

Jeder Skill aus dieser Liste läuft in ShiftPress. frontend-design und impeccable gestalten, design-shotgun gibt dir Richtungen zur Auswahl, theme-factory hält die ganze Seite auf einem System, und webapp-testing prüft das Ergebnis in einem echten Browser, alles in unserem eigenen Editor, auf der echten Seite des Kunden. Du tippst einen Satz, was sich ändern soll, die KI gestaltet es entlang deiner Marke, und du siehst ein Vorher und ein Nachher und veröffentlichst, wenn es passt. Gleiche Skills, gleiche Decke, keine Installation und kein Terminal. Wie sich das im Alltag anfühlt, haben wir hier beschrieben: deine Website per Chat bearbeiten, und der Editor selbst liegt hier. Das ist auch etwas anderes als die KI-Knöpfe, die in den üblichen Baukästen angeschraubt sind, die haben wir in KI in Wix, Squarespace und Webflow verglichen.

Häufige Fragen

Das Fazit

Installier frontend-design, weil es immer an sein sollte. Installier impeccable, wenn das Design etwas bedeuten muss, und gib ihm ein Briefing, um das sich gestalten lässt. Installier design-shotgun für den Moment, in dem du bei der Auswahl feststeckst. Nimm theme-factory dazu, damit die Seite zusammenhält, und webapp-testing, damit sich vor der Veröffentlichung wirklich jemand die Seite ansieht. Und schreib dann einen eigenen Skill, der dein System beschreibt, danach startet alles näher am Ziel.

Die Skills sind sehr schnell sehr gut geworden. Was sie weiterhin nicht können, ist dein Geschäft kennen. Dieser Teil gehört dir, und er entscheidet, ob das Ergebnis gestaltet aussieht oder nur generiert.