Un sistema di design acquisisce i tuoi colori, la tipografia, i componenti e i modelli di layout, in modo che Claude li applichi a ogni nuovo design e presentazione. Claude li estrae dagli asset che fornisci, come basi di codice, presentazioni o altri riferimenti di design.
I sistemi di design sono disponibili in beta sui piani Pro, Max, Team ed Enterprise. Sono attivati per impostazione predefinita sui piani Pro, Max e Team. Sui piani Enterprise, sono disattivati finché un proprietario non attiva Sistemi di design in Impostazioni organizzazione > Artifact. Claude Design autonomo su claude.ai/design ha un'impostazione separata.
Questa guida è per il designer o il proprietario del brand che configurerà il sistema di design. Sui piani Team ed Enterprise, devi farlo solo una volta e il lavoro di tutti lo utilizzerà successivamente.
Prima di iniziare
Sui piani Team ed Enterprise, Sistemi di design deve essere attivato per la tua organizzazione e un proprietario potrebbe limitare chi può pubblicare o impostare il valore predefinito.
Avrai bisogno di almeno uno dei seguenti come materiale di partenza:
Una base di codice con il tuo sistema di design o libreria di componenti
Una presentazione o un documento che rifletta la tua identità visiva
Asset delle linee guida del brand (loghi, tavolozze di colori, specifiche tipografiche)
Crea un sistema di design
Da una chat
Chiedi a Claude di creare un sistema di design dalle tue app connesse, file caricati, file Figma, presentazioni, loghi e font. Funziona meglio per sistemi di design del brand con font, colori e linee guida.
Da Claude Code
Se il tuo sistema di design esiste già come componenti React, esegui /design-sync in Claude Code. Legge i tuoi token e componenti direttamente e funziona meglio per sistemi di design di prodotto nel codice.
Porta un sistema di design da claude.ai/design
Apri la scheda "Design" in fondo alla barra laterale.
Fai clic su "Migra sistemi di design del team" nel banner.
Ogni sistema di design diventa un artifact che Claude può utilizzare in qualsiasi chat, incluso in Claude Code. I sistemi di design migrati potrebbero richiedere una pulizia, quindi ognuno mostra un banner in cui puoi fare clic su "Lascia che Claude lo pulisca" e Claude ordina la sua guida, i token e i componenti.
Gestisci i tuoi sistemi di design
Gestisci i tuoi sistemi di design in Impostazioni > Sistemi di design. Sui piani Enterprise, gli amministratori possono riservare la pubblicazione, l'impostazione del valore predefinito dell'organizzazione e l'eliminazione dei sistemi di design per utenti specifici. Scopri di più nella guida amministratore degli artifact per i piani Team ed Enterprise.
Usa un sistema di design con una tastiera
Per accedere e uscire dal pannello artifact, vedi Usa gli artifact 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 scritti i tasti di scelta rapida.
Un sistema di design si apre come un elenco di sezioni accanto alla sezione che stai leggendo. Premere Invio su una sezione nell'elenco la apre, Cmd+F6 (Ctrl+F6 su Windows) si sposta tra l'elenco e la sezione, e Cmd+Z (Ctrl+Z su Windows) annulla una modifica quando non sei in una casella di testo.
Nota: Le anteprime dei componenti live in un sistema di design non possono essere raggiunte con Tab, quindi non possono essere utilizzate dalla tastiera. Il nome e le note di ogni componente possono essere letti.
Configura un sistema di design su claude.ai/design
Questi passaggi utilizzano Claude Design autonomo.
Crea o passa alla tua organizzazione
Apri Claude Design.
Nell'angolo in basso a sinistra del selettore di progetto, fai clic sul nome dell'organizzazione corrente.
Seleziona la tua organizzazione o creane una nuova.
Completa il flusso di onboarding a cui sei reindirizzato.
Carica i tuoi asset di brand e prodotto
Durante l'onboarding o successivamente dalle impostazioni dell'organizzazione, carica gli asset che definiscono il tuo brand e prodotto. Claude li analizza ed estrae un sistema di design riutilizzabile.
Basi di codice: Se il tuo sistema di design risiede nel codice, come una libreria di componenti React, collega o carica il repository. Claude legge i componenti e gli stili.
Prototipi: Screenshot, flussi web e file di design esistenti.
Presentazioni o documenti: Anche un PowerPoint o PDF ben progettato che rifletta il tuo brand può funzionare. Claude estrae colori, modelli di layout e scelte tipografiche.
Asset individuali: Loghi, file della tavolozza di colori, campioni tipografici.
Hai bisogno di una sola fonte per iniziare, ma più fonti danno a Claude più materiale con cui lavorare.
Rivedi il sistema di design generato
Dopo il caricamento, Claude genera un sistema di design per la tua organizzazione. Questo in genere include:
Tavolozza di colori: Colori primari, secondari e di accento estratti dai tuoi asset.
Tipografia: Famiglie di caratteri, dimensioni e spessori.
Componenti: Pulsanti, schede, elementi di navigazione e altri modelli di interfaccia utente riutilizzabili.
Modelli di layout: Spaziatura, sistemi di griglia e strutture di pagina.
Per convalidarlo, crea un progetto di test e verifica se l'output corrisponde al tuo brand. Prova prompt come:
"Crea una landing page per [il tuo prodotto]."
"Progetta una dashboard che mostra [metriche rilevanti]."
"Crea un one-pager su [un argomento su cui il tuo team presenta comunemente]."
Rendilo disponibile al tuo team
Quando sei soddisfatto del sistema di design, attiva l'interruttore "Pubblicato". Dopo la pubblicazione, i progetti creati dalla schermata iniziale di Claude Design nella tua organizzazione utilizzano il tuo sistema di design invece di quello predefinito.
Aggiorna il tuo sistema di design
Quando il tuo sistema di design cambia, puoi aggiornarlo in Claude Design. Dalle impostazioni dell'organizzazione di Claude Design, fai clic sul pulsante "Apri" accanto al sistema di design che desideri modificare. Fai clic sul pulsante "Remix" nell'angolo in alto a destra per aprire l'interfaccia della chat sul lato sinistro della finestra. Da qui, puoi lavorare con Claude per modificare il tuo sistema di design.
Suggerimenti per i migliori risultati
Includi esempi reali, non solo specifiche. Una landing page o un sito di marketing finito dice a Claude più sulla sensazione del tuo brand rispetto a una sola tavolozza di colori.
Itera. Se la prima estrazione non cattura bene il tuo brand, prova a caricare asset aggiuntivi o diversi.