Chiedere a un agente AI di «fare una pagina bella» produce quasi sempre lo stesso risultato: un layout generico, senza una vera identità. Il problema non è la capacità del modello, ma l'assenza di un linguaggio visivo dichiarato. Awesome Design Skills di Bergside risolve il problema in modo diretto: un registro di 67 skill di design, ognuna dedicata a uno stile preciso, pronte da scaricare nel progetto.
Cosa contiene
Ogni skill è una cartella con due file:
SKILL.md: le istruzioni per l'agente. Token di stile, regole sui componenti, vincoli di accessibilità, criteri di qualità.DESIGN.md: la documentazione per le persone, con le intenzioni di design, le motivazioni e le note di manutenzione.
Per ogni stile (per esempio glassmorphism o brutalism) il documento definisce missione, brand, fondamenta di stile, famiglie di componenti, regole di accessibilità, tono dei testi, regole do/don't e criteri di qualità. In pratica è un piccolo design system scritto in un formato che l'agente sa leggere.
Installazione
Non c'è nessun pacchetto da installare: si usa la CLI TypeUI tramite npx, quindi serve soltanto Node.js.
# elenco interattivo delle skill disponibili
npx typeui.sh list
# scarica una skill nel progetto
npx typeui.sh pull glassmorphism
# scegli per quali strumenti scrivere i file
npx typeui.sh pull glassmorphism -p cursor,claude
# anteprima, senza scrivere nulla
npx typeui.sh pull glassmorphism --dry-runLa CLI scrive il SKILL.md nei percorsi attesi dal provider scelto (per esempio .cursor/skills/ oppure la cartella di Claude Code). Il DESIGN.md resta come riferimento leggibile nel repository.
Come si usa
- Scegli lo stile con
npx typeui.sh list, guardando le anteprime nella cartellaregistry-examples/del repository. - Scaricalo nel progetto con
pull. - Chiedi all'agente di usarlo, nominando la skill nel prompt: «costruisci la pagina dei prezzi seguendo la skill glassmorphism».
- Controlla il risultato rispetto ai criteri di qualità elencati nella skill e fai correggere le deviazioni.
Creare una skill su misura
Se nessuno dei 67 stili corrisponde al tuo brand, npx typeui.sh generate crea una skill personalizzata. È la strada più sensata per un prodotto con un'identità definita: partire da una skill esistente, adattare colori e tipografia, poi condividerla con tutto il team nello stesso repository.
Contribuire
Il registro è aperto: per aggiungere uno stile si crea una cartella in skills/, si inseriscono SKILL.md e DESIGN.md, si registra la voce in skills/index.json e si apre una pull request. Le sezioni obbligatorie sono quelle elencate sopra, quindi ogni contributo ha la stessa struttura.
Quando conviene (e quando no)
- Conviene per prototipi, landing page e progetti in cui vuoi uno stile riconoscibile senza stare ore a descriverlo a parole.
- Conviene come base di partenza per un design system interno.
- Meno utile se hai già un design system consolidato: in quel caso le regole del tuo brand vanno prima di qualsiasi stile generico.
Il progetto è distribuito con licenza MIT. Per un confronto con approcci diversi, vedi anche gli articoli su Taste Skill e design.md.