Claude Code · Installationsguide

Der Claude-Code Design Stack — 5 kostenlose Tools gegen KI-Slop

Alle Original-Repos, kopierbare Installationsbefehle und ein fertiger Master-Prompt — direkt auf dieser Seite, ohne PDF-Download.

Du kommst vom Kommentar«DESIGN»

Das steckt drin

Taste Skill legt Layout, Typografie, Abstände und Bewegung fest
Vercels Web Design Guidelines prüfen UX und Accessibility
Awesome DESIGN.md liefert analysierte Designsysteme als Referenz
Image to Code verbindet visuelle Vorlage und Umsetzung
Playwright CLI prüft das Ergebnis im echten Browser
Alle Befehle und der Master-Prompt lassen sich mit einem Klick kopieren

Stand: 22. August 2026. Drittanbieter-Skills können sich ändern. Lies die SKILL.md vor der Installation. Designreferenzen sind eine Richtung und keine Erlaubnis, Markenauftritte zu kopieren. Browser-Checks ersetzen keine Tests mit echten Nutzern.

Deine Ressource

Zum Tool / Repo

Öffnen

1. Taste Skill installieren

Gibt Claude Regeln für Layout, Typografie, Abstände und Bewegung.

npx skills add https://github.com/tasteskill/tasteskill --skill design-taste-frontend --agent claude-code -y

Taste Skill — Original-Repository

Quellcode, SKILL.md, Beispiele und Lizenz auf GitHub.

Öffnen

2. Web Design Guidelines installieren

Prüft unter anderem UX, Accessibility, Formulare und responsives Verhalten.

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code -y

Web Design Guidelines — Original-Repository

Die aktuelle SKILL.md direkt bei Vercel Labs.

Öffnen

3. Awesome DESIGN.md laden

Danach eine passende DESIGN.md als Referenz in dein Projekt kopieren.

git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git

Awesome DESIGN.md — Original-Repository

Eine Sammlung analysierter Designsysteme, keine installierbare Skill.

Öffnen

4. Image to Code installieren

Erstellt und analysiert visuelle Referenzen vor der Umsetzung.

npx skills add https://github.com/tasteskill/tasteskill --skill image-to-code --agent claude-code -y

Image to Code — Original-Repository

Skill-Quelle und vollständiger Ablauf auf GitHub.

Öffnen

5. Playwright CLI installieren

Öffnet die Seite im Browser und kann Screenshots, Konsole, Requests und Interaktionen prüfen.

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

Playwright CLI — Original-Repository

Offizielle Installation, Befehle und Beispiele von Microsoft.

Öffnen

Master-Prompt kopieren

Im Projektordner einfügen, nachdem du die Skills installiert und eine DESIGN.md gewählt hast.

Baue oder überarbeite diese Oberfläche als produktionsreifes Frontend.

Lies zuerst DESIGN.md. Nutze design-taste-frontend, um eine klare visuelle Richtung festzulegen. Verwende image-to-code: Referenzbilder zuerst, Analyse danach, Code zuletzt. Bleib im bestehenden Framework und Designsystem des Projekts.

Prüfe das Ergebnis anschließend mit web-design-guidelines. Behebe alle kritischen und wichtigen Findings. Öffne die Seite danach mit Playwright CLI. Teste Desktop und Mobile, erstelle Screenshots und prüfe Konsole, Requests und sichtbare Interaktionen.

Zeige mir am Ende die geänderten Dateien, deine Designentscheidungen, behobene Findings und verbleibende Einschränkungen.

// Projekt-Anfrage

Etwas Größeres vor? Lass es uns richtig aufsetzen.

Die Ressource hilft dir beim Selbermachen. Wenn du dein Projekt professionell aufsetzen willst: drei kurze Fragen, danach buchst du direkt ein kostenloses Erstgespräch.

Schritt 1 von 4

Der Claude-Code Design Stack — 5 kostenlose Tools gegen KI-Slop

Das steckt drin

Danke für den Download! 🎉

So lädst du die Datei

Dein Link ist startklar 🔗

Etwas Größeres vor? Lass es uns richtig aufsetzen.

Was beschreibt dich am besten?

Woran willst du zuerst arbeiten?

Wie schnell willst du starten?

Letzter Schritt: Slot wählen

Der Claude-Code Design Stack — 5 kostenlose Tools gegen KI-Slop

Das steckt drin

Etwas Größeres vor? Lass es uns richtig aufsetzen.

Was beschreibt dich am besten?

Woran willst du zuerst arbeiten?

Wie schnell willst du starten?

Letzter Schritt: Slot wählen

Kalender laden