Anthropic Frontend Design

Guida di design per UI distintive che evitano default basati su template in palette, tipografia e layout

di fcakyon · fcakyon/claude-codex-settings

Promosso ★ 9.2/10

Anthropic Frontend Design — Guida di design per UI distintive che evitano default basati su template in palette, tipografia e layout

Cosa fa

Una skill di design basata solo su prompt che guida Claude verso un design visivo distintivo e intenzionale quando crea o rimodella UI: fissa il soggetto, costruisce un piccolo sistema di token colore/tipografia/layout/firma, e deriva un elemento di firma memorabile invece di ricorrere ai default. Si attiva quando l'utente chiede di progettare o ridisegnare una pagina, un hero o un'interfaccia, scegliere la tipografia o una palette, o correggere un design che appare generico o basato su template. Nomi esplicitamente i tre look di default attuali dell'AI e l'hero con statistiche a grandi numeri come template da evitare.

Rapporto di test

Recuperata la raw SKILL.md e confermato che il frontmatter viene analizzato con nome+descrizione (204 caratteri) e licenza Apache-2.0; il corpo non fa riferimento a script o file (guida autocontenuta), quindi nulla da controllare, e nessun odore di sicurezza. Verificato l'installazione in una HOME temporanea tramite git clone + cp, posizionando SKILL.md in ~/.claude/skills/anthropic-frontend-design/SKILL.md. Per l'output ho creato due artefatti hero reali per lo stesso brief (un orologio di marea per pescatori costieri): baseline.html e skill.html. Il baseline ha prodotto riflessivamente blu scuro-blu cielo, un font di sistema e l'esatta riga di statistiche a tre grandi numeri (10k+/99.9%/24-7) che la skill nomina come risposta template; la versione conforme alla skill ha eliminato le statistiche per un quadrante di marea analogico su misura (elemento distintivo), utilizzato tre ruoli tipografici deliberati (Oswald condensato / Spectral / Plex Mono), una palette marina a 6 hex derivata dal soggetto, e copy in voce attiva per l'utente finale ("La barra è aperta. Attraversa prima della bassa marea." / "Imposta il mio allarme di marea" vs "Non perdere mai più la marea" / "Inizia").

Testato il: 2026-07-21 · Claude Code 2.x (agent harness)

Installazione

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)

Comandi e prompt di esempio

/anthropic-frontend-designGuida di design per UI distintive che evitano default basati su template in palette, tipografia e layout

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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

Rapporto completo →