Vai al contenuto principale

Strumenti della guida

Claude Code Claude Code shadcn/ui shadcn/ui
~36 min in totale Agg. 3 ago 2026

Da un brief confuso a una UX/UI completa

Da tre righe confuse a un’app che il cliente apre sul suo telefono. Le decisioni da prendere prima, e il briefing con cui Claude Code la costruisce in un’ora.

Un cliente ti scrive di getto: «vorrei una specie di Tinder per cani». Fra due settimane incontra un investitore e vuole fargli vedere qualcosa che si tocca, non delle slide.

Lì dentro non ci sono schermate, non c’è un percorso, non c’è uno stile. La mossa naturale — incollarlo in Claude Code e chiedere l’app — non funziona, e non perché l’agente sia scarso: esegue decisioni, non le prende. Quello che non gli dici lo inventa, in silenzio.

Allora le decisioni le prendi prima tu, e gliele scrivi: le schermate, il percorso, lo stile, gli stati vuoti. Poi diventano un file solo, glielo dai, e l’app esce da lì.

Questo è quello che ne esce

Il risultato prima del metodo: PawSoul, dieci schermate, dati finti ma coerenti.

Vetrina, iscrizione, registrazione del peloso, schede da scorrere, match, chat. Nessuna schermata vuota, nessun testo segnaposto.
Un briefing solo ~1 ora di esecuzione Claude Code · Opus 5 pawsoul.vercel.app

Il briefing che l’ha prodotta è lungo seicento righe, e non l’ha scritto nessuno a mano: l’ha scritto Claude Code, leggendo due documenti decisi prima. Quei documenti li scrivi nelle parti che seguono, sul tuo progetto.

Ti serve solo Claude Code e una cartella vuota.

Parte 1 Dal brief confuso al documento UX/UI

Domande frequenti

Devo saper programmare per seguire questa guida?

No, ma devi saper leggere quello che esce. Non scrivi tu i componenti: li fa generare a Claude Code. Ti serve però capire quando il risultato non rispetta il brief, e quello è un lavoro di occhio, non di sintassi.

Perché tanta preparazione prima di far generare il codice?

Perché un agente non indovina le cose che il cliente non ha detto: le inventa. Ogni decisione presa prima — flusso, schermate, palette, componenti — è una cosa in meno che verrà inventata a caso e che dovrai rifare dopo.

Quanto tempo serve davvero?

La lettura è di poco più di mezz’ora. Rifare il percorso sul tuo progetto — brief, documento, scelte, generazione e giro di controllo — sono più o meno due ore e mezza, di cui la metà passa nella preparazione del briefing.

Da brief confuso a UX/UI completa Un brief vago diventa un’app navigabile. Spot prodotto da una foto Una foto diventa uno spot animato, senza codice. Far guardare i video a Claude Claude guarda i tuoi video e li trasforma in testo. Higgsfield in Claude Code Genera immagini e video mentre programmi in Claude Code. Da un Loom a una pagina web Un video schermo diventa una pagina web, senza codice. Video Shorts con NotebookLM Le tue fonti diventano uno short verticale. Landing luxury su Lovable Landing page di lusso con un solo prompt. Excalidraw in locale Excalidraw gratis sul tuo computer, senza codice. Mistral OCR nel flow Estrai testo dai documenti con Mistral OCR. Claude SEO nel terminale 25 skill SEO gratis dentro Claude Code. Google Search Console dentro Claude Code I dati di Search Console dentro il terminale. Routine di Claude Code Claude che lavora da solo, a computer spento. Clonare una landing in React con v0 Clona una landing reale in codice React. Context economy con Claude Lavora leggero e non bruciare i limiti di Claude. Dal prompt alla skill auto-evolutiva Skill Claude che imparano dai tuoi errori. Da NotebookLM a Canva: presentazioni Slide da NotebookLM, finalmente editabili in Canva. La mappa per capire ogni tool AI 12 categorie per incasellare qualsiasi tool AI. PNG trasparenti con ChatGPT PNG con trasparenza reale, non la scacchiera finta. Infografiche animate con Gemini Infografiche che si animano in loop con Gemini. Ricerca di mercato con Deep Research Deep Research come tuo analista di mercato. Farti citare dai motori AI (AEO) Diventa una fonte che ChatGPT e Perplexity citano.