Inizia con Claude Design

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 accompagna nella creazione del tuo primo design, nell'iterazione e nel massimizzare i risultati. Scopri di più su cosa sono gli artifacts e come usarli.

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.

Crea un artifact con Claude

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—affina attraverso la conversazione, commenti inline e direttamente sul canvas finché non è perfetto.

Il flusso tipico è:

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, 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.

Da Claude Code, usa /design per importare un design nella tua codebase, esporta il tuo codice come prototipo live, o lascia che Claude costruisca tutto da zero.

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.

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.

Nei piani Enterprise, gli admin possono riservare la pubblicazione, impostare il valore predefinito e eliminare i design system per utenti specifici. Scopri di più nella guida admin Artifacts per piani Team ed Enterprise.

I design system che hai creato nella versione standalone su claude.ai/design possono essere trasferiti, così Claude può usarli in qualsiasi chat, incluso in Claude Code. Migra prima della chiusura della versione standalone il 14 dicembre 2026. Scopri di più in Migra da Claude Design standalone a Claude.

Più contesto dai a Claude, migliore sarà il tuo output. Puoi allegare materiale di riferimento in qualsiasi momento durante un progetto.

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:

La prima generazione è un punto di partenza. Il vero valore viene dall'iterazione.

La chat è migliore per i cambiamenti ampi che influenzano il design complessivo:

Puoi anche chiedere a Claude di spiegare le sue scelte di design, suggerire miglioramenti o rivedere il design per l'accessibilità.

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:

Utilizza i controlli di layout avanzati per rapidi cambiamenti visivi ed estetici, in particolare per trascinare, ridimensionare e allineare gli elementi direttamente.

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.

Per accedere e uscire dal pannello degli artefatti e per commentare dall'intestazione del pannello, vedi Usa gli artefatti con una tastiera o un lettore di schermo. Questo articolo spiega anche cosa significa focus, cosa fare su un Mac o in Safari e come vengono mostrate le chiavi nelle tabelle.

Un design è una tela di tavole da disegno. Ogni tavola da disegno contiene livelli, come testo, forme e immagini, e un livello può contenere altri livelli al suo interno.

Premi F6 per passare all'area successiva e Shift+F6 per passare a quella precedente. Cmd+F6 (Ctrl+F6 su Windows) funziona al posto di F6, con o senza Shift. Le aree sono la barra superiore, la tela e il pannello delle proprietà. Quando qualcosa è selezionato e il pannello delle proprietà è chiuso, F6 si ferma anche sulla barra degli strumenti che galleggia sulla selezione.

Premi Tab finché non raggiungi il titolo di una tavola da disegno. Il suo nome include la sua posizione, ad esempio tavola da disegno 1 di 7. Dal titolo, Space seleziona la tavola da disegno e Return entra al suo interno, nei suoi livelli. Una volta dentro:

Quando stai modificando un livello di testo, premi Escape o Tab al termine. Mentre ti sposti, l'editor comunica ai lettori di schermo cosa è selezionato e la sua posizione, ad esempio 1 di 5.

Per spostare una tavola da disegno, selezionala (Space sul suo titolo) e premi i tasti freccia. Si sposta di un pixel alla volta, o di 10 con Shift. All'interno di una tavola da disegno, i tasti freccia fanno qualcosa di diverso: con o senza Shift, ti spostano al livello successivo o precedente e non spostano mai il livello stesso. Per spostare il livello su cui sei, tieni premuto Option (Alt su Windows) e premi un tasto freccia. Un livello posizionato liberamente si sposta di un pixel, o di 10 con Shift. Un livello che fa parte di una riga, colonna o griglia scambia posizioni con il suo vicino: Su o Sinistra lo sposta prima, e Giù o Destra lo sposta dopo. L'editor invia una breve conferma dello spostamento ai lettori di schermo.

Con una tavola da disegno o un livello selezionato, premi Cmd+D (Ctrl+D su Windows) per duplicarlo e Delete o Backspace per eliminarlo. Premi Cmd+Z (Ctrl+Z su Windows) per annullare. L'editor invia una breve conferma di ognuno di questi ai lettori di schermo.

La barra degli strumenti che galleggia su una selezione è presente solo quando il pannello delle proprietà è chiuso e F6 la raggiunge. In essa, i tasti freccia si spostano tra i suoi controlli, Home e End si spostano al primo e all'ultimo, e Escape torna alla tela con la tua selezione mantenuta. Puoi anche raggiungere ogni controllo con Tab.

Cmd+\ (Ctrl+\ su Windows) apre il pannello delle proprietà e sposta il focus al suo interno. Premendolo di nuovo chiude il pannello e il focus ritorna al pulsante "Proprietà" nella barra superiore. I popup di colore, carattere e altri nel pannello prendono il focus quando si aprono e Escape li chiude. Quando scegli un colore di testo, il selettore di colore ti dice se il suo contrasto rispetto allo sfondo è buono o scarso.

Nell'elenco dei livelli del pannello delle proprietà: i tasti freccia Su e Giù si spostano tra le righe, il tasto freccia Destra espande una riga e poi entra al suo interno, il tasto freccia Sinistra la comprime e poi esce, Return o Space seleziona quel livello sulla tela e Return di nuovo su un livello di testo lo modifica.

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.

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 ricevendo 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.

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 degli artefatti.

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.

Alcune cose di cui essere consapevoli: