Regola l'aspetto della tua app, poi visualizza il risultato in anteprima prima di pubblicare.

Design si apre accanto alla tua anteprima live e ti consente di modificare l'aspetto del tuo progetto senza scrivere codice.

Questa guida spiega come impostare stili globali con Theme, modificare singoli elementi con Editor Visuale, sostituire immagini dalla Library, descrivere le modifiche in linguaggio naturale e controllare il tuo lavoro su diversi dispositivi prima che venga pubblicato.

Come funziona Design

Quando gli Agentei IA completano un'attività, il Visualizzatore App appare nella parte superiore della pagina. Seleziona Design per aprire il pannello di progettazione sul lato sinistro dello schermo, con la tua anteprima live accanto. Ha tre schede:

• Theme imposta regole globali per l'intera app — colori, font ed effetti. È meglio usarlo prima di iniziare a costruire.
• Editor Visuale regola gli elementi che hai selezionato. Funziona su qualsiasi progetto, in qualsiasi momento.
• Library sostituisce immagini o ne genera di nuove.

Theme imposta le regole, ed Editor Visuale perfeziona i dettagli. Seleziona Exit per chiudere il pannello.

Il pannello Design si apre a sinistra. Finché non selezioni qualcosa, Editor Visuale ti invita a scegliere un elemento.

Prima di iniziare

Prima di aprire Design, assicurati che:

• Il tuo progetto abbia una build completata. Design si apre dal Visualizzatore App, che appare solo dopo che gli agenti hanno terminato un'attività.
• Tu sappia che le modifiche non sono live finché non pubblichi. Il tuo URL pubblico non viene modificato finché non pubblichi la versione aggiornata.
• Tu sappia che un theme agisce solo sugli stili condivisi. Gli elementi costruiti con valori fissi mantengono il loro vecchio aspetto dopo una modifica del theme. Vedi Se un theme non ha l'aspetto giusto qui sotto.

Imposta stili globali con Theme

Un theme è il sistema di progettazione del tuo progetto. Definisce variabili globali — palette, tipografia e spaziatura — che si applicano a tutta la tua app, invece che impostazioni su un singolo elemento.

Theme si usa al meglio durante la fase di preparazione, prima di iniziare a costruire. Applicarne uno in anticipo significa che tutto ciò che gli agenti generano lo seguirà fin dall'inizio.

Scegli un theme

La scheda Theme si apre con un campo Search Themes e raggruppa i theme in sezioni:

• Current Theme — ciò che il tuo progetto usa ora. Prima di applicare qualsiasi cosa mostra No theme applied yet, e il pulsante + accanto crea un nuovo theme.
• Default Theme — 14 preset curati da designer. Ognuno viene mostrato come anteprima di una pagina costruita con esso, con il suo nome e una riga di campioni che mostra la sua palette. Questi non possono essere eliminati.
• My Theme — theme che hai creato o personalizzato. Questi possono essere rinominati ed eliminati.

Ogni theme appare come anteprima di una pagina costruita con esso, con il suo nome e una riga di campioni che mostra la sua palette, così puoi valutare la direzione prima di applicarlo.

La scheda Theme, con un theme applicato in alto e i tuoi theme salvati sotto.

Per applicarne uno:

1. Seleziona il theme che desideri.
2. Atoms chiede "Do you want to apply theme name?"
3. Seleziona Apply per confermare, oppure Cancel per tornare indietro.
4. Controlla l'anteprima.

Risultato previsto: l'anteprima si aggiorna con il theme che hai scelto, e ora appare sotto Current Theme.

Nota: Se hai modifiche non salvate in Editor Visuale, Atoms mostra Unsaved Changes e ti chiede di salvarle o scartarle prima di applicare un nuovo theme.

Aggiorna un theme applicato

Un punto sulla scheda Theme significa che è disponibile una versione più recente del tuo theme applicato.

Per usarla, seleziona Update sul tuo theme corrente e conferma Do you want to re-apply theme name? Il tuo progetto userà quindi la versione più recente.

Non sei obbligato ad aggiornare. Se lo lasci così, il tuo progetto continuerà a usare la versione che hai applicato.

Nota: Se la tua app non ha l'aspetto del theme che hai selezionato, singoli elementi potrebbero essere stati sovrascritti in Editor Visuale. Queste sovrascritture riguardano contenuti specifici e restano anche dopo una modifica del theme.

Crea o modifica un theme in Theme Manager

Seleziona + accanto a Current Theme per crearne uno da zero, oppure apri un theme esistente per modificarlo. In entrambi i casi si apre Theme Manager, dove puoi perfezionare un theme rispetto a un'anteprima live.

Le sue impostazioni sono distribuite su tre schede:

• Color — i ruoli di colore usati dalla tua app, raggruppati per scopo: Base Colors, Card, Popover, Primary, Secondary e altri. Ogni ruolo ha il proprio valore, quindi modificare Primary interessa ogni elemento che lo usa.
• Fonts — i tuoi caratteri Serif, Sans-serif e Mono.
• Effects — il Radius degli angoli e un Shadow che controlli tramite colore, opacità, sfocatura, espansione e offset.

L'anteprima accanto è costruita con componenti reali — moduli di accesso, pulsanti, campi di input, testo normale e monospaziato — così puoi valutare subito una modifica invece di andare a tentativi. Usa l'interruttore chiaro/scuro sotto di essa per controllare entrambi, perché una palette che funziona su superfici chiare può perdere contrasto su quelle scure.

Sotto l'anteprima hai anche Undo e Redo per scorrere le tue modifiche, e Reset per riportare il theme al punto di partenza.

Theme Manager. L'anteprima si aggiorna mentre modifichi un valore, e i controlli sotto coprono annulla, ripeti, esporta, importa e reimposta.

Salva un theme

1. Seleziona Save.
2. Assegnagli un Theme Name, oppure mantieni quello suggerito.
3. Seleziona Save per confermare.

Risultato previsto: il tuo theme appare sotto My Theme nella scheda Theme, con la sua palette mostrata come campioni. Applicalo nello stesso modo di qualsiasi altro theme.

Nota: Le modifiche non vengono mantenute finché non le salvi. Atoms ti fermerà e ti offrirà di salvare o scartare se provi ad applicare un theme diverso mentre ci sono ancora modifiche non salvate.

Riutilizza un theme tra progetti

Theme Manager ha Export e Import sotto l'anteprima. Esporta un theme in un file, poi importalo in un altro progetto per riutilizzare la stessa direzione di design, oppure passalo a un compagno di team così il suo progetto corrisponderà al tuo.

Se un theme non ha l'aspetto giusto

Applicare un theme non è un controllo di compatibilità, quindi normalmente non fallisce. Un theme sostituisce i valori di stile condivisi su cui è costruita la tua app, il che significa che qualsiasi theme nel selettore di solito può essere applicato a qualsiasi progetto.

Quello che potresti vedere invece è un theme che viene applicato correttamente ma non raggiunge tutto. Non c'è alcun messaggio di errore per questo — semplicemente ha un aspetto sbagliato.

Una parte della tua app mantiene il vecchio aspetto. Questo è il problema più comune. Un elemento a cui è stato assegnato un valore fisso, un colore specifico o un font impostato direttamente su di esso, invece di uno degli stili condivisi della tua app, non può essere raggiunto da una modifica del theme, quindi mantiene il suo aspetto precedente e può entrare in conflitto con tutto ciò che lo circonda. Correggilo in Editor Visuale, oppure chiedi agli agenti in chat di sostituire il valore fisso con gli stili del tuo theme.

Il testo diventa difficile da leggere. Un theme scuro applicato a un layout progettato per superfici chiare può lasciare il testo con troppo poco contrasto. Regola gli elementi interessati in Editor Visuale, oppure scegli un theme più vicino al tuo design esistente.

Atoms ti dice che il theme non può essere applicato. È raro, e significa che l'interfaccia del tuo progetto non è stata costruita sul sistema di theming di Atoms. Usa invece Editor Visuale — tutto è comunque realizzabile elemento per elemento.

Importante: Scegli un theme il prima possibile, quando puoi. Quando gli agenti costruiscono con un theme già applicato, usano i suoi stili condivisi fin dall'inizio, quindi meno elementi finiscono con valori fissi che una modifica successiva del theme non può raggiungere.

Modifica singoli elementi con Editor Visuale

Seleziona un elemento nell'anteprima per modificarlo. Per lavorare su più elementi contemporaneamente, tieni premuto Ctrl e fai clic su Windows, oppure Cmd e fai clic su Mac.

Importante: I controlli delle proprietà descritti di seguito agiscono su un elemento alla volta. Quando hai selezionato più elementi, modificali invece descrivendo ciò che vuoi nella chat — vedi Descrivi le modifiche invece di fare clic.

Un badge sopra la tua selezione indica il nome dell'elemento e la sua dimensione — la dimensione del font per il testo, oppure le dimensioni per un contenitore — così puoi confermare di avere selezionato l'elemento desiderato e non il suo contenitore.

La scheda Editor Visuale mostra quindi le proprietà disponibili per quell'elemento, raggruppate in sezioni:

• Layout — margine e padding.
• Appearance — colore di sfondo, opacità e raggio degli angoli. Radius va da None a Small, Medium, Large, XL, 2XL, 3XL, fino a Full.
• Content — il testo dell'elemento.
• Style — famiglia di font, peso, dimensione, allineamento del testo e decorazione.
• Class — le classi di stile applicate all'elemento, compresse per impostazione predefinita.

Le sezioni visualizzate dipendono da ciò che hai selezionato: un elemento di testo offre Content e Style, mentre un contenitore può mostrare solo Layout, Appearance e Class.

Sopra la tua selezione appare anche una barra degli strumenti mobile con i controlli più comuni a portata di mano — font, peso, allineamento e colore per il testo — insieme al controllo di eliminazione e al campo prompt descritto sotto.

Le modifiche appaiono nell'anteprima mentre le esegui. Per annullarle, usa Discard in fondo all'anteprima.

Salva le tue modifiche

Le modifiche non vengono mantenute finché non le salvi. Una volta effettuata una modifica, Discard e Save appaiono in fondo all'anteprima.

• Save mantiene le tue modifiche.
• Discard le elimina e riporta l'elemento a com'era prima.

Risultato previsto: i pulsanti scompaiono una volta che salvi, e la tua modifica ora fa parte del progetto.

Nota: Se provi a uscire da Design, applicare un theme diverso o usare Seleziona per chattare mentre ci sono ancora modifiche non salvate, Atoms mostra Unsaved Changes e ti chiede di salvare o scartare prima di continuare.

Salvare mantiene la modifica nel tuo progetto. Non la pubblica sul tuo sito live — vedi Pubblica le tue modifiche.

Con un elemento selezionato, Editor Visuale mostra le sue proprietà. La barra degli strumenti mobile sopra la selezione passa dalla descrizione di una modifica alla modifica diretta.

Suggerimenti:

1. Usa Editor Visuale per modifiche estetiche e la chat per quelle strutturali, come nuove pagine, nuove funzionalità o logica backend.
2. Per apportare la stessa modifica a una fila di card o pulsanti, selezionali tutti con Ctrl-click o Cmd-click e descrivi la modifica una sola volta in chat. Modificarli uno per uno tramite i controlli delle proprietà significa ripetersi.

Sostituisci immagini con Library

Library applica un'immagine all'elemento che hai selezionato, quindi inizia scegliendo dove deve andare l'immagine.

1. Seleziona l'elemento che vuoi modificare nell'anteprima. Finché non lo fai, Library mostra Select an element to start visual editing.
2. Apri la scheda Library e scegli una fonte — Image, Generate o Upload.
3. Applica la tua immagine. Il modo dipende dalla sua origine. Per un'immagine integrata, passaci sopra e seleziona Use asset. Per un'immagine generata o caricata da te, seleziona la relativa miniatura completata.
4. Controlla l'anteprima. L'immagine viene applicata subito all'elemento selezionato.
5. Seleziona Save in fondo all'anteprima, oppure Discard per annullare.

Risultato previsto: l'elemento scelto mostra la nuova immagine, e i pulsanti Save e Discard scompaiono una volta salvato.

La scheda Library con categorie di immagini e Popular Images.

Da dove provengono le immagini

Image è la raccolta integrata. Usa Search assets per qualcosa di specifico, oppure sfoglia una categoria — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings e People, con More tags per il resto. Selezionando una categoria la apri; usa la freccia indietro per tornare. Popular Images sotto mostra una selezione generale. Passa sopra qualsiasi immagine e seleziona Use asset per applicarla.

Generate crea una nuova immagine da una descrizione e richiede un piano Pro o Max. Digita ciò che desideri sotto Describe the image you want to generate e seleziona Generate. I risultati appaiono sotto il campo. Seleziona una miniatura completata per applicarla al tuo elemento.

Upload aggiunge un tuo file tramite trascinamento, incolla o clic. Le immagini possono essere nei formati JPEG, PNG, GIF, BMP, TIFF o WEBP, fino a 4MB. Le immagini caricate appaiono sotto l'area di rilascio — selezionane una per applicarla.

Nota: Use asset appare solo sulle immagini integrate. Le immagini che generi o carichi vengono invece applicate selezionando la loro miniatura.

Descrivi le modifiche invece di fare clic

Quando una modifica è più facile da descrivere che da eseguire con i clic, puoi chiederla invece agli agenti. Ci sono due punti in cui farlo, ed entrambi agiscono su ciò che hai attualmente selezionato.

• La barra degli strumenti mobile sulla tua selezione. Una piccola barra degli strumenti appare sopra l'elemento che hai scelto. Le sue due icone passano dalla descrizione di una modifica alla modifica diretta delle proprietà. Digita in Ask the Atoms to change… e invia.
• L'input della chat sotto il pannello Design. Quando un elemento è selezionato, l'input mostra un'etichetta Design e il prompt Ask the Atoms team to modify the selected element…, così gli agenti applicano la tua istruzione a quell'elemento invece che all'intero progetto.

La barra degli strumenti mobile si trova sopra la tua selezione. Il chip a sinistra mostra a quale elemento verrà applicata l'istruzione.

Descrivi il risultato, non il meccanismo:

- "Rendi questo più tranquillo — più spazio bianco, titolo più piccolo."

- "Fai corrispondere lo stile di questo pulsante a quello della pagina dei prezzi."

Istruzioni vaghe come "fallo sembrare migliore" danno risultati imprevedibili.

Nota: Fare clic su una proprietà in Editor Visuale la modifica immediatamente. Inviare un prompt chiede agli agenti di svolgere il lavoro, il che richiede più tempo. Per una semplice modifica di colore o spaziatura, modifica direttamente la proprietà.

Visualizza in anteprima le tue modifiche

Usa la barra degli strumenti sopra l'anteprima:

• Device view — passa tra diverse dimensioni dello schermo per testare la reattività. Le modifiche a theme e tipografia che sembrano corrette su desktop spesso si rompono su mobile, quindi controlla sempre il mobile prima di pubblicare.
• Page selector — spostati tra le pagine della tua app.
• Refresh — ricarica l'anteprima se sembra non aggiornata.
• Open in a new tab — visualizza l'app a larghezza piena in una scheda separata del browser.
• Console — apri il pannello dei log quando qualcosa sembra non andare.

Risultato previsto: le tue modifiche sono visibili su ogni pagina e a ogni larghezza del dispositivo che intendi supportare.

Recupera da un problema di anteprima

Se l'anteprima sembra non aggiornata, continua a caricarsi o mostra errori in rosso, il problema riguarda l'anteprima piuttosto che Design. Consulta Risoluzione dei problemi di build e anteprima per i passaggi di risoluzione — Refresh, il pannello Console, Resolve e come segnalare un errore che persiste.

Una cosa specifica di Design: se le tue modifiche sembrano essere scomparse, controlla se le hai salvate. Le modifiche non salvate vengono scartate quando esci da Design — vedi Salva le tue modifiche.

Pubblica le tue modifiche

Le modifiche di Design restano nel tuo progetto di lavoro finché non pubblichi. Seleziona Publish nell'angolo in alto a destra, oppure Update se il progetto è già live.

Nota: Se il tuo progetto usa Specify Versione invece di Always Latest, il sito live resta bloccato sulla versione che hai scelto e le tue modifiche di design non appariranno pubblicamente finché non pubblicherai una nuova versione.

Per gli errori che gli agenti segnalano durante una build, vedi Segnalazione problemi.