Frontend Design Skill für Claude Code

Anthropic liefert einen Skill namens frontend-design, der ändert, wie Claude Code an Interface-Arbeit herangeht. Hier steht, was er tut, wie du ihn installierst und wie du ihn mit den Prompts dieser Seite kombinierst, damit das Ergebnis nach deinem Produkt aussieht statt nach einer Demo.

Was der Skill ändert

Ohne ihn schreibt Claude Code UI so, wie es alles schreibt: korrekt, generisch und identisch mit den letzten zwanzig Projekten. Zentrierter Hero, drei Feature-Cards, runde Ecken, ein violetter Akzent. Der Skill schiebt einen Design-Durchgang vor den Code-Durchgang. Claude wählt eine Richtung, legt sich auf eine Schriftkombination fest, entscheidet über Raster und Abstandsskala und schreibt erst dann Markup. Er sagt dem Modell auch, was es vermeiden soll, und das ist der größte Teil des Werts.

Er ändert die Entscheidungen vor dem Schreiben, nicht das CSS. Eine Komponentenbibliothek steckt nicht drin.

Installation

Skills liegen in einem skills-Ordner, den Claude Code beim Start liest. Anthropic veröffentlicht frontend-design in seinem Skills-Repository; du fügst ihn hinzu wie jeden anderen Skill:

git clone https://github.com/anthropics/skills
cp -r skills/frontend-design .claude/skills/

Lass ihn im Projekt, wenn er mit dem Code versioniert sein soll, oder leg ihn in ~/.claude/skills/ für alle Projekte. Starte die Session neu, damit er geladen wird, und ruf ihn dann zu Beginn der UI-Arbeit beim Namen auf: "Use the frontend-design skill to build the settings page."

Kombination mit einem Stil-Prompt

Der Skill entscheidet über die Komposition. Er kennt weder deine Palette noch den Look, den du willst, also wählt er etwas Vernünftiges und Vergessbares. Genau da passt ein Stil-Prompt hinein. Die Reihenfolge zählt:

1. Füge den Stil-Prompt (oder den Block "For design.md" von einer Stil-Seite) in die design.md ein, unter einer Überschrift wie "Design direction".
2. Starte die Session und fordere die Seite an, mit dem Skill beim Namen.
3. Braucht es eine bestimmte Komponente, füge einen Snippet-Prompt ein. Der Skill respektiert Klassennamen und Werte, weil sie präzise sind.

Erst der Skill, dann der Stil-Prompt, dann die Snippet-Prompts. Lässt du einen aus, füllt das Modell die Lücke mit seinen Defaults.

Was er trotzdem falsch macht

• Schriften. Er schlägt eine Webfont-Kombination vor. Sag "system font stack only", wenn dir Bytes wichtig sind, oder nenne die zwei Familien, die du lizenziert hast.
• Bewegung. Er hängt gern an jede Section ein Fade-in beim Scrollen. Bitte nur um Hover- und Fokus-Zustände.
• Dark Mode. Er bietet standardmäßig einen an. Lehn ab, wenn die Marke ihn nicht verlangt.
• Neues CSS. Er bleibt bei sicheren Features von 2019. Die Neu in CSS-Prompts nennen die neueren beim Namen, damit er sie nutzt.

Codex, Cursor und die anderen

Das Skill-Format ist Claude Code spezifisch, aber die Idee lässt sich übertragen. Cursor liest .cursor/rules, Codex liest AGENTS.md. Füge denselben Design-Direction-Block dort ein und du bekommst den größten Teil des Effekts. Die Cursor-Seite zeigt die genaue Dateistruktur.

Fang mit einem Stil an: Swiss, Neo-Brutalismus oder die ganze Liste.