Perché Claude di default produce design generici, le 5 competenze che risolvono il problema nella pratica, e il passo dopo passo per crearne una tua quando nessuna si adatta al tuo brand.
Sai già riconoscerlo. Gradiente viola su sfondo bianco, font Inter, ombra morbida sulla card, un'emoji persa in mezzo alla sezione. Lo guardi e pensi: l'ha fatto Claude.
Non è colpa del modello. È il suo comportamento predefinito.
Quando chiedi di "creare una landing page" senza ulteriori istruzioni, il modello non cerca la scelta più interessante. Cerca quella più probabile. E la scelta più probabile è la media di tutto ciò che ha visto durante l'addestramento: milioni di pagine sicure, generiche, dimenticabili. Il risultato è un design che sembra fatto dall'AI perché è letteralmente il centro statistico di ciò che esiste sul web.
Anthropic ha un nome per questo, lo chiamano convergenza distribuzionale. In pratica, significa una cosa sola: senza una direzione, Claude cade sempre nel banale.
Una skill è come lo si tira fuori da lì.
Cos'è una skill, in breve
Pensa a un file di testo (markdown) che Claude legge prima di iniziare a lavorare. Invece di ripetere le tue preferenze, il tuo sistema di design e il tuo tono in ogni prompt, lo scrivi una volta e si carica automaticamente. È una descrizione del lavoro che gli consegni prima di passargli il compito.
La differenza nell'output è enorme. Stesso prompt, stesso Claude, ma con la skill giusta caricata, smette di essere un designer generico e diventa un collaboratore che conosce il tuo lavoro.
Ne ho testate un sacco, con prima e dopo sullo stesso prompt per vedere cosa fa davvero la differenza. Possiamo isolare 5 che spostano davvero l'ago della bilancia per il web design.
1. Frontend Design (quella ufficiale di Anthropic)
Questa è la più popolare nell'ecosistema, e per una buona ragione: è stata rilasciata da Anthropic stessa. Ha superato 277.000 installazioni.
Il suo segreto non è insegnare a Claude a disegnare bene; è insegnargli cosa non fare. Il file elenca esplicitamente i cliché da evitare: font abusati, le solite combinazioni di colori, quella struttura di ombra sulle card che tutti riconoscono. È una breve lezione di buon gusto incorporata nel modello.
Nel test prima e dopo, questo diventa evidente. La stessa landing page che usciva con un gradiente viola e un'emoji si trasforma in qualcosa di editoriale, con un'elegante coppia di serif e sans-serif puliti, animazioni di dissolvenza allo scroll e stati hover curati. Da un solo prompt.
Quando usarla: Ogni volta che inizi un progetto da zero e vuoi evitare il default al primo tentativo. È la tua base.
E non ti vincola al suo stile. Se vuoi tutte le altre regole ma solo font sans-serif, modifica il markdown e dì: "usa solo Geist, Google Sans o DM Sans." Claude adatta il file.
2. Impeccable (la cassetta degli attrezzi)
Realizzata da Paul Bakaus, è diventata una delle preferite dalla community, superando 45.9k stelle su GitHub in poco tempo. Ed è facile capire perché.
La cosa interessante sono i comandi. C'è il puro /impeccable, ma viene fornito con circa 20 sottocomandi che puoi chiamare a seconda del contesto:
- /impeccable animate aggiunge animazioni di introduzione e movimento in modo coeso, che abbia senso per la pagina
- /impeccable quieter esegue un audit del "rumore" nel design (troppi gradienti, peso del font pesante su ogni titolo, emoji sparse) e taglia l'eccesso, portando eleganza invece di grida
- /impeccable audit esegue un controllo di qualità e accessibilità
- /impeccable document genera un design.md che cattura l'intero sistema di design per qualsiasi agente possa leggerlo in seguito
Sotto il cofano, ha 46 regole deterministiche per il rilevamento della spazzatura—quelle che funzionano senza dipendere dalle supposizioni del modello. Cattura i pattern generati dall'AI con precisione.
Quando usarla: Per iterare su ciò che hai già. Hai una pagina pronta e vuoi domare l'esagerazione? quieter. Manca di vita? animate. In due prompt, il sito cambia livello.
Un dettaglio che va oltre lo strumento: Impeccable ha una scheda "slop" che mostra i pattern che insegna all'AI a evitare. Guarda tu stesso questa lista. Imparare a riconoscere che un bordo di accento sul lato di una card è diventato un cliché dell'AI ti fa progettare meglio anche manualmente.
3. UIUX Pro Max (quella che costringe Claude a pensare)
Questo è un database di design potenziato, ed è il più stellato della lista: ha superato 105k stelle su GitHub. Ci sono 67 stili UI, 161 palette di colori, 57 coppie di font, 99 linee guida UX e 16 stack tecnologici in modo che sappia come implementare in ogni framework.
Il suo punto non è darti codice velocemente; è l'opposto. Costringe Claude a ragionare prima di scrivere qualsiasi riga. Esegue il tuo layout attraverso una ricerca in cinque domini in parallelo (prodotto, stile, colore, landing, tipografia), applica regole di ragionamento e solo allora restituisce un sistema di design completo, con gli anti-pattern da evitare già segnati.
https://x.com/nett0eth/status/2073490435066982554
Il risultato sono sezioni intenzionali, non decorative. Nel test, ha fatto cose come una transizione da chiaro a scuro proprio nel blocco KPI, specificamente per evidenziare il numero che deve saltare all'occhio. È il tipo di decisione che ti aspetti da un umano, non da un generatore.
Quando usarla: Quando hai chiarezza sul contenuto e vuoi profondità di design. E un consiglio che vale oro: più sei specifico su ciò che vuoi in ogni sezione, meglio è. Una skill non ti legge nel pensiero; amplifica la tua direzione. Inviare "usa la skill e fai un redesign più drastico, esplora le palette e le coppie di font" cambia completamente ciò che torna indietro.
4. Web Design Guidelines (il revisore, di Vercel Labs)
Questa è per la fine del progetto, non l'inizio. Viene da Vercel Labs, ha 29k stelle su GitHub, e controlla il tuo codice rispetto alla lista di Vercel di linee guida per l'interfaccia web, oltre 100 regole: focus da tastiera funzionante, mai disabilitare lo zoom, non bloccare l'incolla, indicatore di caricamento sui pulsanti, gerarchia dei titoli, ARIA, e così via.
E ha un trucco che mi piace: puoi chiedere a Claude di annotare i problemi direttamente sullo schermo dell'anteprima. Invece di leggere una lista, vedi sul sito, in arancione, dove manca un aria-label, dove la navigazione da tastiera si rompe, dove al CTA manca il focus. Diventa visivo.
Quando usarla: Quando il design è già buono e vuoi assicurarti che sia accessibile e che non metterà in imbarazzo nessuno che usa una tastiera o uno screen reader. È il QA prima di andare in produzione.
5. Astryx (il sistema di design pronto per agenti, di Meta)
https://x.com/nett0eth/status/2073826299789889884
La quinta è in un'altra categoria: non è una skill di gusto, è un intero sistema di design. Le 4 sopra insegnano a Claude a progettare meglio, uno schermo alla volta. Meta ha scommesso sul percorso opposto e ha aperto Astryx, il sistema di design che è cresciuto per 8 anni internamente, è diventato il più grande e più usato in azienda, e funziona in oltre 13.000 app. Ora è open source e, il dettaglio che conta qui, è pronto per agenti.
Il punto è questo: invece di sperare che il modello abbia buon senso per ogni componente, gli dai un sistema dove tutto è già nato accessibile e coerente. Ci sono oltre 150 componenti, 7 temi già pronti, modalità scura, e una CLI che sia la persona che l'agente usano allo stesso modo, leggendo lo stesso documento. C'è persino un CLAUDE.md nel repository affinché Claude capisca la casa prima di scrivere la prima riga di codice.
Funziona su React e StyleX, è in beta, e ha già 8.2k stelle.
Quando usarla: Quando vuoi coerenza di sistema, non solo uno schermo carino. Le skills raffinano il gusto del modello; Astryx garantisce che le fondamenta siano già solide prima di qualsiasi prompt. Le due cose si completano a vicenda.
Dove trovare altre skills
Queste 5 coprono circa il 90% di ciò che fa un web designer in Claude. Ma se vuoi esplorare, ci sono buone directory:
- UI Skills è focalizzato sui design engineer ma funziona anche per il web design. Elenca molte di queste 4 e ha roba su accessibilità e Shadcn.
- Type UI è il mio preferito per chi pensa prima visivamente. Scorri e vedi un'anteprima di ogni estetica (minimalista, neo-brutalismo, corporate sofisticata) e chiami quella che vuoi senza scrivere un paragrafo di istruzioni.
- MCP Market è un grande repository della community; vai su Agent Skills > Categories > Design Tools e c'è una lista infinita.
- skills.sh è dove Vercel e altri pubblicano ufficialmente, buono per averle direttamente dalla fonte.
Come creare la tua skill
Quando nessuna di queste si adatta al 100% al tuo brand o al tuo stack. È allora che ne crei una tua.
Nell'app di Claude o in Claude Code, vai su Customize > Skills > Create Skill > Create with Claude. Inizia chiedendoti cosa dovrebbe fare la skill.
La parte che separa una skill utile da una inutile è quanto sei specifico qui. Invece di "fai un design carino," dai regole di ragionamento. Per esempio:
- Identifica sempre prima il tipo di prodotto (dashboard, landing, app), perché il design cambia con il contesto.
- Deduci sempre l'obiettivo dello schermo prima di disegnare: quale azione conta di più e cosa l'utente dovrebbe notare per primo.
- Opta per una palette contenuta, sfondo e superficie più neutri.
- Un font principale per il corpo e, se necessario, un font display per i titoli grandi.
Claude avvia una conversazione e ti chiede informazioni sul tuo stack (token di Tailwind, per esempio), le tue proporzioni di spaziatura, i tuoi limiti di layout. Sii dettagliato; è questo che rende la skill valida. Alla fine, impacchetta tutto in un .md con cartelle di riferimento, e ci accedi tramite il tuo comando slash personale.
Ma creare la skill è la parte facile. La parte difficile è assicurarsi che non si rompa nella sessione successiva, ed è qui che entra in gioco l'asse che molti saltano. Ho già analizzato il framework in 8 passi di Matt Pocock per scrivere skills che si sostengono (innesco, struttura, direzione, potatura) in un articolo separato, e vale più di qualsiasi skill di design che installi:
https://x.com/nett0eth/status/2075976597513830727
Vale la pena leggerli insieme; è lo stesso ragionamento di "dare il righello giusto al modello" applicato a un livello superiore. La guida ufficiale di Anthropic, The Complete Guide to Building Skills for Claude, spiega anche i principi.
Ciò che resta
Claude non è un designer impressionante per impostazione predefinita. Questa non è una novità per chiunque abbia chiesto una landing page e ricevuto il solito gradiente viola.
La skill è come colmi questo divario. Non perché il modello sia diventato più intelligente, ma perché gli hai dato il righello che un vero designer porta nella testa. Il modello conta meno del ciclo che costruisci attorno ad esso.
Configuralo una volta. Il salto nell'output è abbastanza grande che non vorrai più lavorare senza.
La domanda rimane: quanti dei tuoi progetti stanno ancora uscendo con il solito gradiente viola solo perché non hai mai caricato una skill prima di chiedere? Salva e condividi 👍
Fonti / link:
- Frontend Design (Anthropic)
- Impeccable (Paul Bakaus)
- Web Design Guidelines (Vercel Labs)
- UIUX Pro Max
- Astryx (sistema di design pronto per agenti, di Meta)
- The Complete Guide to Building Skills for Claude
- Il mio ultimo articolo (framework in 8 passi per creare skills):
