Claude Design di Anthropic Labs 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 di Anthropic Labs è ora disponibile in anteprima di ricerca per i piani Pro, Max, Team ed Enterprise. Questa funzionalità è disattivata per impostazione predefinita per i piani Enterprise.
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 Configurare 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 e i commenti inline finché non è giusto.
Il flusso tipico è:
Crea un progetto e aggiungi qualsiasi contesto rilevante (screenshot, una codebase).
Descrivi quello che vuoi costruire.
Rivedi quello che Claude genera sul canvas.
Itera utilizzando messaggi di chat e commenti inline.
Esporta o condividi quando sei soddisfatto del risultato.
Crea un nuovo progetto
Quando crei un progetto, eredita automaticamente il sistema di design della tua organizzazione. Non hai bisogno di caricare risorse di marchio o configurare nulla—i colori del tuo marchio, i font e i componenti sono già in posizione.
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 risorse esistenti: Carica screenshot di design esistenti, prodotti concorrenti, wireframe o ispirazione visiva. Puoi anche allegare una presentazione o un documento esistente con uno stile di design che vuoi replicare. Utile per le 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 stile. 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 nostro team di operazioni per rivedere e approvare gli invii di contenuti."
Itera sul tuo design
La prima generazione è un punto di partenza. Il valore reale viene dall'iterazione.
Utilizzo della chat
La chat è migliore per i cambiamenti ampi che influenzano il design complessivo:
"Rendi lo schema di colori più scuro 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à.
Utilizzo dei 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.
Quando usare chat vs. commenti
Usa commenti per modifiche mirate a livello di componente ("correggi questo pulsante", "regola questo spazio"). Usa chat per modifiche strutturali, nuove sezioni, cambiamenti estetici o qualsiasi cosa che richieda spiegazione o contesto.
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, in modo che tu possa 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, 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
Invia a Canva
Esporta come HTML autonomo
Consegna a Claude Code
Invia all'agente di codifica locale
Invia a Claude Code Web
Puoi anche condividere progetti all'interno della tua organizzazione utilizzando un link condivisibile. Le opzioni di condivisione includono accesso di sola visualizzazione, commento e modifica.
Utilizzo dell'abbonamento e prezzi
Vedi qui per ulteriori dettagli: Utilizzo dell'abbonamento e prezzi di Claude Design.
Suggerimenti per i migliori risultati
Inizia in modo 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 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 è disponibile come anteprima sperimentale da Anthropic Labs. Alcune cose di cui essere consapevoli:
Persistenza dei commenti: I commenti inline occasionalmente scompaiono prima che Claude li legga. Per aggirare questo, incolla il testo del commento nella chat.
Errori di salvataggio in visualizzazione compatta: La modalità di layout compatto può attivare errori di salvataggio. Se ciò accade, passa alla visualizzazione completa e riprova.
Codebase di grandi dimensioni: Il collegamento di repository molto grandi può causare lag o problemi del browser. Collega sottodirectory specifiche piuttosto che interi monorepo.
Errori di chat: Se riscontri un errore "chat upstream", prova ad avviare una nuova scheda di chat all'interno dello stesso progetto.