Frontend Design Skill - Besserer UI-Code von Claude

Quelle: Inhalte adaptiert aus anthropics/skills (MIT). Zuletzt synchronisiert am 8. Juli 2026, Stand des Upstream-Rewrites vom 9. Juni 2026.

Überblick

Die offizielle Beschreibung: "Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one."

Der Rewrite von 2026 stellt den ganzen Skill auf eine Haltung um: Claude agiert als Design-Lead eines kleinen Studios, dessen Kunde vorlagenhafte Entwürfe bereits abgelehnt hat. Jede Entscheidung - Palette, Typografie, Layout - muss spezifisch für das Briefing sein, inklusive "eines echten ästhetischen Risikos, das sich begründen lässt".

So funktioniert der Skill

Die aktuelle SKILL.md führt durch fünf Stufen:

1. Im Thema verankern - fehlt dem Briefing das Produkt, muss Claude zuerst Subjekt, Zielgruppe und die eine Aufgabe der Seite benennen.
2. Designprinzipien - der Hero ist eine These; Typografie trägt die Persönlichkeit; Struktur ist Information (Nummerierungen nur, wenn Reihenfolge wirklich zählt); Motion gezielt statt verstreut.
3. Prozess: Brainstorm → Plan → Kritik → Build → erneute Kritik - Claude schreibt erst ein kompaktes Token-System (4-6 benannte Hex-Farben, 2+ Schriftrollen, Layout-Konzept als ASCII-Wireframe und ein "Signature"-Element) und prüft den Plan gegen das Briefing, bevor Code entsteht.
4. Anti-Default-Kalibrierung - der Skill benennt die drei Looks, um die KI-Design derzeit kreist (Creme + Serif + Terracotta; Fast-Schwarz + Giftgrün; Broadsheet-Haarlinien), und verbietet, freie Entscheidungen darauf zu verschwenden.
5. CSS-Disziplin - Selektor-Spezifität beachten, damit sich Section- und CTA-Regeln nicht gegenseitig aufheben.

Was im Skill-Ordner steckt

• SKILL.md - das vollständige Design-Playbook (~8 KB)
• LICENSE.txt

Erkenntnisse für eigene Skills

• Geschmack als benannte Anti-Patterns kodieren: die Default-Looks aufzulisten ist umsetzbarer als "sei kreativ".
• Ein Plan-dann-Kritik-Gate vor der Generierung zwingt Claude, mit dem eigenen ersten Entwurf zu streiten.

Auf GitHub ansehen

skills/frontend-design