Perché arricchire un sito web esistente con competenze?

Se hai mai avuto un’interfaccia generata da un’intelligenza artificiale, conosci il risultato. Carattere Inter, sfumatura dal viola al blu, carte nidificate, testo grigio su sfondo colorato, eroe centrato e morfismo in vetro per un look moderno. Lo stesso sito appare ovunque, indipendentemente dal progetto.

Questo fenomeno è spesso chiamato pendenza dell’intelligenza artificiale.

Il problema non è che i modelli siano incapaci. Conoscono la tipografia, i contrasti OKLCH e i ritmi verticali. Ma non li applicano spontaneamente. Mancano di un vocabolario di leadership e di un elenco chiaro di cosa evitare.

Le competenze cambiano la situazione. Forniscono comandi specializzati di Claude Code per verificare, correggere e perfezionare un’interfaccia esistente senza partire da zero.

Prerequisiti per iniziare

Prima di iniziare, assicurati di avere questi elementi.

  • Un account Claude Pro attivo

  • Codice Claude installato sul tuo computer

  • Un progetto di sito web già esistente sul tuo computer

Guida passo passo

Passaggio 1: apri Claude Code nella cartella del progetto

Avvia il tuo terminale, vai alla radice del progetto, quindi digita il comando claude per avviare la sessione.

Passaggio 2: installa la competenza di progettazione

Nel tuo terminale, esegui il comando npx skills add pbakaus/impeccable.

L’abilità si carica automaticamente. Ottieni 23 controlli specializzati che guidano ogni dimensione del design, come tipografia, colore, layout, movimento, microinterazioni e copia UX.

Passaggio 3: Definisci il contesto del tuo progetto

In Claude Code, digita il comando /impeccabile insegna.

L’abilità ti pone una serie di domande strutturate. Cerca di capire a chi è rivolto il tuo sito, quale stile vuoi adottare e quale estetica rifiuti esplicitamente.

Le risposte vengono salvate nei file PRODUCT.md e DESIGN.md nella radice del progetto. Questi file vengono riletti ad ogni ordine, in modo da non ripetere mai lo stesso brief.

Passaggio 4: verifica il sito nel suo stato attuale

Digita il comando di controllo /impeccabile. Puoi anche scegliere come target una pagina specifica con un comando come /impeccable audit landing.

L’abilità scansiona il tuo codice, lo confronta con 25 anti-pattern documentati, quindi ti invia un rapporto classificato in base alla gravità da P0 a P3. Ad esempio, può segnalare sfumature viola, caratteri sovrautilizzati, carte nidificate, contrasti insufficienti o gerarchie tipografiche interrotte.

Questa è la diagnosi. Tutto inizia da lì.

Passaggio 5: correzione tipografica e layout

Quindi continuare con /impaginazione impeccabile, quindi /impaginazione impeccabile.

Il primo comando imposta la gerarchia tipografica, le dimensioni e i ritmi verticali. Evita anche i caratteri più diffusi, a meno che il file DESIGN.md non li giustifichi esplicitamente.

Il secondo comando corregge la spaziatura, gli allineamenti, la lunghezza delle linee e le aree cliccabili sottodimensionate.

Passaggio 6: affermare la direzione visiva

A seconda del risultato desiderato, scegli il comando che corrisponde al gesto di progettazione.

  • /impeccabile più audace per rendere una sezione più assertiva

  • /impeccabile più silenzioso per calmare una zona rumorosa

  • /colorize impeccabile per rielaborare la tavolozza in OKLCH

  • /piacere impeccabile per aggiungere microinterazioni giustificate

Ogni ordine sa in quale modalità funziona, marca o prodotto, e adatta di conseguenza il proprio vocabolario. Una landing page non è una dashboard.

Passaggio 7: effettua il passaggio finale

Digita il comando /impeccable Polish sulla pagina che desideri consegnare.

Questo comando allinea il tuo codice con i token esistenti, esegue nuovamente il rilevatore anti-pattern e restituisce una pagina pronta per la spedizione.

Passaggio 8: prova su una pagina esistente

Apri un file del tuo sito, quindi chiedi a Claude Code di usare l’impeccabile abilità di controllare la pagina, correggere gli anti-pattern in P0 e P1, applicare un perfezionamento finale, quindi proporre una variante più assertiva dell’eroe in modalità brand.

Vai oltre con l’intelligenza artificiale e il design

Questa guida ti mostra come trasformare un sito web generico in un’interfaccia più professionale utilizzando le competenze di Claude. Per continuare, puoi applicare lo stesso metodo alle pagine di vendita, ai dashboard o alle schermate dei prodotti esistenti.

Leggi il seguito

Per collegare questo argomento a un flusso di lavoro aziendale più concreto: