Anthropic Frontend Design
Design-Anleitung für unverwechselbare UI, die Vorlagen-Defaults bei Palette, Typ und Layout vermeidet
Getestet · Funktioniert
Was es kann
Ein reiner Prompt-Design-Skill, der Claude zu unverwechselbarem, intentionalem visuellem Design führt, wenn UI erstellt oder umgestaltet wird: das Thema festlegen, ein kleines Farb-/Typ-/Layout-/Signatur-Token-System aufbauen und ein einprägsames Signaturelement ableiten, anstatt auf Standardeinstellungen zurückzugreifen. Wird ausgelöst, wenn der Benutzer eine Seite, einen Hero oder eine Schnittstelle gestalten oder neu gestalten, Typografie oder eine Palette auswählen oder ein generisch oder vorlagenhaft wirkendes Design korrigieren möchte. Er nennt explizit die drei aktuellen AI-Standard-Looks und den Hero mit großen Zahlenstatistiken als zu vermeidende Vorlagen.
Testbericht
SKILL.md roh abgerufen und bestätigt, dass der Frontmatter mit Name+Beschreibung (204 Zeichen) und Apache-2.0-Lizenz geparst wird; der Body verweist auf keine Skripte oder Dateien (selbständige Anleitung), daher nichts zu überprüfen und keine Sicherheitsrisiken. Installation in einem temporären HOME via git clone + cp verifiziert, wobei SKILL.md unter ~/.claude/skills/anthropic-frontend-design/SKILL.md abgelegt wurde. Für die Ausgabe habe ich zwei echte Hero-Artefakte für dasselbe Briefing (eine Gezeitenuhr für Küstenfischer) erstellt: baseline.html und skill.html. Die Baseline produzierte reflexartig Dunkelblau+Himmelblau, eine Systemschrift und genau die drei großen Zahlenstatistiken (10k+/99.9%/24-7), die der Skill als Vorlagenantwort nennt; die Skill-konforme Version verzichtete auf die Statistiken zugunsten eines maßgeschneiderten analogen Gezeitenrads (Signaturelement), verwendete drei bewusste Typrollen (Oswald condensed / Spectral / Plex Mono), eine aus dem Thema abgeleitete 6-Hex-Marinepalette und eine aktive Endbenutzer-Sprachkopie ("The bar is open. Cross before slack." / "Set my bar alert" vs "Never miss the tide again" / "Get Started").
Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)
Installation
git clone --depth 1 https://github.com/fcakyon/claude-codex-settings.git /tmp/anthropic-frontend-design-src mkdir -p ~/.claude/skills cp -R /tmp/anthropic-frontend-design-src/plugins/frontend-design-skills/skills/anthropic-frontend-design ~/.claude/skills/anthropic-frontend-design # Pure prompt-guidance skill: no scripts, no deps, no API keys, no external tools. # Plugin-marketplace alternative: # /plugin marketplace add fcakyon/claude-codex-settings # then install the "frontend-design-skills" plugin (also bundles openai-frontend-design)
Befehle & Beispiel-Prompts
/anthropic-frontend-designDesign-Anleitung für unverwechselbare UI, die Vorlagen-Defaults bei Palette, Typ und Layout vermeidet
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Build a landing page that does not look AI-generatedDesign a polished dashboard component for the appCreate a distinctive pricing page layout