Claude Design ti permette di creare design, prototipi interattivi, one-pager e altri lavori visivi chattando con Claude. È uno dei template da cui puoi avviare un artifact, quindi puoi usarlo in qualsiasi chat, in Claude Code e dalla scheda Artifacts, con editing su canvas e il tuo design system incluso. Questa guida ti guida attraverso la creazione del tuo primo design, l'iterazione su di esso e il massimo utilizzo. Scopri di più su cosa sono gli artifacts e come usarli.
Claude Design è disponibile in beta su piani Pro, Max, Team ed Enterprise. È attivo per impostazione predefinita su piani Pro, Max e Team. Su piani Enterprise, è disattivato per impostazione predefinita finché un proprietario non lo attiva in Impostazioni organizzazione > Artifacts. L'esperienza standalone di Claude Design su claude.ai/design continua a funzionare e ha una propria impostazione separata.
Questa guida presuppone che il design system della tua organizzazione sia già stato configurato, quindi tutto ciò che crei utilizzerà automaticamente i colori, la tipografia e i pattern di componenti del tuo brand. Se sei un design lead che ha bisogno di configurare o modificare il design system stesso, consulta Configura il tuo design system in Claude Design.
Dove puoi usare Claude Design
In una conversazione: Chiedi a Claude un design, come "Crea un one-pager da questa proposta" o "Realizza un mockup del flusso di onboarding che abbiamo appena discusso." Claude lo crea accanto alla tua conversazione e lo affini lì. Puoi anche selezionare Output > Design nella casella dei messaggi.
Nella scheda Artifacts: Vai alla scheda Artifacts e scegli un template Design.
In Claude Code: Chiedi a Claude di trasformare la tua idea in un design, o usa /design per creare, modificare e sincronizzare design, su desktop o nel terminale.
Nell'app Claude per iOS e Android: Chiedi un design in qualsiasi conversazione e torna più tardi per il risultato, quindi visualizzalo a schermo intero nella scheda Artifacts. Per avviare da un template, modificare su canvas o cambiare le impostazioni di condivisione, usa Claude su web o desktop.
Su claude.ai/design: L'esperienza standalone continua a funzionare e i tuoi progetti esistenti rimangono dove sono.
Come funziona Claude Design
Claude Design abbina una conversazione a un canvas. Descrivi quello che vuoi e Claude genera un design funzionante sul canvas accanto alla conversazione. Da lì, iteri—affinando attraverso la conversazione, commenti inline e direttamente sul canvas finché non è giusto.
Il flusso tipico è:
Avvia un design da una conversazione, dalla scheda Artifacts o da claude.ai/design.
Allega o importa il design system 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.
Affina 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 design system, quindi tutto ciò che costruisci in Claude Design inizia 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.
Da Claude Code, usa /design per importare un design nella tua codebase, esporta il tuo codice come prototipo live, o lascia che Claude costruisca l'intera cosa da inizio a fine.
Crea un nuovo progetto
Quando crei un progetto, eredita automaticamente il design system della tua organizzazione. Non hai bisogno di caricare asset del brand o configurare nulla—i colori del tuo brand, i font e i componenti sono già in posizione.
Allega o importa il tuo design system
Porta uno o più design system da un repo 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 di design system, controlla il suo output rispetto al tuo design system e apporta correzioni prima che tu li veda.
Su piani Enterprise, gli admin possono riservare la pubblicazione, impostare il valore predefinito e eliminare design system per utenti specifici. Scopri di più nella guida admin Artifacts per piani Team ed Enterprise.
Porta un design system da claude.ai/design
I design system che hai creato su claude.ai/design possono essere trasferiti, quindi Claude può usarli in qualsiasi chat, incluso in Claude Code. Scopri di più su configurare il tuo design system.
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 o un documento esistente 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, architettura e pattern di styling esistenti. 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 un dashboard che mostra i ricavi mensili con filtri per regione e linea di prodotti."
"Progetta un flusso di onboarding di app mobile con 4 schermate che guida gli utenti attraverso le nostre funzionalità principali."
"Crea 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 ops per rivedere e approvare gli invii di contenuti."
Affina 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 lo schema di colori più scuro e minimalista."
Riorganizza il 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 scelte di design, suggerire miglioramenti o rivedere il design per l'accessibilità.
Utilizzo di commenti inline
I commenti inline ti permettono di fare clic direttamente su una parte specifica della tela e richiedere una modifica mirata. È più veloce che descrivere la posizione in chat.
Esempi di buoni commenti inline:
Rendi il padding di questo pulsante più grande.
Cambia questo in un menu a discesa invece di pulsanti radio.
Usa il colore del marchio principale 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 sulla tela
Utilizza i controlli di layout avanzati 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 modifiche mirate a livello di componente ("correggi questo pulsante", "regola questo spazio"). Usa chat per modifiche 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ì potrai 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 usarlo altrove. Il formato giusto dipende dal tuo caso d'uso, che tu stia ottenendo feedback dagli stakeholder, consegnando 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
Esporta in Google Slides (disponibile solo su claude.ai/design)
Esporta come HTML autonomo
Invia agli strumenti che usi già: Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel e Wix
Consegna a Claude Code
Invia all'agente di codifica locale
Invia a Claude Code Web
I design sono privati per te. Per condividerne uno, fai clic su "Condividi" e scegli chi può aprirlo e cosa può fare. Le persone con cui condividi un design possono visualizzarlo, commentarlo o modificarlo. Scopri di più su condivisione di artefatti.
Utilizzo e prezzi
Claude Design conta verso gli stessi limiti di utilizzo del resto di Claude. L'attività di Design attinge dallo stesso pool del resto del tuo lavoro con Claude, incluso Claude Code, quindi non c'è un'indennità Claude Design separata da tracciare. I progetti complessi con grandi basi di codice 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, caratteri e componenti.
Inizia semplice, poi aggiungi complessità. Inizia con il layout e il contenuto principale, quindi aggiungi interazioni, casi limite e perfezionamenti. Claude risponde bene alle richieste incrementali.
Sii specifico nel tuo feedback. "Questo non sembra giusto" è difficile da attuare. "Riduci 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 Pulsante principale" o "Applica il modello di layout Scheda."
Pensa alla reattività in anticipo. Menziona se il tuo design deve funzionare su dispositivi mobili, 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 vengono visualizzati sulla pagina, ma puoi comunque vederli aprendo la visualizzazione dei commenti.
Grandi basi di codice: 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-sync da Claude Code.
Errori di chat: Se riscontri un errore "chat upstream", prova ad avviare una nuova scheda di chat all'interno dello stesso progetto.
Mobile: Nell'app Claude per iOS e Android, puoi chiedere un design e visualizzarlo nella scheda Artefatti. La modifica sulla tela e la modifica delle impostazioni di condivisione richiedono Claude su web o desktop.
Modifica multipla: 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 è valida solo quanto la sua fonte. Una codebase disordinata o un file incompleto si rifletteranno nell'output.
Cronologia versioni: Claude Design non dispone ancora della cronologia versioni.