Anthropic Frontend Design

Designvägledning för distinkt UI som undviker mallade standardvärden i palett, typografi och layout

av fcakyon · fcakyon/claude-codex-settings

Testad · Fungerar ★ 9.2/10

Anthropic Frontend Design — Designvägledning för distinkt UI som undviker mallade standardvärden i palett, typografi och layout

Vad den gör

En prompt-only designfärdighet som styr Claude mot distinkt, avsiktlig visuell design vid byggande eller omformning av UI: fäst ämnet, bygg ett litet system för färg/typografi/layout/signatur-tokens, och härled ett minnesvärt signatur-element istället för att använda standardvärden. Triggers när användaren ber att designa eller omdesigna en sida, hjälte-sektion eller gränssnitt, välja typografi eller en palett, eller fixa en design som känns generisk eller mallad. Den namnger explicit de tre nuvarande AI-standardutseendena och den stora siffran-statistiken som mallar att undvika.

Testrapport

Hämtade SKILL.md rå och bekräftade att frontmatter parsas med namn+beskrivning (204 tecken) och Apache-2.0-licens; brödtexten refererar inga skript eller filer (självförsörjande vägledning), så inget att kontrollera, och inga säkerhetslukter. Verifierade installation i en temporär HOME via git clone + cp, landade SKILL.md på ~/.claude/skills/anthropic-frontend-design/SKILL.md. För utdata byggde jag två verkliga hjälte-artefakter för samma brief (en tidvattenklocka för kustfiskare): baseline.html och skill.html. Baslinjen producerade reflexmässigt mörkblå+himmelblå, en systemfont, och exakt samma tre-stora-siffror statistikrad (10k+/99.9%/24-7) som färdigheten namnger som standardsvar; den färdighetsföljande versionen släppte statistiken för en skräddarsydd analog tidvattenurtavla (signatur-element), använde tre avsiktliga typografiska roller (Oswald kondenserad / Spectral / Plex Mono), en 6-hex marin palett härledd från ämnet, och användarvänlig aktiv rösttext ("Baren är öppen. Korsa före slack." / "Ställ in min bar-varning" vs "Missa aldrig tidvattnet igen" / "Kom igång").

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

Kommandon och exempelprompter

/anthropic-frontend-designDesignvägledning för distinkt UI som undviker mallade standardvärden i palett, typografi och layout

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →