Impeccable: il sito che non sembra fatto dall'AI

Cos'è e perché conta

Apri il tuo sito e lo vedi subito: l'ha fatto l'AI. Inter ovunque, una sfumatura dal viola al blu, card dentro altre card, testo grigio su uno sfondo colorato. Il README di Impeccable li elenca come i segni che tornano in ogni progetto: tutti i modelli di AI hanno studiato gli stessi siti fatti con lo stampino.

Impeccable serve a toglierli. È una skill, cioè un pacchetto di istruzioni per Claude Code, con 24 comandi che diventano un vocabolario comune tra te e lui. In più c'è un rilevatore con 62 regole fisse che gira senza AI e senza chiavi API. È open source su GitHub, con licenza Apache 2.0 e più di 90.000 stelle a fine ottobre.

È per chi costruisce da solo con Claude Code, senza designer. Per disegnare una pagina nuova da zero c'è un'altra guida, GUSTO. Questa parte da un'altra domanda: il sito ce l'hai già, come gli togli la faccia da AI?

1. Cosa ti serve e come la installi in Claude Code

Ti servono Claude Code, la cartella del progetto e una versione recente di Node.js, il programma che fa girare npx (controlla con node -v nel terminale). Poi:

1. Dalla cartella principale del progetto lancia l'installer, la riga qui sotto.
2. Scegli gli strumenti che usi tra quelli che trova, per esempio Claude Code, e se installarla in questo progetto o in tutti.
3. Quando ti propone il controllo automatico a ogni modifica, di' sì: lo vediamo al punto 5.
4. Riavvia Claude Code, così carica la skill.

npx impeccable install

In alternativa c'è il plugin: in Claude Code scrivi /plugin marketplace add pbakaus/impeccable, poi apri /plugin, installa Impeccable da Discover e riavvia. Io uso l'installer: è la strada che il README consiglia, e il controllo automatico arriva con lui.

2. Il primo comando: /impeccable init

Tutti i comandi passano da /impeccable. Il primo, una volta per progetto, lo scrivi nella chat di Claude Code:

/impeccable init

Prima legge il progetto: documenti, funzioni, codice, immagini. Poi ti chiede solo quello che manca: per chi è il prodotto, in che situazione lo usano, a cosa serve, quali vincoli rispettare. E ti fa confermare quello che ha capito da solo.

Poi scrive PRODUCT.md, un file di testo nel progetto, con i fatti su cui siete d'accordo e le decisioni aperte. Serve perché ogni comando parte da lì e sa a chi parla la pagina, invece di indovinarlo. Rileggilo e correggilo; se il prodotto cambia, rilancia init.

Se il sito ha già uno stile suo, scrivi anche /impeccable document: lo mette in DESIGN.md, e il rilevatore controlla che le pagine non se ne allontanino.

3. Controlla il tuo sito in un minuto, senza AI

La parte che preferisco: il rilevatore gira dal terminale, senza Claude e senza chiavi. Al posto di src/ metti la cartella del codice, un file o un indirizzo, anche http://localhost:3000. Per gli indirizzi usa Chrome, Chromium o Edge; con --viewport 390x844 guardi la pagina grande come un telefono.

npx impeccable detect src/

• Trova i segni dell'AI: sfumature viola, testo riempito con una sfumatura, bagliori scuri, animazioni che rimbalzano, il font troppo usato.
• E i problemi di qualità: righe troppo lunghe, spazi stretti, pulsanti troppo piccoli da toccare, titoli che saltano un livello.

Guarda il numero con cui si chiude: 0, nessun problema principale; 2, problemi trovati; 1, qualcosa non è riuscito a controllarlo, quindi il controllo è fallito. Con --json ti dà i risultati in un formato che Claude legge al volo; --list-rules ti mostra tutte le regole.

E ricordati quello che dice il README: un controllo pulito è un indizio, non una prova. Quelle regole non hanno trovato niente, ma la pagina aprila comunque, anche sul telefono.

4. I cinque comandi da usare per primi sulla pagina che hai già

Si scrivono nella chat di Claude Code: /impeccable, il comando e cosa guardare, a parole. Cambia le parti tra [ ] con le tue.

critique: cosa la frena

Una revisione di design: dove la pagina sembra generica o confusa e cosa sistemare prima. Non cambia niente, ti dà un resoconto.

/impeccable critique la home page. Chi arriva qui deve [scaricare l'app]. Dimmi cosa la fa sembrare fatta con l'AI e cosa sistemeresti per primo.

audit: i controlli tecnici

Accessibilità, velocità, temi, telefono. Ogni problema ha una priorità da P0, che blocca, a P3, rifinitura. Anche audit lascia il codice com'è.

/impeccable audit la pagina dei prezzi. Per ogni problema dimmi chi danneggia e come si sistema. Non cambiare ancora niente.

distill: togli il superfluo

Toglie quello che intralcia l'azione principale: informazioni ripetute, decorazioni che non dicono niente. Se l'azione principale non è chiara, prima te la chiede.

/impeccable distill la home page. L'azione principale è [iscriversi alla lista d'attesa]. Togli le card dentro le card, tieni [i prezzi].

typeset: i caratteri

Gerarchia dei titoli, dimensioni, lunghezza delle righe. I font che hai li tiene, a meno che tu non chieda di cambiarli: se Inter è arrivato di default, diglielo.

/impeccable typeset tutto il sito. Il font attuale è di default, non del brand: proponimi un'alternativa adatta a [chi usa il prodotto].

polish: l'ultima passata

Rifinisce una pagina la cui direzione va già bene: stati che mancano, spazi, allineamenti. Cambia il codice, quindi guarda le modifiche. Se è la direzione a non andare, chiedi di rifarla.

/impeccable polish la pagina di iscrizione. Tieni layout e colori del brand. Alla fine dimmi cosa hai cambiato e rilancia npx impeccable detect.

5. Il controllo automatico a ogni modifica

Con l'installer, Claude Code riceve due hook, cioè comandi che partono da soli. Dopo ogni modifica a un file dell'interfaccia un controllo veloce cerca immagini rotte, testo che esce dai bordi, bagliori; a fine turno uno più ampio guarda i file toccati. Quello che trova torna a Claude, che lo corregge o ti spiega la scelta. Li vedi con /hooks.

• /impeccable hooks status ti dice se è attivo; /impeccable hooks off lo spegne, /impeccable hooks on lo riaccende.
• npx impeccable install --no-hooks installa senza hook, solo per quella volta.
• /impeccable doctor controlla che sia installato bene: se tace, potrebbe anche essere spento.

E se Inter è davvero il tuo font? Diglielo una volta: la regola resta attiva per gli altri font, e l'eccezione vale sia per l'hook sia per detect.

npx impeccable ignores add-value overused-font Inter --reason "Font del brand"

Gli errori più comuni

• Fidarsi di un detect pulito. È un indizio, non una prova: apri la pagina e chiedi una critique.
• Usare polish per cambiare direzione. Polish rifinisce, non ridisegna.
• Spegnere tutto per colpa di un font. Aggiungi l'eccezione con ignores add-value e tieni le altre regole.
• Mettere su git tutta la cartella .impeccable/, con schermate e file temporanei. Copia nel tuo .gitignore il blocco del README.

Checklist

• Dopo il riavvio Claude Code vede /impeccable
• PRODUCT.md esiste e l'ho riletto e corretto
• npx impeccable detect sul mio codice chiude con 0
• /impeccable hooks status dice che il controllo automatico è attivo

Domande frequenti