Taste Skill è una skill open source gratuita (licenza MIT) che insegna a Claude Code, Codex e Cursor a costruire pagine web con un'impostazione grafica precisa invece del solito template "da AI". Si installa con un comando, richiede Node 22 e Chrome, non usa chiavi API e controlla da sola la pagina in un browser vero prima di consegnartela. Il 5 novembre 2026 è stata riscritta da zero con la versione 2.5 e oggi, 7 novembre, è uscita la 2.5.1: molte guide in giro descrivono ancora la versione vecchia.
In questa guida ti spiego cos'è la Taste Skill per Claude Code, come installarla nel modo giusto, cosa fa davvero a ogni build e quando invece non ti serve. Lo guardo da sviluppatore che costruisce siti per aziende in Next.js: mi interessa capire se il risultato regge davanti a un cliente vero, non solo in uno screenshot.
Cos'è la Taste Skill e perché se ne parla
Chi usa un agente AI per fare un sito conosce il problema. Chiedi una landing page e ottieni sempre la stessa: sfondo con gradiente viola, titolo centrato con emoji, tre card con icona tutte uguali. La pagina funziona, ma si riconosce a colpo d'occhio come generata.
La Taste Skill nasce per togliere questo effetto. Il nome viene da "taste", gusto: l'idea è dare all'agente una direzione artistica prima che scriva una riga di HTML.
- Autori: Leon Lin (Leonxlnx su GitHub) e blueemi.
- Repository: Leonxlnx/taste-skill, con circa 111 mila stelle e 7.500 fork al 7 novembre 2026.
- Licenza: MIT, quindi gratis anche per uso commerciale.
- Agenti supportati: Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Antigravity e in generale chi legge i file SKILL.md.
- Nome tecnico della skill:
design-taste-frontend.
Se le skill sono una novità per te, parti da come funziona una skill e come se ne crea una da zero: la Taste Skill è un esempio avanzato dello stesso meccanismo.
Cosa cambia con la versione 2.5 (e perché le guide vecchie sbagliano)
La storia recente della skill corre veloce. La 2.0 è uscita il 13 ottobre 2026, la 2.1 il 19 ottobre con il supporto a dashboard e schermate di app, la 2.5.0 il 5 novembre e la 2.5.1 il 7 novembre.
La 2.5.0 non è un aggiornamento: è una ricostruzione completa. Il changelog ufficiale dice che sostituisce la pipeline della 2.1 e i suoi script. Questo ha due conseguenze pratiche.
- Le guide che parlano dei tre "dial" (variazione del layout, intensità delle animazioni, densità) descrivono una versione sperimentale precedente, oggi spostata nel repository delle versioni classiche.
- La documentazione sul sito ufficiale al momento descrive ancora la 2.1.5, con nomi di script diversi da quelli della 2.5. Per la versione attuale fa fede il README su GitHub.
Il mio consiglio: prima di seguire un tutorial, controlla con quale versione è stato scritto. Se cita comandi che non trovi nel README, è vecchio.
Come installare la Taste Skill in Claude Code
Ci sono tre strade e installano tutte la stessa cartella. Per Claude Code la più pulita è il plugin, perché mette la skill sotto il prefisso taste-skill: e non va in conflitto con le altre skill che hai già.
Prerequisiti
- Claude Code installato e funzionante. Se non l'hai ancora, segui la mia guida all'installazione di Claude Code su Windows, Mac e Linux.
- Node 22 o superiore. Gli script della skill girano con Node.
- Chrome, Edge o Chromium installato. Serve per il controllo nel browser. Se è in un percorso strano, imposta la variabile
CHROME_PATH. - ffmpeg (facoltativo). Serve solo per le foto in WebP e per il ritaglio da telefono dell'immagine principale.
I passaggi
- Controlla Node: lancia
node -vnel terminale e verifica che la versione sia 22 o superiore. - Apri Claude Code nella cartella del progetto.
- Aggiungi il marketplace: scrivi
/plugin marketplace add Leonxlnx/taste-skill. - Installa il plugin: scrivi
/plugin install taste-skill@taste-skill. - Aggiorna quando serve: con
/plugin updatepassi alle versioni nuove, che in questo periodo escono ogni pochi giorni.
L'alternativa con npx skills
Se usi più agenti, puoi installarla con la CLI npx skills:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Per Codex i comandi sono codex plugin marketplace add Leonxlnx/taste-skill e poi codex plugin add taste-skill@taste-skill, seguiti da una nuova sessione. Se vuoi tenerla aggiornata con git pull, clona il repository e usa lo script install.sh, che crea un collegamento invece di copiare i file.
Prima di installare qualsiasi plugin, ricordati che esegue codice sulla tua macchina. Ho spiegato i rischi concreti nell'articolo su Plugin4Shell e la sicurezza dei plugin.
Come si usa: cosa succede a ogni build
Non devi richiamarla a mano. Chiedi a Claude Code di costruire o rifare il sito di un'azienda e l'agente carica la skill da solo. Da lì segue un percorso preciso.
1. Classifica il tipo di attività
Ogni build parte decidendo che pagina è: software, gaming, tech, product, service o place. Da questa scelta dipende tutto il resto. Un bar o uno studio professionale non avranno mai effetti 3D; un software sì.
2. Sceglie palette, font e layout
Gli script assegnano una palette pensata per quel settore, una coppia di font da Google Fonts e uno degli undici layout testati per la parte alta della pagina (diviso, centrato, foto, collage, editoriale e altri). Così due progetti di fila non escono uguali.
3. Costruisce da una base comune
La pagina parte da un file iniziale con regole fisse: una sezione per schermata su desktop a 1440x900, margini sinistro e destro identici, barra di navigazione fissa, footer di chiusura a schermo intero. Testi semplici, un solo sistema grafico.
4. Usa foto vere invece di disegni
Per locali, negozi e servizi la skill pesca da una libreria di fotografie con licenza aperta (tra cui Wikimedia Commons e Unsplash). Le immagini sono segnate come segnaposto e non vengono mai spacciate per i locali, il personale o i prodotti del cliente. I crediti finiscono in una riga del footer.
5. Si controlla in un browser vero
Qui sta la differenza rispetto a un semplice prompt. La skill apre la pagina in Chrome senza interfaccia a quattro larghezze (1440, 1024, 768 e 390 pixel) e cerca problemi concreti: immagini vuote, contrasto basso, colonne storte, testo segnaposto, indirizzi inventati, immagini lente su rete debole.
Poi entra in gioco il "finish gate": la build non si chiude finché resta un errore correggibile, con un massimo di tre giri. Il risultato finale è una riga sola, per esempio GATE: PASS oppure GATE: OPEN se i tre giri sono finiti. In Claude Code questo controllo è agganciato come hook di stop, quindi l'agente non può dichiarare finito il lavoro saltando la verifica.
Con quali framework funziona
Su una cartella vuota crea una pagina statica in HTML e CSS. Su un progetto esistente in React, Vue, Svelte, Astro o Tailwind lavora dentro lo stack che hai già. Una richiesta in Next.js viene costruita come export statico.
Questo punto per me conta molto. Io faccio siti in Next.js con un CMS dietro: un export statico va bene per una landing o una pagina di presentazione, ma non sostituisce un sito con area editoriale, blog e integrazioni. Se ti stai chiedendo quale base scegliere, ne parlo in WordPress vs Next.js.
Quanto costa usare la Taste Skill
La skill è gratuita. Il costo vero sono i token del modello che la esegue. Il sito ufficiale indica circa 30-45 minuti e qualche centinaio di migliaia di token per una build completa con il ciclo di correzione: il dato si riferisce alle versioni 2.1 e la 2.5 non ne pubblica uno nuovo.
Con un abbonamento Claude significa consumare una bella fetta dei limiti in una sola pagina. Prima di lanciarla su un progetto grosso, leggi come tenere sotto controllo i token in Claude Code. Il mio criterio: la userei per la prima bozza di una landing, non per ogni piccola modifica di stile.
Esiste anche TasteCode, un'app desktop gratuita e open source dello stesso team, con un agente di design integrato che lavora con Codex, Claude Code e Grok.
Limiti e cose da controllare prima di usarla con un cliente
La skill migliora molto la prima bozza, ma ci sono punti che un agente non può decidere al posto tuo.
- Non conosce il tuo brand. Palette e font vengono assegnati per settore. Se l'azienda ha già un'identità visiva, va imposta all'agente, altrimenti esce un sito bello ma non suo.
- Le foto sono segnaposto. Vanno sostituite con quelle reali prima di andare online. Le licenze CC BY e CC BY-SA richiedono il credito, e la CC BY-SA ha obblighi in più se modifichi l'immagine.
- Font da verificare. I font arrivano da Google Fonts: per un sito italiano valuta di ospitarli in locale, per evitare di inviare gli IP dei visitatori a server esterni.
- Mancano le parti legali. La skill non scrive privacy policy, cookie banner né la partita IVA in homepage, che per un'azienda italiana è obbligatoria.
- Effetti solo dove servono. Shader e scene allo scroll sono limitati a pagine software, tech e gaming, con un tetto di quattro contesti WebGL e versioni statiche per telefono. È una scelta sensata, ma va saputa.
- Attenzione alle copie. Esistono fork e versioni "v3" non ufficiali. Installa solo da Leonxlnx/taste-skill. Il progetto dichiara anche di non avere token o criptovalute: chi ne propone una non c'entra.
Taste Skill, Claude Design e le altre skill di design
Nelle discussioni sul repository qualcuno chiede se Claude Design di Anthropic non copra già questa parte. Sono due cose diverse: Claude Design lavora su un'area dedicata dentro Claude, la Taste Skill agisce dentro il tuo progetto di codice, con i tuoi file e il tuo stack.
Tra le ricerche collegate su Google compaiono spesso Impeccable e la skill di Emil Kowalski, altre skill di design molto cercate. Le versioni precedenti della Taste Skill (minimalist-ui, high-end-visual-design, industrial-brutalist-ui, gpt-taste) vivono ora nel repository taste-skill-classics e si installano con lo stesso nome di prima. Per una panoramica delle estensioni che vale la pena tenere, vedi le migliori skill di Claude Code.
Quando ha senso usarla (e quando no)
Ha senso se:
- devi fare una landing, una pagina di presentazione o il restyling di un sito vetrina;
- usi già Claude Code o Codex e le tue pagine escono tutte uguali;
- vuoi una bozza credibile da far vedere a un cliente prima di investire nel design definitivo.
Non ha senso se:
- l'azienda ha già un design system rigido da rispettare alla lettera;
- il progetto è un e-commerce o un gestionale con logica complessa: lì il problema non è il gusto grafico;
- non hai tempo di rivedere il risultato. Una pagina bella con testi e foto segnaposto non è un sito pronto.
Se ti serve un sito che vada oltre la bozza, con contenuti veri, SEO e integrazioni, è il lavoro che faccio con la realizzazione di siti web. Per agenti e automazioni dentro l'azienda trovi tutto nella pagina automazione AI.
Leggi anche
- Humanizer Claude: la skill che toglie i tic della scrittura AI
- Graphify per Claude Code: cos'è e quando conviene
- Plugin Claude: cosa sono e come installarli
- Codex vs Claude Code: quale conviene
Vuoi capire se una pagina fatta con un agente AI può andare online per la tua attività, o cosa serve per renderla un sito vero? Scrivimi e ne parliamo.
