Anthropic Frontend Design

Designveiledning for særegen UI som unngår malbaserte standarder i palett, typografi og layout

av fcakyon · fcakyon/claude-codex-settings

Bestått ★ 9.2/10

Anthropic Frontend Design — Designveiledning for særegen UI som unngår malbaserte standarder i palett, typografi og layout

Hva den gjør

En ren prompt-basert designferdighet som styrer Claude mot særegen, bevisst visuell design når du bygger eller omformer UI: fest emnet, bygg et lite farge-/typografi-/layout-/signaturtoken-system, og utled ett minneverdig signatur-element i stedet for å falle tilbake på standarder. Utløses når brukeren ber om å designe eller redesigne en side, hero, eller grensesnitt, velge typografi eller en palett, eller fikse et design som føles generisk eller malbasert. Den navngir eksplisitt de tre nåværende AI-standardutseendene og den store-tall-statistikk-heroen som maler som skal unngås.

Testrapport

Hentet SKILL.md rått og bekreftet at frontmatter parser med navn+beskrivelse (204 tegn) og Apache-2.0 lisens; brødteksten refererer ingen skript eller filer (selvstendig veiledning), så ingenting å sjekke, og ingen sikkerhetslukt. Verifisert installasjon i en midlertidig HOME via git clone + cp, landet SKILL.md på ~/.claude/skills/anthropic-frontend-design/SKILL.md. For utdata bygget jeg to ekte hero-artefakter for samme brief (en tidevannsklokke for kystfiskere): baseline.html og skill.html. Baslinjen produserte refleksivt mørk-marineblå+himmelblå, én systemfont, og den eksakte tre-store-tall-statistikk-raden (10k+/99.9%/24-7) som ferdigheten navngir som mal-svaret; den ferdighetsfølgende versjonen droppet statistikken for en spesiallaget analog tidevannsskive (signatur-element), brukte tre bevisste typografiroller (Oswald condensed / Spectral / Plex Mono), en 6-hex marin palett utledet fra emnet, og sluttbruker-aktiv stemme-tekst ("The bar is open. Cross before slack." / "Set my bar alert" vs "Never miss the tide again" / "Get Started").

Testet på: 2026-07-21 · Claude Code 2.x (agent harness)

Installer

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-designDesignveiledning for særegen UI som unngår malbaserte standarder i palett, typografi og layout

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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

Full rapport →