Cos'è Claude Design? Guida completa a prezzi, 7 metodi di creazione ed esempi di prompt [Aggiornamento 2026]

Il 18 giugno 2026, Claude Design ha ricevuto un importante aggiornamento.

Le funzionalità sono aumentate e l'interfaccia è cambiata.

L'ho verificato mentre lo usavo personalmente, quindi scriverò passo dopo passo dove cliccare sullo schermo.

Questo articolo è pensato per "imparare mentre lo si usa insieme".

Leggetelo mentre aprite effettivamente [claude.ai/design](//claude.ai/design).

Posso usarlo gratuitamente?

No, non puoi.

Claude Design è esclusivo per i piani a pagamento.

Puoi usarlo se hai un piano Pro ($20/mese). Non sono richiesti costi aggiuntivi.

Cos'è Claude Design?

È uno strumento AI che ti permette di creare slide, LP, prototipi di app, proposte e altro semplicemente dando istruzioni approssimative in italiano.

Anthropic lo ha rilasciato il 17 aprile 2026. Questo aggiornamento ne ha aumentato significativamente le funzionalità.

L'output è "Live HTML". Non è un'immagine statica; genera un design cliccabile e animato.

Come Leggere lo Schermo

Quando apri [claude.ai/design](//claude.ai/design), viene visualizzata questa schermata.

Schede Superiori

Area "Crea qualcosa di nuovo"

Scegli qui il tipo di cosa che vuoi creare. Sono presenti sette carte.

Sotto "Design", sono elencati i tuoi design passati.

Quando Claude Fa Domande di Approfondimento (Comune a tutte le carte)

Dopo aver selezionato una carta e inviato un prompt, se Claude determina che mancano informazioni, potrebbe visualizzare domande aggiuntive sul lato destro dello schermo.

Il contenuto delle domande cambia in base al prompt.

Ci sono elementi obbligatori e facoltativi.

Rispondi agli elementi e premi "Continua" per avviare la generazione.

Come Creare Slides (Materiali per Presentazioni)

Crea da qui materiali per seminari, slide per briefing e pitch deck.

Passo 1. Clicca su "Slides" nella Schermata Iniziale

Clicca sulla carta che dice "Presentazioni e pitch deck."

Passo 2. Inserisci il Contenuto delle Slide che Vuoi Creare

Cliccando si arriva a questa schermata.

"Di cosa tratta la presentazione?" viene visualizzato nella barra laterale sinistra.

Puoi scegliere tra tre metodi di input:

• Carica un documento: Crea slide da documenti esistenti come Word o PDF.
• Incolla i tuoi appunti: Incolla appunti o testo e falli strutturare.
• Deck esistente: Ricostruisci basandoti su un deck di slide esistente.

Se non alleghi nulla, inserisci semplicemente il contenuto in italiano nel campo di testo sottostante e premi Invia.

Esempi di Prompt

1Crea una slide introduttiva per un servizio di consulenza AI.
2Target: Liberi professionisti e freelance che non sono pratici di PC
3Durata: Per un seminario di 20 minuti
4Struttura: Problemi attuali → Cosa si può risolvere con l'AI → Dettagli del servizio → Tariffe → Come candidarsi
5Atmosfera: Amichevole, nessun gergo tecnico
6Aspetto: Semplice e facile da leggere, sfondo bianco

1Crea una slide di presentazione personale.
2Ex SE, attualmente insegno come usare l'AI
3Risultati: Automatizzate le operazioni con Claude Code, costruito un sistema per 300.000 yen/mese
4Target: Liberi professionisti principianti dell'AI
5Numero di slide: 5-7, facili da vedere con molto spazio bianco

1Crea una slide introduttiva su come usare Claude Code.
2Pubblico: Principianti che non hanno mai scritto codice
3Durata: 10 minuti
4Contenuto: Cos'è Claude Code → Passaggi di installazione → Primo comando → Fallimenti comuni e soluzioni
5Tono: Educato, gentile e non intimidatorio

Opzioni del deck (Opzionali)

• Ottimizza per Google Slides: Utilizza solo Google Fonts (comodo quando si apre in Google Slides).
• Aggiungi note per il relatore: Aggiunge automaticamente note vocali a ogni slide.

Passo 3. Attendi la Generazione

Ci vogliono alcuni minuti. Puoi controllare l'avanzamento nel pannello di sinistra.

Quando è finito, appare così.

Passo 4. Regola con i Pulsanti in Alto a Destra

Una volta terminata la generazione, appaiono i pulsanti in alto a destra.

"Ritocchi" è quello più usato. Basta inserire qualcosa come "Ingrandisci il titolo sulla prima slide" come in una chat, e lo sistemerà per te.

Punti da Notare

Decidi prima lo stile visivo delle slide.

Se dici "cambia tutti i colori" a metà, la coerenza tende a rompersi.

È più veloce decidere la struttura generale e poi sistemare i dettagli.

Come Creare Prototipi di Prodotto (Prototipi Animati)

Puoi creare schermate di app, flussi di prenotazione di servizi e mockup di servizi web.

Una volta finito, sarà in uno stato in cui puoi effettivamente cliccare e interagire.

Passo 1. Clicca su "Prototipo di prodotto" nella Schermata Iniziale

Clicca sulla carta che dice "Mockup interattivi di app."

Passo 2. Inserisci il Contenuto della Schermata dell'App che Vuoi Creare

Cliccando si arriva a questa schermata.

Proprio come per le Slides, inserisci il contenuto in italiano nel campo di testo e premi Invia.

I prototipi aumentano di precisione quanto più dettaglio scrivi. Includere quanto segue migliorerà la qualità:

• Che tipo di app: Sistema di prenotazione, gestione attività, schermata di pagamento, ecc.
• Numero di schermate: Quante schermate.
• Contenuto di ogni schermata: Cosa viene visualizzato.
• Flusso di interazione: Dove premere per passare al passo successivo.
• Dimensioni del dispositivo: Per smartphone (390×844px) o PC.
• Colore/Stile: Tema scuro, combinazione di colori vivaci, ecc.

Esempi di Prompt

1Crea un prototipo per un'app di prenotazione di un salone di bellezza.
2Su uno schermo per smartphone (390×844px).
34 schermate:
41. Home: Nome del salone, elenco menu (Taglio/Colore/Trattamento)
52. Selezione menu: Seleziona per procedere
63. Selezione data/ora: Calendario e fasce orarie
74. Conferma/Completamento: Dettagli prenotazione e pulsante "Prenota"
8Stile: Sfondo bianco, accenti rosa, design arrotondato
9Quando si tocca il pulsante "Prenota", passa alla schermata "Prenotazione Completata!"

Passo 3. Attendi la Generazione

Ci vogliono alcuni minuti. Quando è finito, appare così.

È in uno stato in cui puoi effettivamente interagire cliccando. Premere il pulsante "Prenota" fa passare alla schermata successiva.

Passo 4. Regola con i Pulsanti in Alto a Destra

Una volta terminata la generazione, appaiono i pulsanti in alto a destra.

"Ritocchi" è quello più usato. Basta inserire qualcosa come "Rendi bianco il colore di sfondo" o "Ingrandisci il carattere" come in una chat, e lo sistemerà per te.

Se Vuoi Aggiungere Animazioni

Claude Design non aggiunge animazioni per impostazione predefinita.

Se vuoi aggiungere movimento, specificalo esplicitamente.

1Ingrandisci il pulsante a 1.05x al passaggio del mouse, con una transizione di 200ms.
2Fade in + slide verso l'alto delle carte al caricamento della pagina, visualizzandole in ordine a intervalli di 150ms.

Come Creare Wireframe di Prodotto (Progettazione dello Scheletro)

Usalo quando vuoi decidere prima la "configurazione dello schermo".

Crea solo lo scheletro del layout, non un design dettagliato.

È adatto per confermare il flusso "l'utente procede in questo ordine."

Passo 1. Clicca su "Wireframe di prodotto" nella Schermata Iniziale

Clicca sulla carta che dice "Schermate e flussi a bassa fedeltà."

### Passo 2. Inserisci la Configurazione dello Schermo che Vuoi Creare

Cliccando si arriva a questa schermata.

Basta inserire il contenuto in italiano nel campo di testo e premere Invia. Se hai uno schermo che vuoi usare come riferimento, allegarlo con "Aggiungi uno screenshot" migliorerà la precisione.

Esempi di Prompt

1Crea un wireframe per un flusso di candidatura a un servizio di consulenza.
2Passaggi: Home → Descrizione servizio → Tariffe → Modulo di candidatura → Completamento
3Va bene finché posso vedere cosa posizionare su ogni schermata. Il design dettagliato non è necessario.

1Crea un wireframe per una LP di candidatura a un seminario.
2Sezioni: Sezione hero → Presentazione relatore → Contenuto → Quota di partecipazione → Modulo di candidatura
3In vista smartphone.

Passo 3. Attendi la Generazione

Quando è finito, appare così.

Lo scheletro dello schermo viene visualizzato con riquadri grigi. Usalo per confermare il posizionamento come "pulsante qui" e "immagine qui." I design dettagliati vengono realizzati con Prototipo di prodotto o Documento.

Passo 4. Regola con i Pulsanti in Alto a Destra

Una volta terminata la generazione, appaiono i pulsanti in alto a destra.

Istruire qualcosa come "Aggiungi la visualizzazione delle tariffe alla 3a schermata" in "Ritocchi" farà ulteriori correzioni.

Come Creare Documenti (LP, Proposte, Documenti)

Crea da qui landing page, proposte, report e curriculum.

Tra i 7 tipi di carte, questa è la più versatile.

Passo 1. Clicca su "Documento" nella Schermata Iniziale

Clicca sulla carta che dice "Curriculum, PDF, ecc."

### Passo 2. Inserisci il Contenuto che Vuoi Creare

Cliccando si arriva a questa schermata.

Una funzionalità unica della carta Documento è "Parlane."

Se inserisci i tuoi pensieri come se stessi parlando per organizzarli, leggerà la struttura così com'è.

Se hai un PDF o dei materiali, puoi caricarli con "Carica un PDF o appunti."

Esempi di Prompt

1Crea una LP per un servizio di consulenza AI per privati.
2Scopo: Aumentare le registrazioni LINE
3Struttura:
4- Sezione hero: Slogan + Pulsante di registrazione
5- Hai questi problemi? (3 elementi)
6- Cosa si può risolvere con il servizio (3 elementi)
7- Tariffe
8- FAQ (3 elementi)
9- CTA finale: Pulsante di registrazione LINE
10Target: Liberi professionisti non pratici di PC, donne over 50
11Stile: Semplice e caldo, bianco + accenti corallo

1Crea una proposta per un servizio di consulenza per aziende.
2Struttura: Problemi attuali → Contenuto della proposta → Effetti attesi → Tariffe → Passaggi di implementazione → Sul prossimo incontro
3Stile: Semplice e affidabile, blu scuro x bianco

1Crea un materiale di presentazione personale (portfolio) come freelance.
2Contenuto da includere: Profilo, competenze, risultati, tariffe, informazioni di contatto
3Stile: Monocromatico + 1 colore di accento, moderno e pulito

Passo 3. Attendi la Generazione

Ci vogliono alcuni minuti. Quando è finito, appare così.

Puoi controllare il resto scorrendo. Per una LP, verranno generati tutto, dalle tariffe e le FAQ al footer.

Passo 4. Regola con i Pulsanti in Alto a Destra

Una volta terminata la generazione, appaiono i pulsanti in alto a destra.

Basta istruire la formulazione o i colori della LP in "Ritocchi", e lo sistemerà sul momento.

Come Creare Animazioni

Puoi creare banner animati e motion graphics.

Passo 1. Clicca su "Animazione" nella Schermata Iniziale

Clicca sulla carta che dice "Motion graphics e loop."

Passo 2. Inserisci il Contenuto dell'Animazione che Vuoi Creare

Cliccando si arriva a questa schermata.

Se hai uno storyboard o delle immagini, puoi caricarli con "Carica uno storyboard o immagini."

Se hai un copione (testo), puoi anche incollarlo con "Incolla un copione."

Esempi di Prompt

1Crea un banner animato per l'introduzione del servizio.
2Contenuto: Il testo "AI x Sistematizzazione" appare in dissolvenza → Il nome del servizio appare dal basso → Il pulsante CTA lampeggia
3Sfondo: Scuro, linee di accento corallo
4Dimensioni: 1200×630px
5Riproduzione in loop

1Crea un numero di conteggio animato.
2Con il testo "3.000 persone iscritte", conta da 0 a 3.000 in 2 secondi.
3Inizia quando la pagina viene visualizzata.

Quando è finito, appare così.

Passo 3. Regola con i Pulsanti in Alto a Destra

Una volta terminata la generazione, appaiono i pulsanti in alto a destra.

A differenza di altre carte, non c'è il pulsante "Modifica". Poiché le animazioni funzionano su codice (CSS/JavaScript), non puoi modificare gli elementi direttamente cliccandoci sopra. Le correzioni sono possibili solo istruendo l'AI in "Ritocchi."

Se esporti un'animazione in PDF, il movimento andrà perso. Se vuoi mantenere il movimento, scegli il formato HTML.

Come Usare la Tela Bianca (Crea da Zero)

Niente modelli, niente domande. Usala quando vuoi iniziare da una tela completamente bianca.

Scegli questa per "cose che non rientrano in nessuna carta" o "quando vuoi decidere tutto da solo."

Basta inserire cosa vuoi creare nel campo di input di testo e premere Invia.

Come Usare Inizia da un File (Crea da File)

Questa carta converte file esistenti in design. Basta dare a Claude un file Word, PDF o PPTX e creerà un design per te.

Passo 1. Clicca su "Inizia da un file"

Clicca sulla carta che dice "Trasformalo in un design." Si aprirà una finestra di dialogo per la selezione del file.

I formati di file supportati sono DOCX, PPTX, XLSX, PDF, JPG e PNG.

Passo 2. Carica il File e Inserisci le Istruzioni

Quando selezioni un file, verrà caricato e apparirà un grande campo di input di testo. Inserisci cosa vuoi creare in italiano e premi il pulsante "Avvia progetto."

Altre carte hanno un pulsante "Invia", ma questa carta ha "Avvia progetto."

Esempi di Prompt

1Converti la proposta Word allegata in slide di proposta visive.
2Realizza una configurazione di 5-7 slide con un design semplice e facile da leggere.

1Converti le idee in questo appunto scritto a mano in una proposta LP.
2Target: Liberi professionisti principianti dell'AI
3Obiettivo: Candidatura per consulenza

Quando è finito, appare così.

Passo 3. Regola con i Pulsanti in Alto a Destra

Dopo la generazione, puoi regolare con la barra degli strumenti in alto a destra. Premendo il pulsante "+ Ritocchi" si apre un campo di input chat dove puoi dare istruzioni aggiuntive per modifiche precise.

Come Usare i Sistemi di Design [Nuovo in questo Aggiornamento]

C'è un pulsante "Configura sistema di design" sotto l'elenco delle carte nella schermata iniziale.

Registrando una volta i colori del brand, i caratteri e il logo, verranno automaticamente applicati ai design successivi.

Questo risolve il problema di "colori sempre diversi ogni volta."

Premendo il pulsante viene visualizzata la finestra modale "Aggiungi un sistema di design."

Ci sono due metodi di registrazione.

① Crea qui (Per principianti)

Puoi configurarlo semplicemente inserendo le informazioni necessarie nel modulo.

Cose che puoi registrare:

• Nome azienda/Descrizione del brand (input di testo)
• URL del repository GitHub
• File Figma (carica file .fig)
• File di caratteri, logo e risorse

Puoi usarlo senza codice. Se lo provi per la prima volta, questo è consigliato.

② Crea usando Claude Code (MIGLIORE FEDELTÀ)

Questa è una funzionalità per far imparare a Claude Code le informazioni del brand.

Una volta registrato, non dovrai specificare "con questo colore e questo carattere" ogni volta che crei una LP, una homepage o una slide. I design unificati come brand verranno fuori automaticamente.

Principalmente per team di sviluppo aziendali. Questa è una funzionalità per leggere automaticamente le informazioni del brand dal codice del servizio creato con le regole React. Non ci sono quasi casi d'uso per uso individuale.

Come Usare

Puoi crearlo da zero con i seguenti passaggi.

Passo 1. Controlla Node.js

Passo 2. Crea Cartelle e File

1Qualsiasi cartella/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (Riscrivi colori e caratteri con il tuo brand)

1export const colors = {
2  primary: "#DA7756",      // Colore principale
3  background: "#F5F4F0",   // Colore di sfondo
4  text: "#1C1917",         // Testo del corpo
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Passo 3. Esegui /design-sync

Esegui il seguente comando in Claude Code:

1/design-sync

Quando è finito, il brand verrà registrato nella scheda "Sistemi di design." Questo colore e carattere verranno automaticamente utilizzati nelle generazioni di design successive.

Metodi di Esportazione

I design finiti possono essere esportati in diversi formati.

Se c'è un'animazione, il movimento andrà perso se esportato in PDF.

Se vuoi mantenere il movimento, scegli il formato HTML.

Suggerimenti per la Regolazione (Pannello Ritocchi)

Dopo la generazione, premendo il pulsante "Ritocchi" puoi dare istruzioni di regolazione precise all'AI.

Esempi di istruzioni efficaci:

• "Ingrandisci il testo dell'intestazione"
• "Fai risaltare di più il pulsante"
• "Rendilo più semplice nel complesso"
• "Controlla il layout quando visualizzato su smartphone"

Piuttosto che cercare di cambiare tutto in una volta, dare istruzioni una alla volta rende più facile ottenere il risultato desiderato.

Cosa è Cambiato in Questo Aggiornamento

Riepilogo — Scegli una Carta in Base a Cosa Vuoi Creare

Claude Design è disponibile per i piani Pro ($20/mese) e superiori. Non può essere usato gratuitamente.

Scegli una carta in base a cosa vuoi creare

La precisione aumenta quando il prompt include quattro punti: "Scopo, Struttura, Target e Stile."

Non puntare alla perfezione dall'inizio; è più veloce creare una struttura generale e poi sistemare le cose una per una.

Se questo articolo ti è piaciuto, sarei felice se premessi "Mi piace."

▼ Puoi ricevere come usare Claude, che può essere iniziato anche se non sei pratico di PC, tramite LINE.

Registrandoti riceverai una guida all'installazione di Claude Code in regalo.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso