Design System Reference

Venti guide di stile frontend con palette reali, font e regole anti-slop

Promosso ★ 8.4/10

Cosa fa

Fornisce venti guide di stile frontend dettagliate (Bento Grid, Glassmorphism, Swiss Minimal, Neobrutalism e altro), ciascuna con palette di variabili CSS concrete, abbinamenti di font e pattern di layout, più una checklist condivisa di anti-pattern AI-slop. Si attiva quando si costruisce o si stilizza un'interfaccia utente web in un'estetica nominata o quando si cerca di evitare design generici dall'aspetto AI.

Rapporto di test

Letta la guida Bento Grid di 451 righe inclusa: variabili CSS reali in stile Apple, abbinamenti di font nominati e una blocklist concreta di AI-slop (nessun Inter predefinito, nessun gradiente viola su bianco). Costruire una sezione hero da essa ha superato una baseline senza skill sulla specificità dei token anziché sui default generici di Tailwind. Avvertenza: il flusso di 'raccomandazione di stile basato su VS' pubblicizzato risiede in un agente di scoperta del design separato che l'installazione della skill NON copia, quindi da sola è una forte libreria di riferimento di stile piuttosto che il workflow guidato completo.

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

Installazione

git clone https://github.com/wigtn/wigtn-plugins
mkdir -p ~/.claude/skills
cd wigtn-plugins && cp -r plugins/wigtn-plugins/skills/design-system-reference ~/.claude/skills/design-system-reference

Comandi e prompt di esempio

/design-system-referenceVenti guide di stile frontend con palette reali, font e regole anti-slop

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

Style this landing page in a neobrutalist aesthetic with real palettes
Give me a glassmorphism style guide with concrete CSS variables
This UI looks generic and AI-made, help me avoid the slop patterns

Rapporto completo →