Siti che non
sembrano fatti con l'AI

Taste è un pacchetto di skill, cioè file di istruzioni che Claude carica da solo quando deve disegnare un'interfaccia. Gli impediscono di farti la solita pagina uguale a tutte le altre e lo spingono su layout, caratteri, spazi e animazioni.

Licenza MIT. Si installa dal terminale con un comando.

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

Se vuoi solo la skill principale, il suo nome di installazione è design-taste-frontend.

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

In cima al file della skill ci sono tre manopole da 1 a 10. DESIGN_VARIANCE decide quanto osa col layout. MOTION_INTENSITY regola le animazioni. VISUAL_DENSITY dice quanta informazione sta in una schermata.

Hai già un sito da sistemare? Nel pacchetto c'è redesign-existing-projects: prima analizza l'interfaccia che hai, poi corregge layout, spazi e gerarchia.

Usa la skill design-taste-frontend.
Fammi la landing page di [prodotto] per [a chi è rivolta].
Prima scrivi in cinque righe la direzione visiva che hai scelto e perché.
Poi costruiscila tutta, senza sezioni lasciate a metà.

Impeccable è una skill sola con 24 comandi. Ti dà un vocabolario da designer per dire a Claude cosa sistemare: i caratteri, gli spazi, le animazioni, la passata finale.

Licenza Apache 2.0. Il comando si lancia dalla cartella del progetto.

npx impeccable install

Riavvia Claude Code e lancia /impeccable init. Guarda il progetto, ti chiede solo quello che non riesce a capire da solo e scrive un file PRODUCT.md con pubblico, scopo e tono. I comandi successivi partono da lì.

1. /impeccable typeset sistema scelta dei caratteri, gerarchia e dimensioni.
2. /impeccable layout sistema layout, spazi e ritmo visivo.
3. /impeccable animate aggiunge movimento dove ha un senso.
4. /impeccable polish è la passata finale prima di pubblicare.
5. /impeccable live genera varianti di un elemento e te le fa confrontare nel browser.

Quasi tutti i comandi accettano una zona su cui concentrarsi, scritta dopo il comando. La modalità live lavora sul sito che gira in locale sul tuo computer, non su un sito già online.

/impeccable audit the header
/impeccable polish the checkout form
/impeccable live

C'è anche un controllo che non usa l'AI: 61 regole che riconoscono i segni tipici di un sito fatto dall'AI, dai gradienti viola alle card dentro altre card. Funziona anche su un indirizzo web.

npx impeccable detect https://example.com

Playwright CLI è di Microsoft. Dà a Claude un browser vero: apre il tuo sito, clicca, compila i campi e fa gli screenshot. Così controlla da solo che tutto funzioni e guarda com'è venuto.

Licenza Apache 2.0. Serve Node.js 18 o più recente. Il primo comando installa lo strumento, il secondo installa le skill che Claude Code userà per guidarlo.

npm install -g @playwright/cli@latest
playwright-cli install --skills

Di default il browser lavora nascosto. Se vuoi vederlo mentre clicca, chiedi a Claude di aprirlo con --headed. Con playwright-cli show apri una dashboard con tutte le sessioni in corso e puoi prendere tu il controllo.

Usa playwright-cli per aprire http://localhost:3000.
Clicca tutte le voci del menu e tutti i bottoni. Compila e invia il form di contatto.
Fai uno screenshot di ogni sezione a 1440 pixel di larghezza e poi a 390.
Guarda gli screenshot e dimmi cosa non funziona e cosa è brutto: testi che escono dai bordi, spazi sbagliati, elementi sovrapposti.
Correggi e ricontrolla.

Cambia l'indirizzo con quello del tuo sito in locale. 390 pixel è la larghezza di un telefono: gli errori più frequenti stanno lì.

Awesome Design è una raccolta di 73 file DESIGN.md. Ognuno descrive in testo semplice lo stile di un sito famoso: colori, caratteri, componenti, spaziature, cosa fare e cosa evitare. Notion, Stripe, Apple, Linear, Vercel, Spotify, Airbnb, Ferrari.

Licenza MIT. Il comando si lancia dalla cartella del progetto e scrive DESIGN.md nella cartella principale. Serve Node.js 18 o più recente.

npx getdesign@latest add notion

Per un altro sito cambi l'ultima parola: stripe, apple, spotify. L'elenco completo esce dal comando qui sotto. In alternativa sfogli il catalogo su getdesign.md e scarichi il file a mano.

npx getdesign list

Leggi DESIGN.md prima di scrivere qualsiasi interfaccia.
Rispetta i colori, la scala dei caratteri e i componenti definiti lì.
Fammi la pagina dei prezzi con tre piani.

Non sono i design system ufficiali di quelle aziende. Sono analisi dei loro siti pubblici, fatte da terzi. Per questo dico "lo stile di Notion" e non "il design system di Notion". Usali per prendere una direzione. Nomi e loghi restano i loro.

img2threejs prende la foto di un oggetto e lo fa ricostruire a Claude in 3D con Three.js, tutto in codice. Non scarichi nessun file 3D: il modello è codice TypeScript che gira nel browser. È già pronto per essere animato e lo puoi mettere sul tuo sito.

Licenza Apache 2.0. Gli esempi si guardano e si ruotano su img2threejs.io: un paio di auricolari, una bici, un baule.

git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

Gli script interni vogliono Python 3.10 o più recente. Non c'è altro da installare. Poi in Claude Code alleghi la foto e lanci il comando del README.

/img2threejs Rebuild this object as a Three.js model, keep the proportions, angles, and colours.

La skill analizza la foto, costruisce il modello un passaggio alla volta e a ogni passaggio ti mostra il confronto fra la foto e il risultato.

Da una foto sola i lati nascosti non si vedono: li deduce specchiando quelli visibili e lo dichiara. Rende meglio sugli oggetti rigidi. I personaggi escono stilizzati, non fotorealistici.

1. Prima di costruire. Installa Taste e scegli uno stile con npx getdesign@latest add. Claude parte con le regole e con una direzione.
2. La costruzione. Chiedi la pagina. Un pezzo alla volta viene meglio di tutto il sito in un colpo.
3. I ritocchi. Passa Impeccable: typeset, layout, animate e alla fine polish.
4. Il controllo. Fai aprire il sito a Claude con Playwright, su computer e su telefono.
5. L'effetto. Se nella pagina ci sta un oggetto in 3D, lo fai con img2threejs.

Leggi DESIGN.md e usa la skill design-taste-frontend.
Costruisci la home di [prodotto] per [a chi è rivolta].
Quando hai finito aprila con playwright-cli e fai gli screenshot a 1440 e a 390 pixel di larghezza.
Guardali e correggi quello che non va.
Alla fine scrivi in tre righe cosa hai fatto e cosa non hai potuto verificare.

Non servono tutti e cinque dal primo giorno. Parti da Taste e da Playwright: il primo alza il livello di partenza, il secondo trova gli errori che tu vedresti solo aprendo il sito.