Anthropic Frontend Design

Designvejledning til distinkt UI, der undgår skabelonagtige standarder i palet, typografi og layout

Af fcakyon · fcakyon/claude-codex-settings

Testet · Virker ★ 9.2/10

Anthropic Frontend Design — Designvejledning til distinkt UI, der undgår skabelonagtige standarder i palet, typografi og layout

Hvad det gør

En prompt-baseret design-skill, der styrer Claude mod distinkt, bevidst visuelt design, når UI bygges eller omformes: fastlæg emnet, byg et lille system af farve/typografi/layout/signatur-tokens, og afled ét mindeværdigt signatur-element i stedet for at ty til standarder. Udløses, når brugeren beder om at designe eller redesigne en side, hero eller interface, vælge typografi eller en palet, eller rette et design, der føles generisk eller skabelonagtigt. Den nævner eksplicit de tre nuværende AI-standardlooks og den store-tal-stat-hero som skabeloner, der skal undgås.

Testrapport

Hentet SKILL.md råt og bekræftet, at frontmatter parser med navn+beskrivelse (204 tegn) og Apache-2.0 licens; brødteksten refererer ingen scripts eller filer (selvstændig vejledning), så intet at spot-tjekke, og ingen sikkerhedsrisici. Verificeret installation i en midlertidig HOME via git clone + cp, placering af SKILL.md i ~/.claude/skills/anthropic-frontend-design/SKILL.md. Til output byggede jeg to reelle hero-artefakter til den samme brief (et tideur til kystfiskere): baseline.html og skill.html. Baslinen producerede refleksivt mørkeblå+himmelblå, én systemskrifttype og den præcise tre-store-tal række (10k+/99.9%/24-7), som skill'en navngiver som standardsvaret; den skill-følgende version droppede statsene for en specialdesignet analog tideurskive (signatur-element), brugte tre bevidste typografiske roller (Oswald condensed / Spectral / Plex Mono), en 6-hex maritim palet afledt af emnet, og bruger-aktiv stemme-tekst ("Tidevandet er åbent. Kryds før lavvande." / "Indstil min tidevarsel" vs. "Gå aldrig glip af tidevandet igen" / "Kom i gang").

Testet: 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)

Kommandoer og eksempelprompter

/anthropic-frontend-designDesignvejledning til distinkt UI, der undgår skabelonagtige standarder i palet, typografi og layout

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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

Læs hele rapporten →