Modifica visuale e anteprima

La modifica visuale funziona direttamente nel Visualizzatore App. Usa la barra degli strumenti sotto l'anteprima per selezionare elementi, modificare il testo, sostituire immagini, applicare un tema e visualizzare in anteprima le modifiche prima della pubblicazione.

Usa Select element per modifiche assistite dall'IA, Edit Text per modifiche dirette al testo e Theme per stili globali come colori, font ed effetti.

Come funziona la modifica visuale

Quando gli agenti IA completano un'attività, il Visualizzatore App appare nella parte superiore del progetto. La barra degli strumenti della modifica visuale si trova sotto l'anteprima.

• Select element ti consente di selezionare uno o più elementi e chiedere agli agenti di modificarli.
• Edit Text ti consente di modificare il testo direttamente nell'anteprima.
• Theme apre i controlli del tema per gli stili globali.

La barra degli strumenti può essere compressa quando non ti serve.

Prima di iniziare

Prima di iniziare a modificare, assicurati che:

• Il tuo progetto abbia una build completata. Gli strumenti di modifica visuale sono disponibili dal Visualizzatore App dopo che gli agenti terminano un'attività.
• Tu sappia che le modifiche non sono live finché non pubblichi. Il tuo URL pubblico non viene influenzato finché non pubblichi la versione aggiornata.
• Tu sappia che un tema raggiunge solo gli stili condivisi. Gli elementi creati con valori fissi mantengono il loro aspetto precedente dopo una modifica del tema. Vedi Se un tema non ha l'aspetto corretto qui sotto.

Imposta stili globali con Theme

Un tema è il sistema di design del tuo progetto. Definisce variabili globali — palette, tipografia e spaziatura — che si applicano a tutta la tua app, invece di 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 tema

Seleziona Theme dalla barra degli strumenti sotto il Visualizzatore App. Il pannello Theme include un campo Search Themes e raggruppa i temi 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 tema.
• Featured Theme — 15 preset selezionati da designer. Ognuno viene mostrato come anteprima di una pagina costruita con esso, con il suo nome e una riga di campioni che mostrano la sua palette. Questi non possono essere eliminati.
• Your Theme — temi che hai creato o personalizzato. Questi possono essere rinominati ed eliminati.

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

La scheda Theme, con un tema applicato in alto e i temi salvati sotto di esso.

Per applicarne uno:

1. Seleziona il tema 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 tema che hai scelto e ora appare sotto Current Theme.

Nota: Se hai modifiche non salvate a testo o immagini, Atoms ti chiede di salvarle o scartarle prima di applicare un nuovo tema.

Aggiorna un tema applicato

Un punto sulla scheda Theme indica che è disponibile una versione più recente del tema applicato.

Per usarla, seleziona Update sul tuo tema 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 non lo fai, il tuo progetto continuerà a usare la versione che hai applicato.

Nota: Nota: se la tua app non ha l'aspetto del tema che hai selezionato, i singoli elementi potrebbero avere stili che sovrascrivono il tema. Queste sovrascritture si applicano a contenuti specifici e restano anche dopo una modifica del tema.

Crea o modifica un tema in Theme Manager

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

Le sue impostazioni si trovano in tre schede:

• Color — i ruoli 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 si riflette su ogni elemento che lo usa.
• Fonts — i tuoi caratteri Serif, Sans-serif e Mono.
• Effects — Radius degli angoli e Shadow, che controlli tramite colore, opacità, sfocatura, espansione e offset.

L'anteprima accanto è costruita con componenti reali — moduli di accesso, pulsanti, input, testo normale e monospace — così puoi valutare subito una modifica invece di andare a tentativi. Usa l'interruttore chiaro/scuro sotto di essa per controllare entrambe le modalità, 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 modifiche, e Reset per riportare il tema al suo stato iniziale.

Theme Manager. L'anteprima si aggiorna quando modifichi un valore e i controlli sotto di essa includono annulla, ripristina, esporta, importa e resetta.

Salva un tema

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

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

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 tema diverso con modifiche non salvate ancora in sospeso.

Riutilizza un tema tra progetti

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

Se un tema non ha l'aspetto corretto

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

Quello che potresti vedere invece è un tema che viene applicato correttamente ma non raggiunge tutto. Non c'è alcun messaggio di errore in questo caso: semplicemente ha un aspetto sbagliato.

Una parte della tua app mantiene il suo aspetto precedente. 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 tema, quindi mantiene il suo aspetto precedente e può entrare in conflitto con tutto ciò che lo circonda. Seleziona l'elemento interessato e descrivi la modifica nella chat del progetto.

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

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

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

Modifica elementi con Editor Visuale

1. Passa con il mouse sulla barra degli strumenti della modifica visuale e seleziona Select element.
2. La barra degli strumenti mostra Click to select, Ctrl/Cmd + Click for multiple.
3. Seleziona un elemento nell'anteprima. Per selezionare più elementi, tieni premuto Ctrl su Windows o Cmd su Mac mentre selezioni.
4. Le tue selezioni vengono allegate alla chat del progetto. La barra degli strumenti mostra il numero selezionato, ad esempio Edit 1 selection in chat window.
5. Descrivi la modifica che desideri nella chat del progetto e invia il messaggio.
6. Seleziona di nuovo Select element per uscire dalla modalità di selezione.

Usa la chat del progetto per modifiche come layout, colori, spaziatura, stile o modifiche che interessano più elementi selezionati.

Modifica direttamente il testo

1. Seleziona Edit Text dalla barra degli strumenti sotto il Visualizzatore App.
2. Quando appare Click text content to edit, seleziona il testo che vuoi modificare.
3. Modifica il testo direttamente nell'anteprima.
4. Puoi modificare più elementi di testo prima di salvare. La barra degli strumenti mostra il numero di modifiche in sospeso, ad esempio 1 text change o 2 text changes.
5. Seleziona Save per mantenere tutte le modifiche di testo in sospeso, oppure Discard per rimuoverle.

Puoi anche fare doppio clic sul testo mentre usi Select element per iniziare a modificarlo direttamente.

Salva o scarta le modifiche

Le modifiche dirette a testo e immagini non vengono applicate finché non le salvi. Quando ci sono modifiche in sospeso, la barra degli strumenti mostra il numero di modifiche insieme a Discard e Save.

• Save applica tutte le modifiche dirette in sospeso.
• Discard rimuove le modifiche in sospeso e riporta gli elementi interessati allo stato precedente.

Se provi a uscire dalla modalità di modifica con modifiche in sospeso, Atoms mostra:

Modifiche non salvate

Hai modifiche non salvate. Salva o scarta le modifiche prima di uscire dalla modalità di modifica.

Seleziona Cancel per continuare a modificare oppure Discard per uscire senza mantenere le modifiche.

Il salvataggio aggiorna il progetto di lavoro. Non aggiorna il sito live finché non pubblichi.

Sostituisci un'immagine

1. Entra in modalità Select element.
2. Seleziona l'immagine che vuoi sostituire.
3. Scegli un'immagine dalla libreria immagini oppure usa il controllo di caricamento sull'immagine selezionata.
4. Controlla la sostituzione nell'anteprima.
5. Seleziona Save per applicare la modifica dell'immagine, oppure Discard per rimuoverla.

Se inserisci anche un'istruzione nella chat del progetto, la sostituzione dell'immagine e l'istruzione nella chat possono essere inviate insieme.

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 il mouse su 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 4 MB. 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 nella chat

Dopo aver selezionato uno o più elementi con Select element, descrivi il risultato che desideri nella chat del progetto.

Per esempio:

• "Rendi questa sezione più calma, con più spazio bianco e un titolo più piccolo."
• "Fai corrispondere questi pulsanti allo stile della pagina dei prezzi."

Sii specifico sul risultato desiderato. Istruzioni come "fallo sembrare migliore" possono produrre risultati imprevedibili

Visualizza in anteprima le modifiche

Usa la barra degli strumenti sopra l'anteprima:

• Device view — passa tra diverse dimensioni dello schermo per testare la responsività. Le modifiche a tema 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 completa in una scheda separata del browser.
• Console — apri il pannello dei log quando qualcosa sembra non andare bene.

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 rossi, il problema potrebbe riguardare il Visualizzatore App piuttosto che le tue modifiche visuali. Consulta Risoluzione dei problemi di build e anteprima per i passaggi di risoluzione dei problemi — Refresh, il pannello Console, Resolve e come segnalare un errore che persiste.

Se le modifiche dirette a testo o immagini sembrano essere scomparse, controlla se le hai salvate. Le modifiche non salvate possono essere scartate quando esci dalla modalità di modifica — vedi Salva o scarta le modifiche.

Pubblica le modifiche

Le modifiche visuali 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 modifiche al design non appariranno pubblicamente finché non pubblichi una nuova versione.

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