Anthropic Frontend Design

Ontwerprichtlijnen voor onderscheidende UI die standaard sjablonen in palet, typografie en lay-out vermijdt

Door fcakyon · fcakyon/claude-codex-settings

Getest · Werkt ★ 9.2/10

Anthropic Frontend Design — Ontwerprichtlijnen voor onderscheidende UI die standaard sjablonen in palet, typografie en lay-out vermijdt

Wat het doet

Een prompt-only ontwerpvaardigheid die Claude stuurt naar onderscheidend, intentioneel visueel ontwerp bij het bouwen of hervormen van UI: pin het onderwerp, bouw een klein kleur/type/lay-out/signature token systeem, en leid één memorabel signature element af in plaats van standaardinstellingen te gebruiken. Activeert wanneer de gebruiker vraagt om een pagina, hero of interface te ontwerpen of herontwerpen, typografie of een palet te kiezen, of een ontwerp te repareren dat generiek of sjabloonachtig aanvoelt. Het benoemt expliciet de drie huidige AI-standaardlooks en de hero met grote cijfers als sjablonen die vermeden moeten worden.

Testrapport

SKILL.md ruw opgehaald en bevestigd dat frontmatter parseert met name+description (204-tekens) en Apache-2.0 licentie; de body verwijst niet naar scripts of bestanden (zelfstandige richtlijnen), dus niets om te controleren, en geen beveiligingsrisico's. Installatie geverifieerd in een tijdelijke HOME via git clone + cp, waarbij SKILL.md terechtkwam op ~/.claude/skills/anthropic-frontend-design/SKILL.md. Voor de uitvoer heb ik twee echte hero-artefacten gebouwd voor dezelfde opdracht (een getijdenklok voor kustvissers): baseline.html en skill.html. De baseline produceerde reflexief donkerblauw+hemelsblauw, één systeemlettertype, en exact de drie-grote-cijfer-statistiekenrij (10k+/99.9%/24-7) die de skill als sjabloonantwoord noemt; de skill-volgende versie liet de statistieken vallen voor een op maat gemaakte analoge getijdenwijzerplaat (signature element), gebruikte drie weloverwogen lettertyperollen (Oswald condensed / Spectral / Plex Mono), een 6-hex marine palet afgeleid van het onderwerp, en actieve-stem-tekst voor de eindgebruiker ("De bar is open. Steek over voor eb." / "Stel mijn bar-alarm in" versus "Mis nooit meer het tij" / "Begin").

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

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)

Commando's en voorbeeldprompts

/anthropic-frontend-designOntwerprichtlijnen voor onderscheidende UI die standaard sjablonen in palet, typografie en lay-out vermijdt

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Build a landing page that does not look AI-generated
Design a polished dashboard component for the app
Create a distinctive pricing page layout

Volledig rapport (Engels) →