Quattro passi, un paio di minuti
La decisione è presa nella parte 2: Next.js e shadcn/ui, montati insieme dalla modalità Create. Qui si esegue, e alla fine hai un progetto che gira sul tuo computer — creato e acceso da Claude Code, senza mai aprire il terminale.
Fallo mentre leggi: sono quattro passaggi e in nessuno devi scrivere codice. Il comando non lo scrivi tu — te lo compone la pagina Create con dentro le tue scelte — e non lo lanci nemmeno tu: lo esegue Claude Code. Il terminale resta chiuso.
1. Apri la pagina Create
ui.shadcn.com/create — è la voce Create nella barra in alto del sito. Quello che si apre non è un modulo da compilare: è un’anteprima viva con i controlli a sinistra — tema, colori, font, raggio degli angoli — e a destra un pezzo di applicazione vera che cambia mentre tocchi le voci.
Si può, ed è divertente. Ma i colori di PawSoul non si scelgono a occhio da questa pagina: vengono dalla direzione estetica decisa col cliente, ed è il lavoro della parte 4. Adesso lascia il tema com’è e prendi il comando.
2. Get Code: scegli, non configurare
Premi Get Code e si apre un pannello sopra l’anteprima. Tre gruppi di scelte, e basta: per PawSoul Template → Next.js, Base → Base UI, e gli interruttori li lasci come sono.
«Base» cos’è. Il motore invisibile sotto i componenti: gestisce la tastiera, il tocco fuori dal pannello, il blocco dello scorrimento — i casi che sul tuo computer non capitano mai e sul telefono del cliente sì. Le tre voci — Base UI, React Aria, Radix UI — fanno la stessa cosa in modi diversi. Base UI è già selezionata: lasciala così.
Gli interruttori. «Create a monorepo» e «Enable RTL support» servono a progetti che oggi non stai facendo. Spenti.
In fondo al pannello c’è Copy Command. Il comando non lo scrivi tu: lo hanno composto le tue scelte, e quel --preset con la sigla in coda è il tema che stai portando con te.
3. Passa a Claude Code e scegli la cartella
Il comando ce l’hai negli appunti, e il terminale non lo apri: lo esegue Claude Code per te. Aprilo, e prima di incollare guarda i chip in alto nella sua finestra: dicono dove sta lavorando.
Crea la cartella che conterrà i progetti, se non ce l’hai già: una cartella qualsiasi, chiamala progetti. La cartella di PawSoul non la crei tu: la crea il comando, qui dentro.
Puntaci Claude Code: dal chip della cartella scegli progetti. È l’unico controllo che conta — se il chip dice un’altra cosa, il progetto nasce altrove.
Adesso incolla. Al comando aggiungi solo come si chiama il progetto: la domanda «What is your project named?» arriva durante l’installazione, e a quella risponde lui.
Il comando è quello che hai copiato al passo 2 — il tuo «--preset» avrà la sigla del tuo tema, non questa.
Esegui pnpm dlx shadcn@latest init --preset b313IbnLYe --template next e chiama il progetto pawsoul
Da qui non tocchi più niente per un paio di minuti. Quando ha finito, Claude Code ti riassume cosa è stato creato: fra i file c’è components/ui/button.tsx. Quel file è già tuo — è il primo mobile, e da qui in avanti lo cambi chiedendolo a lui.
4. Accendi il progetto e guardalo
La cartella pawsoul adesso esiste dentro progetti. Chiedi a Claude Code di entrarci e di accendere il progetto — non serve riaprirlo né spostarsi a mano.
Entra nella cartella pawsoul, avvia il server di sviluppo e dimmi su che indirizzo lo apro
Ti risponde con l’indirizzo: localhost:3000, o 3001 se la 3000 è già occupata da qualcos’altro, come qui. Aprilo nel browser.
I quattro passi in una riga sola, senza tema — da tenere per la prossima volta.
Crea le fondamenta del progetto in questa cartella: esegui pnpm dlx shadcn@latest init --template next, chiama il progetto pawsoul e lascia Base UI. Poi entraci e avvia il server di sviluppo. Le fondamenta ci sono, ma sono ancora quelle di serie: il pulsante è verde perché era il tema predefinito, non perché l’abbiamo scelto. Nella parte 4 si dà il gusto: si sceglie la direzione estetica e la si scrive come istruzioni, invece di lasciarla decidere all’agente.