Il buon gusto per Claude Code

Cos'è e perché conta

Chiedi a Claude Code la pagina della tua app e ti arriva quasi sempre la stessa: titolo centrato, un'etichetta piccola sopra, tre riquadri con un'icona, una sfumatura morbida. Non c'è niente di sbagliato, ma non c'è niente di tuo. È la media di tutte le pagine che il modello ha visto.

Taste Skill serve a togliere quella media. È una Agent Skill, cioè una cartella di istruzioni e piccoli programmi che Claude usa quando gli chiedi una pagina. Il codice è aperto su GitHub con licenza MIT, quindi è gratis. Dà a Claude una direzione artistica, foto vere da archivi aperti e un controllo in un browser vero prima di dirti che ha finito.

È per chi fa tutto da solo e un designer non ce l'ha: founder, indie hacker, chi programma con l'AI. Funziona con qualsiasi tecnologia, da React all'HTML semplice. Il prezzo è il tempo: una pagina richiede da 30 a 45 minuti e qualche centinaio di migliaia di token.

1. Cosa ti serve e come la installi

Prima di installarla, controlla due cose sul tuo computer:

• Node 22 o più recente. Node è il programma che fa girare JavaScript fuori dal browser: per vedere la tua versione scrivi node -v nel terminale.
• Chrome, Edge o Chromium installato. Serve per aprire la pagina e fotografarla.

Non servono chiavi API e non installa niente di suo sul computer. Usa internet solo per cercare le foto. Poi la installi come plugin di Claude Code:

1. Apri Claude Code e scrivi /plugin marketplace add Leonxlnx/taste-skill. Aggiunge il catalogo che contiene la skill.
2. Poi scrivi /plugin install taste-skill@taste-skill. La skill entra in Claude Code con il prefisso taste-skill, così non si confonde con le altre skill che hai.
3. Apri una sessione nuova, così sei sicuro che Claude la veda. Per aggiornarla più avanti c'è /plugin update.

Oppure la installi dal terminale con skills, un programma che installa le skill negli assistenti di programmazione:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

2. Come lavora, in sei passi

Dietro c'è uno studio: 248 siti raccolti da due gallerie di design, 156 da One Page Love e 92 dai Sites of the Day di Awwwards, di cui 247 caricati. A dare i voti non sono state persone ma modelli di AI, che li hanno giudicati da schermate e misure. Lo dice lo studio stesso.

Da lì escono le regole e venti direzioni, cioè venti modi di comporre una pagina. Quando gli chiedi una pagina, Claude fa così:

1. Legge la richiesta e fa l'inventario: da otto a dodici cose che ha solo il tuo prodotto e nessun concorrente. Il nome e cosa vuol dire, i numeri, il limite con cui vive.
2. Un programma, draw.mjs, pesca a caso tre direzioni tra quelle adatte alla richiesta, e Claude ne sceglie una. Tu non scegli: un modello lasciato libero prende sempre la soluzione più scontata.
3. Trova l'idea: una frase che lega una cosa del tuo inventario alla direzione scelta. Se la frase funziona anche per il tuo concorrente più vicino, la butta.
4. Costruisce la pagina con foto vere: prima le tue. Se non ne hai, assets.mjs cerca immagini del tuo mondo negli archivi aperti, come Wikimedia Commons, Openverse, il Met e l'Art Institute of Chicago (per i video anche Internet Archive e NASA), e mette i crediti sulla pagina.
5. Fa il controllo. lint.mjs legge il codice, inspect.mjs apre la pagina in un browser vero a 1440, 768 e 390 pixel di larghezza, fino al telefono, e segna FAIL dove una regola salta: titoli oltre le due righe, sfumature, schermate vuote. Claude deve correggere ogni FAIL.
6. Guarda le sue schermate, le giudica, corregge i tre problemi peggiori e ricontrolla. Al massimo tre giri.

Alla fine ti fa un resoconto: la direzione, l'idea, cosa non lo convince ancora e l'elenco delle foto con autore, licenza e fonte.

3. Il primo prompt: la pagina della tua app

Più gli dai, meglio lavora. Questo è il prompt che userei per la pagina di un'app di fitness fatta da un founder da solo. Cambia le parti tra [ ] con le tue:

Usa la skill design-taste-frontend per creare la landing page di [nome dell'app], un'app iPhone che [cosa fa, in una frase].
Per chi è: [chi la usa].
L'unica cosa che la pagina deve far fare: [scaricare l'app dall'App Store].
Cosa ha solo lei: [tre o quattro cose vere: un numero, un limite, un'abitudine].
Stack: [HTML semplice / Next.js].
Foto mie: [cartella con le foto vere, oppure: nessuna].
Non inventare recensioni, clienti o numeri. Alla fine dimmi la direzione uscita, l'idea e quali testi di esempio devo sostituire.

L'ultima riga conta. La skill non inventa recensioni, clienti o statistiche, ma riempie i buchi con testi di esempio e li elenca nel resoconto. Quelli li controlli tu, uno per uno.

4. Dagli il materiale che hai solo tu

Nello studio, le pagine con i voti più alti partivano da un'idea presa dal prodotto stesso, non dallo stile. Quindi il tuo lavoro è dargli quella materia prima:

• Il nome e cosa vuol dire. Può diventare il centro della pagina.
• Le tue foto vere: tu, il prodotto, il posto. Digli che sono tue e le mette prima di tutte. Una foto vera del prodotto finisce in grande nella prima schermata.
• Le schermate vere della tua app. Per un software sono l'immagine più forte che esista.
• Il limite: quello che non fai, o che fai solo in un certo modo.

Ecco il mio materiale per la pagina.
Nome: [nome], e vuol dire [significato].
Foto mie in [cartella]: sono vere, usale prima di qualsiasi altra.
Schermate dell'app in [cartella].
Numeri veri: [numeri].
Il limite che ci rende diversi: [limite].
Parti da queste cose per l'inventario e per l'idea, non dalla categoria.

5. Rifare una pagina che hai già

Se la pagina ce l'hai già, non ricominci da zero: rifare le pagine esistenti fa parte della skill. Prima di toccare qualcosa, apre la tua pagina in un browser vero, la misura e salva le schermate del prima. Tiene la tua tecnologia, i contenuti e quello che funziona, e cambia caratteri, colori, margini e titoli, e per ultimi i blocchi fatti in serie. Alla fine ti mostra prima e dopo.

Usa la skill design-taste-frontend per rifare la pagina in [percorso o indirizzo locale]. Prima registra com'è adesso, con misure e schermate. Tieni stack, contenuti, link e form che funzionano. Alla fine mostrami prima e dopo a tutte e tre le larghezze e dimmi cosa hai cambiato.

6. Dashboard e schermate dell'app

Funziona anche per le schermate dove si lavora: dashboard, pannelli di amministrazione, impostazioni. Qui segue un percorso suo, da uno studio a parte su 23 schermate di prodotti veri: draw.mjs --app pesca uno stile per il tuo tipo di prodotto, e inspect.mjs --app controlla con regole sue, come il colore solo sui dati e i numeri allineati.

Usa la skill design-taste-frontend per la dashboard di [app]: è una schermata dove si lavora, non una pagina da leggere. Chi la usa: [chi]. La domanda a cui deve rispondere per prima: [domanda]. Dati realistici che tornano: [dati o file]. Usa gli stessi colori e caratteri della mia landing page.

Gli errori più comuni

• Lanciarla senza guardare quanto uso ti resta. Una pagina sono da 30 a 45 minuti e qualche centinaio di migliaia di token: su un piano con limiti è una bella fetta. Falla quando hai margine.
• Dargli una richiesta di una riga. Senza il tuo materiale l'idea viene dalla categoria, e la pagina torna a somigliare a tutte le altre.
• Usarla senza Node 22 o senza Chrome. L'ispettore non parte: Claude fa solo il controllo del codice, guarda schermate fatte in un altro modo e ti dice che l'ispettore non ha girato.

Checklist

• Ho Node 22 o più recente e Chrome, Edge o Chromium
• Taste Skill è installata e Claude la riconosce
• Nel prompt ci sono nome, cosa fa, per chi è e l'unica cosa da far fare
• L'ispettore chiude con zero FAIL a 1440, 768 e 390
• Ho sostituito i testi di esempio elencati nel resoconto
• I crediti delle foto sono in fondo alla pagina

Domande frequenti