Fünf kostenlose Design-Skills, mit denen Claude Code schönere Webseiten baut

Von Ernst Neumeister · Lesezeit ca. 10 Minuten

Kennst du das? Du lässt dir von Claude eine Webseite bauen, und technisch funktioniert alles. Aber sie sieht aus wie … jede andere KI-Webseite. Dieselbe Aufteilung, dieselben Blau-Lila-Verläufe, dieselben drei Kärtchen nebeneinander. Man erkennt es auf den ersten Blick, und deine Kunden erkennen es auch.

Der Grund ist einfach: Claude Code ist ein hervorragender Programmierer. Aber Geschmack, Designregeln und ein Auge fürs Ergebnis muss man ihm mitgeben. Genau das machen die fünf Skills und Plugins auf dieser Seite. Alle sind kostenlos und Open Source, und zusammen machen sie aus Claude nicht nur einen Programmierer, sondern einen echten Designpartner.

Hier bekommst du zu jedem der fünf: was es macht (in normalem Deutsch), den Link zum offiziellen Projekt, die Installation in zwei Zeilen und einen fertigen Beispiel-Prompt zum Kopieren. Und wenn du dich um die Installation gar nicht kümmern willst: Es gibt einen einzigen Auftrag, mit dem Claude alle fünf für dich einrichtet.

Kurz vorweg: Was ein Skill ist, und wie er in Claude Code kommt

Ein Skill ist ein Fähigkeiten-Paket für deine KI: im Kern eine Textdatei mit Anweisungen, Regeln und Beispielen, die Claude liest, bevor es loslegt. Stell dir einen Spickzettel vor, den ein erfahrener Designer neben die Tastatur legt: „So machen wir das hier, und das lassen wir bleiben.“ Ein Plugin ist im Grunde dasselbe, nur verpackt für den Plugin-Katalog von Claude Code, sodass du es mit einem einzigen Befehl installierst.

Installiert wird meist über das Terminal: das Textfenster, in dem du Befehle eintippst (auf dem Mac findest du es über die Spotlight-Suche, einfach „Terminal“ eingeben). Einmal eingerichtet, sind die Skills da, und Claude nutzt sie von selbst, sobald du etwas Passendes fragst. Du musst dir also nichts merken, außer dem Namen, den du bei Bedarf in deinen Prompt schreibst.

Der einfachste Weg: Lass Claude alle fünf installieren

Wenn du dich um keine einzige Zeile kümmern willst: Kopiere diesen Auftrag in Claude Code, und Claude richtet alle fünf nacheinander ein. Es fragt dich bei jedem Schritt, ob der Skill nur für dein aktuelles Projekt oder für alle deine Projekte gelten soll. Im Zweifel: für alle.

Ich möchte fünf Design-Skills für Claude Code installieren, damit du bessere Webseiten und Oberflächen baust. Hier sind die fünf, jeweils mit offizieller Quelle:

1. Taste Skill: https://github.com/Leonxlnx/taste-skill
   (Installation laut README: npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend")

2. Web Design Guidelines von Vercel: https://github.com/vercel-labs/agent-skills
   (Installation: npx skills add vercel-labs/agent-skills --skill web-design-guidelines)

3. Awesome Design MD: https://github.com/VoltAgent/awesome-design-md
   (Das ist kein Skill zum Installieren, sondern eine Sammlung von DESIGN.md-Dateien im Ordner design-md. Lege jetzt noch nichts an, sondern merk dir den Link und frag mich später, welche Marke als Vorlage passt.)

4. UI UX Pro Max: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
   (Installation laut README: npm install -g ui-ux-pro-max-cli und danach uipro init --ai claude)

5. Playwright CLI: https://github.com/microsoft/playwright-cli
   (Installation: npm install -g @playwright/cli@latest und danach playwright-cli install --skills)

Bitte geh so vor:

1. Prüfe zuerst, ob Node.js auf meinem Rechner installiert ist. Falls nicht, erkläre mir in einfachen Worten, wie ich es installiere, und warte auf mich.

2. Installiere die Skills nacheinander nach der jeweiligen offiziellen README. Erkläre mir vor jedem Schritt in einem Satz, was du tust.

3. Frag mich bei jedem Skill, ob er nur für dieses Projekt oder für alle meine Projekte (global) gelten soll.

4. Zeig mir am Ende eine Liste: Welcher Skill ist installiert, und mit welchem Satz aktiviere ich ihn?

Sprich mit mir wie mit einem Nicht-Techniker und frag bei Unklarheiten nach, statt zu raten.

1. Taste Skill: Designregeln und Geschmack für deine KI

Was es macht: Taste Skill ist der Skill gegen die „Einheits-KI-Optik“. Er gibt Claude klare Designregeln und hochwertige Referenzen mit: wie Schrift wirklich wirkt, wie viel Luft eine Seite braucht, wie Bewegung sich ruhig statt aufdringlich anfühlt, wo ein Layout mutig sein darf. Der Name ist Programm: Er bringt deiner KI Geschmack bei. Das Ergebnis sind Seiten, die man nicht sofort als KI-Vorlage erkennt.

Installation: Ein Befehl im Terminal. Er nutzt das kleine Helferprogramm „skills“, das Skills aus GitHub in Claude Code (und andere KI-Tools) einbaut. Voraussetzung ist Node.js, das die meisten Claude-Code-Nutzer ohnehin haben.

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

Das Projekt enthält noch weitere Varianten (etwa eine minimalistische und eine für bestehende Seiten, die neu gestaltet werden sollen). Für den Anfang reicht der Haupt-Skill oben völlig.

Beispiel-Prompt:

Nutze den Taste Skill und baue mir eine Startseite für mein Coaching-Business: ein klarer Aufmacher mit Überschrift und Button, drei Angebots-Karten und ein Abschnitt über mich.

Bitte keine Standard-KI-Vorlage: mutige Typografie, viel Luft, ruhige Bewegung beim Scrollen, keine Blau-Lila-Verläufe.

Meine Farben: [deine Farben]. Meine Schrift, falls vorhanden: [deine Schrift].

Zeig mir das Ergebnis, bevor du weiterbaust, und erkläre mir in drei Sätzen, welche Design-Entscheidungen du getroffen hast.

2. Web Design Guidelines von Vercel: der Prüfer vor dem Veröffentlichen

Was es macht: Vercel ist die Firma hinter vielen der bekanntesten Webseiten-Werkzeuge, und sie hat ihre Design-Hausregeln als Skill veröffentlicht. Der prüft deine fertige Seite gegen mehr als 100 Regeln: Sind Texte gut lesbar? Funktioniert alles mit der Tastatur? Kommen Menschen mit Sehbehinderung zurecht? Sind Formulare verständlich, Bilder sauber, der Dark Mode konsistent, die Bedienung am Handy angenehm? Kurz: Es ist die Qualitätskontrolle, die du sonst gar nicht hättest, weil du die Regeln nicht kennst. Ich auch nicht, dafür habe ich ja den Skill.

Installation: Gleicher Helfer wie oben. Mit dem Zusatz „--skill“ holst du dir nur die Design-Guidelines, nicht die ganze Sammlung (die enthält noch weitere Skills für Programmierer, die du als Nicht-Techniker nicht brauchst).

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Beispiel-Prompt:

Prüfe meine Webseite mit dem Skill web-design-guidelines. Geh alle Regeln durch: Barrierefreiheit, Lesbarkeit, Formulare, Bilder, Animationen, Dark Mode, Bedienung am Handy.

Gib mir danach eine Liste in drei Teilen: Was ist gut? Was ist ein Problem? Was würdest du zuerst beheben?

Erkläre jeden Punkt so, dass ich ihn ohne Programmierkenntnisse verstehe. Behebe danach die drei wichtigsten Probleme und zeig mir, was du geändert hast.

3. Awesome Design MD: fertige Designsysteme bekannter Marken

Was es macht: Ein Designsystem ist das komplette Regelwerk hinter dem Look einer Marke: Farben, Schriften, Abstände, Buttons, Schatten, Rundungen. Awesome Design MD ist eine Sammlung von über 70 solcher Regelwerke, abgeschaut von bekannten Webseiten (Stripe, Notion, Apple, Linear, Vercel, Spotify, sogar Claude selbst) und jeweils in einer einzigen Textdatei namens DESIGN.md festgehalten. Die legst du in dein Projekt, und Claude baut ab sofort in genau diesem Stil. Du fängst also nie wieder bei null an, sondern bei „sieht aus wie eine Profi-Marke“.

Installation: Hier gibt es nichts zu installieren. Du kopierst eine einzige Datei in den Ordner deines Projekts. Die Dateien liegen im Repo unter design-md/<marke>/DESIGN.md. Der Befehl unten holt zum Beispiel das Stripe-System; ersetze „stripe“ durch die Marke, die dir gefällt (etwa notion, apple, linear.app, vercel, spotify, claude).

curl -o DESIGN.md https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md

Beispiel-Prompt:

Im Projektordner liegt eine Datei DESIGN.md mit einem kompletten Designsystem. Halte dich beim Bauen strikt daran: Farben, Schriften, Abstände, Buttons, Schatten, Rundungen.

Baue damit eine Preisseite mit drei Paketen (Basis, Premium, VIP), jeweils mit Preis, fünf Leistungspunkten und einem Button.

Wichtig: Der Stil bleibt, die Marke wird meine. Ersetze Markenname, Logo und die Hauptfarben durch: [dein Name, dein Logo, deine Farben].

Zeig mir das Ergebnis und sag mir, wo du vom Designsystem abgewichen bist und warum.

4. UI UX Pro Max: der Design-Berater für deine Branche

Was es macht: Das ist der Skill, mit dem ich selbst arbeite. Er ist weniger Regelwerk und mehr Berater: Du sagst, was du bist und was du brauchst („Ich bin Ernährungscoach und brauche eine Seite für mein Gruppenprogramm“), und der Skill sucht aus einer riesigen Datenbank das Passende heraus. Über 50 Design-Stile, mehr als 160 Farbpaletten, Dutzende Schriftkombinationen und Regeln für über 160 Arten von Produkten und Branchen. Claude wählt damit Layout, Farbwelt und Bausteine, die zu deiner Zielgruppe passen, statt zu raten. Und er prüft am Ende gegen fast 100 Bedienbarkeits-Regeln, ob die Seite sich auch gut anfühlt.

Installation: Zwei Wege, beide aus der offiziellen Anleitung. Der erste läuft komplett in Claude Code: Du tippst die zwei Zeilen nacheinander direkt ins Chat-Fenster von Claude Code (die Befehle mit dem Schrägstrich sind eingebaute Kommandos, kein Terminal nötig).

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

Der zweite Weg läuft im Terminal und ist der, den die Macher empfehlen. Die erste Zeile installiert das Helferprogramm, die zweite richtet den Skill in deinem aktuellen Projektordner für Claude ein:

npm install -g ui-ux-pro-max-cli
uipro init --ai claude

Beispiel-Prompt:

Ich bin [dein Beruf, z. B. Business-Coach für Handwerksbetriebe] und brauche eine Landingpage für [dein Angebot].

Nutze UI UX Pro Max: Schlag mir zuerst passend zu meiner Branche und Zielgruppe einen Design-Stil, eine Farbpalette und eine Schriftkombination vor. Begründe jede Empfehlung in einfachen Worten und nenne mir je eine Alternative.

Warte auf meine Entscheidung. Baue dann die Seite damit: Aufmacher, Problem, Lösung, drei Vorteile, Kundenstimmen, Preis, Kontakt.

5. Playwright CLI: Claude schaut sich das Ergebnis selbst an

Was es macht: Bis hierhin hat Claude Regeln und Geschmack. Was ihm noch fehlt, sind Augen. Playwright ist ein Werkzeug von Microsoft, mit dem Programme einen echten Browser fernsteuern, und die Playwright CLI ist die Version davon, die speziell für KI-Assistenten wie Claude Code gebaut wurde. Damit kann Claude deine Webseite selbst öffnen, in Desktop- und Handy-Breite Screenshots machen, sich das Ergebnis ansehen und Fehler beheben. Statt nur zu hoffen, dass der Code stimmt, sieht Claude, ob die Seite wirklich gut aussieht. Für mich der wichtigste der fünf.

Installation: Zwei Zeilen im Terminal. Die erste installiert das Programm, die zweite legt den passenden Skill für Claude Code an (im aktuellen Projektordner; mit dem Zusatz --global hinter --skills gilt er für alle Projekte).

npm install -g @playwright/cli@latest
playwright-cli install --skills

Beispiel-Prompt:

Öffne meine Seite mit Playwright CLI unter [Adresse deiner Seite, z. B. http://localhost:4321] und mach Screenshots in Desktop-Breite und in Handy-Breite.

Schau dir die Screenshots ehrlich an: Was sieht gut aus? Was wirkt unfertig oder „nach KI-Vorlage“? Wo bricht das Layout, wo ist Text schlecht lesbar?

Behebe die Probleme, mach danach neue Screenshots und vergleiche. Wiederhole das, bis du selbst sagen würdest: Das würde ich so veröffentlichen.

So spielen die fünf zusammen

Jeder Skill ist für sich nützlich. Richtig stark werden sie in Reihenfolge, so nutze ich sie bei eigenen Seiten:

1. Richtung festlegen. Entweder du lässt dir von UI UX Pro Max Stil, Farben und Schriften für deine Branche vorschlagen, oder du holst dir ein fertiges Designsystem aus Awesome Design MD als Startpunkt. Beides zusammen geht auch.
2. Bauen mit Geschmack. Beim eigentlichen Bauen sorgt Taste Skill dafür, dass Typografie, Abstände und Bewegung nicht nach Vorlage aussehen.
3. Prüfen lassen. Ist die Seite fertig, läuft sie einmal durch die Web Design Guidelines: Lesbarkeit, Barrierefreiheit, Handy-Bedienung.
4. Selbst hinschauen. Zum Schluss öffnet Claude die Seite mit Playwright CLI, macht Screenshots und bessert nach, bis es wirklich gut aussieht.

Wenn du nur mit einem starten willst: Nimm Playwright CLI. Eine KI, die ihr Ergebnis selbst sieht, macht sofort weniger Fehler, egal wie viel Geschmack sie hat.

Häufige Fragen

Und jetzt du

Nimm dir die Seite vor, die du sowieso bauen oder überarbeiten wolltest. Installiere heute einen der fünf, am besten Playwright CLI, und schau, was sich ändert, wenn Claude sein Ergebnis selbst sehen kann. Schreib mir auf Instagram, welchen Unterschied du gemerkt hast, ich freue mich ehrlich über jede Nachricht. ❤️

PS: Falls du über „Kommentiere DESIGN“ hierher gekommen bist – die DM kam von meinem selbstgebauten System. Wie du dir das baust, zeige ich dir in meiner kostenlosen Community: hier geht's direkt zum Video. 😉