Strumenti · Risorsa gratuita

Le 3 skill di design per Claude Code (e la libreria che le nutre)

impeccable, UI/UX Pro Max e skill-creator: come si installano, quando si usano, in che ordine. Più i DESIGN.md dei brand da cui far imparare la tua AI

Di Nicola Lampitelli · 6 minuti di lettura · aggiornata il

CondividiWhatsAppLinkedIn
Un laptop con una pagina web ordinata, tre tessere-strumento (squadra, tavolozza, pezzo di puzzle) e una pila di schede-modello
In questa guida

1.Come lo uso io

Le pagine e le piattaforme che costruisco con Claude Code passano tutte dalle stesse tre skill. Una toglie quell'aria da «fatto con l'AI» che rende tutti i siti uguali. Una mi dà stili, palette e caratteri già ragionati, così il design parte bene invece di partire generico. La terza mi fa creare le skill mie, perché le migliori che uso non le ho trovate online: le ho scritte sul mio modo di lavorare. Sotto c'è una libreria che non è una skill ma cambia tutto: i file DESIGN.md dei brand, da dare in pasto all'AI come riferimento.

2.Cosa ti serve

Claude Code

Installato e collegato al tuo account (Pro o Max). Come si fa è in fondo alla guida.

Node.js

Serve per i comandi npx. Nel Terminale scrivi npx --version: se non risponde, scaricalo da nodejs.org (versione LTS).

Python 3

Lo usa UI/UX Pro Max per le sue ricerche. Scrivi python3 --version: su Mac c'è quasi sempre; su Windows si scarica da python.org.

Un progetto

Una landing, un sito, un'app che stai costruendo con Claude Code. Anche appena iniziata.

3.Come funziona

Una skill è un insieme di istruzioni che Claude Code carica quando serve: le regole di un mestiere, scritte una volta. Le skill di design contengono gusto e regole (spaziature, tipografia, contrasto, movimento) che l'AI da sola applica a caso. Un DESIGN.md è un'altra cosa: la descrizione dello stile di un brand vero, colori, caratteri, ritmo, da usare come riferimento.

  1. 1

    RIFERIMENTO

    un DESIGN.md nella radice del progetto: «assomiglia a questo»

  2. 2

    COSTRUZIONE

    UI/UX Pro Max sceglie stile, palette e caratteri mentre Claude costruisce

  3. 3

    RIFINITURA

    impeccable rivede la pagina e toglie i difetti tipici dell'AI

  4. 4

    REGOLE TUE

    skill-creator trasforma le tue correzioni ricorrenti in una skill

SENZA SKILL

«Fammi una landing»: esce la solita pagina con il titolo enorme, tre card uguali, un gradiente viola. Corretta, dimenticabile.

CON LE SKILL

Parte da uno stile scelto, con regole di spaziatura e tipografia, e finisce con una revisione che trova i difetti prima di te.

Da qui in poi

Qui comincia la parte pratica.

Dimmi chi sei e la guida si apre tutta: i passi, gli errori tipici e il file per la tua AI. Le risorse nuove te le mando per email; il telefono serve per sentirci a voce, se ha senso.

Gratis. Lo compili una volta: le altre guide restano aperte su questo dispositivo.

Cosa trovi dopo

  1. 4Passo 1 · impeccable
  2. 5Passo 2 · UI/UX Pro Max
  3. 6Passo 3 · skill-creator
  4. 7Passo 4 · La libreria dei DESIGN.md
  5. 8In che ordine
  6. 9Se ti esce così
  7. 10Prima di costruire davvero
  8. 11Ora tocca a te
  9. 12Il prossimo passo
Per la tua AI

Non leggerla soltanto: falla applicare.

Questa guida esiste anche come file Markdown, il formato che le AI leggono meglio. In testa ha già le istruzioni: lo dai a Claude Code (o lo alleghi a Claude, a ChatGPT) e l'AI la applica al tuo caso, chiedendoti i dati che le servono. Niente da riscrivere, niente da spiegare.

Cosa ottieni: Le tre skill installate nel tuo progetto, un DESIGN.md di riferimento nella radice e una prima revisione della tua pagina fatta con impeccable.

Gratis. Ti chiedo chi sei e come trovarti: le risorse nuove arrivano per email. Come si installa.

Installala nella tua AI

Il file che scarichi non è un riassunto: è la guida intera più le istruzioni per l'AI, scritte in testa. Tu lo consegni, lei lo legge, ti fa le domande e produce il risultato. Qui: Le tre skill installate nel tuo progetto, un DESIGN.md di riferimento nella radice e una prima revisione della tua pagina fatta con impeccable.

Con Claude Code

Consigliato

Claude Code lavora dentro una cartella del tuo computer: legge il file, scrive i risultati lì e li ritrovi la prossima volta. Serve un account Claude con piano Pro o Max (non è nel piano gratuito).

  1. 1
    Installa Claude Code, una volta sola. Apri il Terminale (su Mac: cerca «Terminale» con Spotlight; su Windows: «PowerShell») e incolla il comando. Al primo avvio si apre il browser per entrare con il tuo account Claude.
    ComandoMac
    curl -fsSL https://claude.ai/install.sh | bash
    ComandoWindows (PowerShell)
    irm https://claude.ai/install.ps1 | iex
  2. 2
    Scarica il file dal riquadro «Per la tua AI» e mettilo in una cartella: quella del lavoro a cui vuoi applicarlo, o una nuova (per esempio guide-ai).
  3. 3
    Apri il Terminale in quella cartella. Il modo più semplice: scrivi cd, uno spazio, trascina la cartella dentro la finestra del Terminale e premi Invio.
  4. 4
    Avvia Claude Code scrivendo claude e premendo Invio. Poi incolla il comando della guida e rispondi alle domande, una alla volta.
    Terminalecosì, per esempio
    $ claude
    
    > Leggi il file guida-skill-design-claude-code.md e segui le istruzioni scritte all'inizio.
    
      Ho letto la guida. Prima domanda, una alla volta:
      qual è la richiesta che rifai più spesso?

Su claude.ai, senza installare niente

Apri una chat nuova su claude.ai, allega il file con la graffetta e scrivi la frase qui sotto. Se usi i Progetti, aggiungi il file ai contenuti del progetto: resta a disposizione in ogni chat.

Leggi le istruzioni all'inizio del file allegato e seguile.

Con ChatGPT o un'altra AI

Allega il file alla chat e scrivi la stessa frase. Le istruzioni sono pensate per Claude Code: dove parlano di cartelle e comandi, l'AI ti darà il testo da copiare al posto di scriverlo lei sul tuo computer.

Vale per qualunque assistente che legge i file allegati.

CondividiWhatsAppLinkedIn

Continua con

Vuoi che un sistema così lo costruiamo insieme nella tua azienda? Prenota la call conoscitiva: 30 minuti, senza impegno.