Das komplette Setup aus dem Video: zwei Design-Skills, der Taste-Skill, Figma und Playwright. Danach beschreibst du nur noch, welche Website du willst.
Für Claude Code·Ab Claude Pro·Skills Open Source·Kostenloses Figma-Konto reicht
Am Laptop geht’s am schnellsten. Alles richtest du im Terminal am Computer ein. Schick dir den Link einfach rüber.
Du bist im Instagram-Browser. Tipp oben rechts auf ⋯ und dann auf Im Browser öffnen, dann klappt alles.
1
Design-Skills installieren
Öffne das Terminal und füg die zwei Zeilen nacheinander ein, jeweils mit Enter.
cmd + Leertaste→Terminal→Enter
Emil KowalskiAnimationen, Easing und UI-Feinschliff, aus seiner Arbeit bei Vercel und Linear.
ImpeccableTypografie, Layout, Farben und Abstände, dazu Befehle wie /impeccable polish.
claude plugin marketplace add pbakaus/impeccable && claude plugin install impeccable@impeccable
Das Terminal meldet einen Fehler?
Bei command not found: npx oder einem Hinweis auf die Node-Version fehlt Node.js oder ist zu alt. Lade die LTS-Version von nodejs.org, öffne ein neues Terminal-Fenster und füg die Zeile noch mal ein.
Bei command not found: claude fehlt Claude Code. Installier es mit curl -fsSL https://claude.ai/install.sh | bash und melde dich mit claude bei deinem Konto an. Claude Code gibt es ab Claude Pro.
Unter Windows streikt die ältere PowerShell bei &&. Dann gib die Zeile in zwei Teilen ein: erst alles vor dem &&, dann den Rest.
2
Taste-Skill dazupacken
Damit holt sich Claude Inspiration von echten Websites statt generischer Vorlagen: eine Art Direction aus 247 ausgewählten Seiten, echte Fotos und ein Check im Browser.
claude plugin marketplace add Leonxlnx/taste-skill && claude plugin install taste-skill@taste-skill
Braucht der Taste-Skill noch etwas?
Nur Chrome, Edge oder Chromium und Node.js 22 oder neuer. Er installiert nichts dazu und braucht keinen API-Schlüssel.
3
Figma und Playwright verbinden
Mit Figma legt Claude Entwürfe an, mit Playwright testet es die Seite in einem echten Browser. Beide kommen aus dem offiziellen Plugin-Verzeichnis von Anthropic.
claude plugin install figma@claude-plugins-official
claude plugin install playwright@claude-plugins-official
Dann startest du Claude Code in einem neuen Ordner für deine Website und meldest dich einmal bei Figma an:
mkdir -p meine-website && cd meine-website && claude
/plugin→Installed→figma→2× Enter→Allow access
Kein Figma-Konto?
Leg beim Anmelden ein kostenloses an, das reicht. Damit ruft Claude bis zu 20-mal im Monat Daten aus Figma ab, neue Dateien anlegen zählt nicht mit.
Figma oder Playwright wird nicht gefunden?
Dann kennt Claude Code das offizielle Verzeichnis noch nicht. Füg diese Zeile ein und danach noch mal die zwei von oben.
claude plugin marketplace add anthropics/claude-plugins-official
4
Website beschreiben
Schreib Claude, welche Website du willst. Ersetz den Teil in eckigen Klammern durch deinen Wunsch.
Bau mir eine Website für [mein Café: warm, modern]. Nutz dafür den Taste-Skill, Impeccable und emil-design-eng. Entwirf sie in Figma, bau sie und teste sie mit Playwright am Handy und am Desktop.
Claude entwirft, baut und testet jetzt selbst. Fragt es, ob es ein Tool benutzen darf, sag ja.
Wo finde ich meine fertige Website?
Im Ordner meine-website in deinem Benutzerordner. Schreib Claude „Öffne die Seite im Browser“, dann siehst du sie sofort.
Was das Setup im Hintergrund macht
FeinschliffDie Design-Skills ordnen Layout, Typografie, Abstände und Animationen.
Entwerfen, bauen, testenFigma hält den Entwurf fest, Playwright klickt die fertige Seite im Browser durch.
Fertig.
Ab jetzt beschreibst du nur noch, welche Website du willst. Den Rest macht Claude mit deinem Setup.
