Claude Design ti permette di creare design, prototipi interattivi, presentazioni e altro ancora conversando con Claude. Questa guida ti accompagna nella creazione del tuo primo progetto, nell'iterazione dei design e nel massimizzare l'utilizzo dello strumento.
Claude Design è ora disponibile in beta per i piani Pro, Max, Team ed Enterprise. Questa funzionalità è disattivata per impostazione predefinita per i piani Enterprise. Puoi utilizzarla sul web su claude.ai/design o dalla barra laterale in Claude Desktop.
Questa guida presuppone che il sistema di design della tua organizzazione sia già stato configurato, quindi tutto ciò che crei utilizzerà automaticamente i colori, la tipografia e i modelli di componenti del tuo marchio. Se sei un design lead che ha bisogno di configurare o modificare il sistema di design stesso, consulta Configura il tuo sistema di design in Claude Design.
Come funziona Claude Design
Claude Design ha due aree principali: un'interfaccia di chat a sinistra e un canvas a destra. Descrivi quello che vuoi nella chat e Claude genera un design funzionante sul canvas. Da lì, iteri—perfezionando attraverso la conversazione, commenti inline e direttamente sul canvas finché non è giusto.
Il flusso tipico è:
Crea un progetto.
Allega o importa il sistema di design con cui vuoi che Claude costruisca.
Aggiungi qualsiasi contesto rilevante (screenshot, una codebase).
Descrivi quello che vuoi costruire.
Rivedi quello che Claude genera sul canvas.
Perfeziona attraverso la chat, modifica direttamente sul canvas o lascia commenti inline.
Esporta o condividi quando sei soddisfatto del risultato.
Passa tra Claude Design e Claude Code
Puoi passare tra il lavoro in Claude Design e Claude Code mantenendo il tuo lavoro sincronizzato. Usa /design-sync per importare il tuo sistema di design, così tutto ciò che costruisci in Claude Design parte dai tuoi componenti esistenti. Quando un design è pronto per diventare software, puoi trasferirlo a Claude Code, che continua dal tuo lavoro esistente invece di ricominciare da uno screenshot.
Se preferisci lavorare da Claude Code, connetti il server MCP di Claude Design per creare e modificare design senza lasciare il tuo terminale:
Aggiungi il server:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
2. Esegui /design-login per accedere.
Una volta connesso, puoi importare un design nella tua codebase, esportare il tuo codice come prototipo live o lasciare che Claude costruisca tutto da inizio a fine.
Crea un nuovo progetto
Quando crei un progetto, eredita automaticamente il sistema di design della tua organizzazione. Non hai bisogno di caricare asset del marchio o configurare nulla—i colori del tuo marchio, i font e i componenti sono già in posizione.
Allega o importa il tuo sistema di design
Porta uno o più sistemi di design da un repository GitHub, file di design, caricamenti grezzi o la tua codebase locale usando il comando /design-sync in Claude Code. Claude costruisce con i tuoi veri componenti del sistema di design, controlla il suo stesso output rispetto al tuo sistema di design e apporta correzioni prima che tu li veda.
Per team più grandi, il ruolo personalizzato Admin di Claude Design consente a un amministratore di approvare un sistema standard e bloccare le modifiche, in modo che il lavoro corrisponda sempre alle linee guida della tua azienda.
Aggiungi contesto al tuo progetto
Più contesto dai a Claude, migliore sarà il tuo output. Puoi allegare materiale di riferimento in qualsiasi momento durante un progetto.
Screenshot, immagini o asset esistenti: Carica screenshot di design esistenti, prodotti concorrenti, wireframe o ispirazione visiva. Puoi anche allegare un deck di diapositive esistente o un documento con uno stile di design che vuoi replicare. Utile per richieste "fallo sembrare così".
Codebase e file di design esistenti: Collega un repository di codice in modo che Claude comprenda i tuoi componenti esistenti, l'architettura e i modelli di styling. Questo rende i prototipi più pronti per la produzione fin dall'inizio. L'importazione supporta anche più modi per caricare il lavoro di design del prodotto esistente.
Scrivi prompt efficaci
Non hai bisogno di essere un designer per ottenere ottimi risultati. Sii specifico su quello che stai costruendo, per chi è e cosa conta di più.
Un buon prompt include l'obiettivo (quello che stai costruendo), il layout (come le cose dovrebbero essere disposte), il contenuto (quali informazioni visualizzare) e il pubblico (chi lo userà). Claude farà anche domande di chiarimento se ha bisogno di più informazioni.
Ecco alcuni esempi di prompt che funzionano bene:
"Crea una dashboard che mostra i ricavi mensili con filtri per regione e linea di prodotti."
"Progetta un flusso di onboarding per app mobile con 4 schermate che guidano gli utenti attraverso le nostre funzionalità principali."
"Costruisci una landing page per il nostro nuovo prodotto API con una sezione hero, esempi di codice e prezzi."
"Crea un modulo per raccogliere feedback dei clienti con domande condizionali basate sulla categoria."
"Progetta uno strumento interno per il tuo team di operazioni per rivedere e approvare gli invii di contenuti."
Perfeziona il tuo design
La prima generazione è un punto di partenza. Il vero valore viene dall'iterazione.
Usando la chat
La chat è migliore per i cambiamenti ampi che influenzano il design complessivo:
"Rendi la combinazione di colori più scura e minimalista."
"Riorganizza la dashboard in modo che le metriche siano nella riga superiore e il grafico sia sotto."
"Aggiungi un pannello di impostazioni sul lato destro."
"Mostrami 2–3 layout alternativi per questa pagina."
Puoi anche chiedere a Claude di spiegare le sue decisioni di design, suggerire miglioramenti o rivedere il design per l'accessibilità.
Usando commenti inline
I commenti inline ti permettono di fare clic direttamente su una parte specifica del canvas e richiedere una modifica mirata. Questo è più veloce che descrivere la posizione nella chat.
Esempi di buoni commenti inline:
"Rendi il padding di questo pulsante più grande."
"Cambia questo in un dropdown invece di pulsanti radio."
"Usa il colore del marchio primario qui."
"Rendi questa sezione comprimibile."
Nota: Se i tuoi commenti non vengono rilevati, incolla il feedback direttamente nella chat. Questo è un workaround noto per un problema intermittente in cui i commenti possono scomparire prima che Claude li legga.
Modifica direttamente sul canvas
Usa i ricchi controlli di layout per rapidi cambiamenti visivi ed estetici, in particolare per trascinare, ridimensionare e allineare gli elementi direttamente.
Quando usare chat vs. commenti vs. modifica diretta
Usa commenti per cambiamenti mirati a livello di componente ("correggi questo pulsante", "regola questo spazio"). Usa chat per cambiamenti strutturali, nuove sezioni o qualsiasi cosa che richieda spiegazione o contesto. Modifica direttamente per rapidi cambiamenti visivi ed estetici.
Gestisci versioni e revisioni
Se vuoi esplorare una direzione diversa senza perdere il tuo lavoro attuale, dì a Claude: "Salva quello che abbiamo e prova un approccio completamente diverso." Claude salverà il tuo progetto attuale e confermerà dove è salvato, così puoi fare riferimento alle iterazioni precedenti nella conversazione facilmente.
Esporta e condividi
Una volta che il tuo design è pronto, puoi condividerlo con i colleghi o esportarlo per l'uso altrove. Il formato giusto dipende dal tuo caso d'uso—che tu stia ottenendo feedback dagli stakeholder, trasferendo all'ingegneria o presentando a un gruppo.
Usa il pulsante "Esporta" nell'angolo in alto a destra quando visualizzi il tuo progetto per scegliere tra i seguenti formati di esportazione.
Scarica come .zip
Esporta come PDF
Esporta come PPTX
Invia a Canva
Esporta come HTML autonomo
Invia agli strumenti che usi già, inclusi Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel e Wix, con più destinazioni in arrivo.
Trasferimento a Claude Code
Invia all'agente di codifica locale
Invia a Claude Code Web
Puoi anche condividere progetti all'interno della tua organizzazione usando un link condivisibile. Le opzioni di condivisione includono accesso di sola visualizzazione, commento e modifica.
Utilizzo e prezzi
Claude Design conta verso gli stessi limiti di utilizzo del resto di Claude. L'attività di design attinge dal pool condiviso che usi per chat, Claude Code e Cowork, quindi non c'è un'indennità separata di Claude Design da tracciare. I progetti complessi con codebase grandi o molte iterazioni consumano più utilizzo.
Se raggiungi i tuoi limiti di utilizzo, Claude Design non è disponibile fino al ripristino dei tuoi limiti. Se hai abilitato i crediti di utilizzo, puoi continuare a lavorare dopo aver raggiunto i tuoi limiti inclusi. Scopri di più su come funzionano i limiti di utilizzo e lunghezza.
Nota: Claude Design aveva precedentemente la sua propria indennità settimanale, separata dai tuoi altri limiti di utilizzo. Tutta l'attività di Claude Design ora conta verso i limiti condivisi del tuo piano.
Suggerimenti per i migliori risultati
Importa un sistema di design completo. Importa un sistema di design completo che includa i tuoi stili, font e componenti.
Inizia semplice, poi aggiungi complessità. Inizia con il layout e il contenuto principali, quindi aggiungi interazioni, casi limite e lucidatura. Claude risponde bene alle richieste incrementali.
Sii specifico nel tuo feedback. "Questo non sembra giusto" è difficile da attuare. "Stringi lo spazio tra i campi del modulo a 8px" dà a Claude esattamente quello di cui ha bisogno.
Fai riferimento al tuo sistema di design. Se sai che un componente esiste nel sistema del tuo marchio, menzionalo per nome: "Usa il componente Primary Button" o "Applica il modello di layout Card."
Pensa alla reattività presto. Menziona se il tuo design ha bisogno di funzionare su mobile, tablet e desktop, o solo su uno di questi.
Chiedi variazioni. Se non sei sicuro di una direzione, chiedi a Claude di mostrarti 2–3 opzioni. Confrontare le alternative è molto più veloce che indovinare.
Chiedi feedback a Claude. Claude può rivedere il tuo design per accessibilità, rapporti di contrasto, gerarchia delle informazioni e usabilità generale. Trattalo come un collaboratore di design, non solo come un generatore.
Limitazioni note
Claude Design è ora disponibile in beta. Alcune cose di cui essere consapevoli:
Persistenza dei commenti: I commenti inline occasionalmente non appaiono sulla pagina, ma puoi comunque vederli aprendo la visualizzazione dei commenti.
Codebase grandi: Considera il collegamento di repository molto grandi da Claude Code per evitare lag o problemi del browser. Per sincronizzare un sistema di design, usa
/design-syncda Claude Code.Errori di chat: Se riscontri un errore "chat upstream", prova ad avviare una nuova scheda di chat all'interno dello stesso progetto.
Disponibilità: Claude Design è disponibile solo su web e desktop.
Modifica multi-persona: Due o più persone che modificano un progetto di design contemporaneamente è ancora basilare e potrebbe non funzionare in modo affidabile.
Importazione del sistema di design: L'importazione del sistema di design è buona solo quanto la sua fonte. Una codebase disordinata o un file incompleto si mostreranno nell'output.