Design System Is All You Need

Otto guide di stile UI nominate con token auto-derivati, applicate prima di qualsiasi codice

di devPnal · devPnal/design-system-is-all-you-need

Promosso ★ 7.6/10

Design System Is All You Need — Otto guide di stile UI nominate con token auto-derivati, applicate prima di qualsiasi codice

Cosa fa

Raggruppa otto linee guida di design scritte — neumorfismo, glassmorfismo, brutalismo, scheumorfismo, Material, neon, heritage e il 'pnalismo' dell'autore — ognuna con regole comuni, specifiche per componente e un sistema di token derivato solo da un colore tema e una parola chiave di intensità. Si attiva su lavori UI: costruire pagine, dashboard, card, form o qualsiasi componente frontend, in HTML/CSS, React, SwiftUI o Compose. Si ferma e chiede quale stile e quale colore esadecimale prima di scrivere qualsiasi cosa.

Rapporto di test

Costruita la stessa card di accesso due volte, una volta semplice e una volta sotto la linea guida neumorfismo inclusa: il file guidato conteneva 11 token di design contro zero, ha posizionato tutti e sei i valori di spaziatura sulla griglia da 8px (quello semplice l'ha centrata 0 su 6), e ha dato a ogni controllo un target di 44px più un anello di focus. La stessa misurazione ha esposto una contraddizione all'interno della linea guida — la sua regola primary-CTA (etichetta colore tema su una superficie tinta) calcola un contrasto di 2.94:1, sotto il 4.5:1 richiesto dalla sua checklist finale, e peggiore del 3.7:1 della versione semplice. Il passo 2 della skill punta a references/meterial-design.md, un file che non esiste (quello reale è material-design.md), sebbene il nome corretto appaia nella tabella sopra. Aspettati un blocco forzato per due domande — stile e colore esadecimale — prima che appaia qualsiasi output.

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

Installazione

git clone https://github.com/devPnal/design-system-is-all-you-need.git
mkdir -p ~/.claude/skills
cd design-system-is-all-you-need && cp -r design-system-is-all-you-need ~/.claude/skills/design-system-is-all-you-need

Comandi e prompt di esempio

/design-system-is-all-you-needOtto guide di stile UI nominate con token auto-derivati, applicate prima di qualsiasi codice

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 sign-in card for my app using a neumorphism design style
Design a pricing card component in glassmorphism for our React app
Create a dashboard with a consistent brutalist design system applied

Rapporto completo →