Le interfacce generate da un agente AI hanno un problema riconoscibile a colpo d'occhio: sembrano tutte la stessa pagina. Hero centrato, tre card sotto, gradiente viola. Taste Skill è l'antidoto: un insieme di Agent Skills per Claude Code, Codex e Cursor che fa progettare i siti con una direzione artistica precisa.
Cosa fa la v2
La skill predefinita, taste-skill (v2), fornisce all'agente:
- tre direzioni artistiche scelte tra 20 studiate;
- immagini reali da collezioni aperte (Wikimedia Commons, Openverse, Met), con i crediti inseriti nella pagina e solo file con licenza pubblico dominio, CC0, CC BY o CC BY-SA;
- un controllo del risultato in un browser reale a tre larghezze.
Il progetto indica una costruzione completa in circa 30-45 minuti a partire da un solo brief. Le versioni precedenti si basavano su tre parametri numerici (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) e restano disponibili come design-taste-frontend-v1 e design-taste-frontend-v2-experimental.
Requisiti
- Node 22 o superiore
- Chrome, Edge o Chromium installato
- Nessuna API key: la rete serve solo per cercare le immagini
Installazione
Tutte le skill con la CLI skills:
npx skills add https://github.com/Leonxlnx/taste-skillUna sola skill, per nome di installazione:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Come plugin di Claude Code, dentro Claude Code:
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skillSi aggiorna con /plugin update e le skill vivono nel namespace taste-skill:.
Codex:
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skillDa un clone locale (con link simbolici, aggiornabile con git pull): ./install.sh per Claude Code, ./install.sh --codex per Codex, ./install.sh --all-agents per entrambi.
Le skill disponibili
| Skill | Nome di installazione | A cosa serve |
|---|---|---|
| taste-skill | design-taste-frontend | Landing page, siti marketing, portfolio, pagine prodotto (default) |
| redesign-skill | redesign-existing-projects | Audit e correzione di un'interfaccia esistente |
| image-to-code-skill | image-to-code | Da riferimenti visivi a frontend |
| soft-skill | high-end-visual-design | UI calme e curate, contrasto morbido |
| minimalist-skill | minimalist-ui | Impostazione editoriale e sobria |
| brutalist-skill | industrial-brutalist-ui | Stile brutalista, tipografia Swiss |
| stitch-skill | stitch-design-taste | Regole per Google Stitch, con export DESIGN.md |
| output-skill | full-output-enforcement | Evita output incompleti e commenti segnaposto |
| gpt-tasteskill | gpt-taste | Variante più rigida per GPT e Codex |
| imagegen-frontend-web / -mobile, brandkit | stesso nome | Comp di siti, schermate mobile e brand kit (solo immagini) |
Quale scegliere
- Nuova pagina pubblica: taste-skill.
- Pagina esistente da migliorare: redesign-skill.
- Direzione visiva già decisa: soft, minimalist o brutalist.
- Prima le immagini, poi il codice: una skill di image generation oppure image-to-code.
- L'agente tronca l'output: aggiungi output-skill.
Per dashboard e interfacce di prodotto la skill predefinita non è la scelta indicata: il progetto consiglia minimalist-skill o soft-skill.
Come si usa
Non c'è un comando dedicato: dopo l'installazione l'agente segue la skill quando gli chiedi di costruire una pagina. Basta un brief, per esempio: «crea la landing page di una torrefazione artigianale a Genova: storia, prodotti, dove siamo», nominando la skill se vuoi essere sicuro che venga usata.
Il limite da conoscere
Taste Skill impone un gusto, non il tuo. Per un progetto con identità visiva già definita il complemento naturale è un file di design di progetto, come il design.md. Per altre skill di design vedi anche Awesome Design Skills e Impeccable.
Licenza MIT. Il progetto non ha alcun token o criptovaluta associati.