Scopri come usare le Modifiche Visive in AI Studio per perfezionare il tuo progetto direttamente dall'anteprima live. Imparerai come entrare nella modalità Modifica Visiva e selezionare gli elementi modificabili. Vedrai anche come aggiornare testo, immagini, icone, colori, spaziatura e layout.
- Cosa sono le Modifiche Visive in AI Studio
- Principali vantaggi delle Modifiche Visive in AI Studio
- Quali elementi possono essere modificati
- Come entrare nella modalità Modifica Visiva
- Come effettuare Modifiche Visive
- Salvare o scartare le Modifiche Visive
- Domande frequenti
- Articoli correlati
Cosa sono le Modifiche Visive in AI Studio
Le Modifiche Visive in AI Studio ti permettono di perfezionare il tuo progetto AI direttamente dall'anteprima live, una volta che è stato generato. Puoi fare clic sul testo, selezionare elementi della pagina, aggiornare le opzioni di stile o usare un prompt mirato per apportare modifiche a parti specifiche della pagina.
Questa funzionalità è utile quando il sito generato dall'AI è quasi pronto, ma hai ancora bisogno di rifinire testi, spaziatura, colori, pulsanti, immagini, icone o layout. Le modifiche vengono mostrate prima nell'anteprima live e non vengono applicate al progetto finché non le salvi.
Nota: Il modello AI viene invocato solo quando invii esplicitamente un prompt. Le modifiche visive dirette effettuate tramite i controlli di editing non richiedono generazione AI e non consumano token.
Principali vantaggi delle Modifiche Visive in AI Studio
Editing diretto sulla pagina: Fai clic sugli elementi nell'anteprima e aggiornali senza aprire l'Editor di codice.
Aggiornamenti testo più veloci: Fai doppio clic sul testo e digita direttamente sulla pagina per modifiche rapide ai contenuti.
Modifiche tramite prompt mirato: Seleziona uno o più elementi e descrivi la modifica che vuoi applicare.
Nessun consumo di token per le modifiche dirette: Le modifiche effettuate tramite i controlli visivi diretti non consumano token AI.
Anteprima prima del salvataggio: Verifica gli aggiornamenti nell'anteprima live prima di applicarli al progetto.
Quali elementi possono essere modificati
Le Modifiche Visive supportano gli elementi di pagina più comuni utilizzati durante la rifinitura di un sito. I controlli disponibili cambiano in base all'elemento selezionato, quindi il pannello di editing mostra solo le opzioni pertinenti a ciò su cui hai fatto clic.
Gli elementi modificabili includono:
Titoli e testo: Aggiorna testi, tipografia, allineamento, colore del testo e stile.
Pulsanti: Modifica etichette, stile del pulsante, tipo di pulsante, spaziatura e colori.
Immagini: Aggiorna la sorgente dell'immagine, la modalità di adattamento e il testo alternativo (alt).
Icone: Sostituisci le icone e regola dimensioni o stile delle icone.
Contenitori e sezioni: Regola spaziatura, bordi, ombre, sfondi e stile del layout.
Come entrare nella modalità Modifica Visiva
La modalità Modifica Visiva si attiva dal builder di AI Studio. Una volta abilitata, l'anteprima diventa interattiva e puoi selezionare testo, immagini, pulsanti, icone, contenitori e altri elementi supportati.
Per entrare nella modalità Modifica Visiva:
- Apri AI Studio e fai clic sul progetto che vuoi aggiornare.
Fai clic su Modifiche Visive nell'area del prompt in basso a sinistra del builder.
Fai clic su un elemento nell'anteprima per iniziare a modificare.
Come effettuare Modifiche Visive
Le Modifiche Visive ti offrono diversi modi per aggiornare una pagina dopo essere entrato nella modalità Modifica Visiva. Puoi selezionare elementi per aprire i controlli contestuali, modificare il testo direttamente sulla pagina, sostituire icone, regolare colori e spaziatura, controllare il layout delle immagini, ridimensionare le icone o usare i prompt su più elementi selezionati contemporaneamente.
Clic per selezionare e aprire i controlli visivi
Fai clic su qualsiasi elemento nell'anteprima per aprire il pannello Modifiche Visive. I controlli si adattano automaticamente in base a ciò che hai selezionato, come testo, pulsanti, immagini, icone, contenitori o elementi di layout. Questo ti permette di apportare modifiche mirate senza dover cercare nel codice del progetto.
I controlli di colore e spaziatura sono disponibili dal pannello Modifiche Visive quando sono applicabili all'elemento selezionato. I colori del tema del tuo progetto vengono visualizzati insieme alla palette Tailwind completa. Sono disponibili anche i controlli di margine e padding, che ti consentono di gestire la spaziatura.
Modifica testo inline
La modifica testo inline è ideale per aggiornamenti rapidi ai contenuti. Fai doppio clic su un elemento di testo, poi digita direttamente sulla pagina per apportare le modifiche.
Aggiornare le icone
I controlli per le icone rendono semplice sostituire o ridimensionare le icone Lucide senza modificare il codice. Quando selezioni un'icona Lucide, puoi aprire una libreria ricercabile con oltre 1.600 icone e scegliere una sostituzione che viene applicata immediatamente senza ricaricare la pagina. Puoi anche ridimensionare le icone Lucide selezionate.
Regolare il layout delle immagini
I controlli per le immagini ti aiutano ad aggiornare sia l'immagine utilizzata sia il modo in cui appare nell'area assegnata. Quando selezioni un'immagine, puoi cambiare l'URL dell'immagine per sostituirla, aggiornare il testo alternativo (alt) e usare il menu a tendina Layout per scegliere il risultato visivo desiderato.
Usare i prompt sugli elementi selezionati
La modifica tramite prompt ti consente di selezionare uno o più elementi e descrivere la modifica che vuoi apportare. Usala quando vuoi aggiornare un elemento specifico in linguaggio naturale o applicare una modifica coordinata su più elementi selezionati.
Per un singolo elemento, la modifica tramite prompt è utile per interventi come rendere una sezione selezionata più moderna, migliorare la spaziatura all'interno di un contenitore, ammorbidire lo stile di un pulsante o far sì che un componente si integri meglio con il resto della pagina.
Per più elementi, è utile per applicare uno stile coerente su componenti ripetuti, come allineare gli stili dei pulsanti, uniformare la spaziatura tra contenitori, aggiornare card o colonne ripetute, o applicare lo stesso colore a un gruppo di elementi selezionati.
Salvare o scartare le Modifiche Visive
Le Modifiche Visive utilizzano un flusso di lavoro con anteprima preliminare, così puoi rivedere le modifiche prima di applicarle al progetto. Questo aiuta a prevenire aggiornamenti accidentali e ti dà la possibilità di testare diversi stili o modifiche ai contenuti.
Fai clic su Salva per applicare la modifica al progetto. Se esci dalla modalità editor visivo senza salvare, le modifiche verranno scartate.
Se una modifica riguarda l'elemento sbagliato, crea uno stile indesiderato o non corrisponde al design che avevi in mente, fai clic su Scarta per rimuovere le modifiche non salvate e tornare alla versione precedente.
Domande frequenti
D: Devo abilitare un'impostazione prima di usare le Modifiche Visive?
No. Apri un progetto di AI Studio e fai clic su Modifiche Visive nell'area del prompt in basso a sinistra del builder per iniziare a modificare.
D: Le Modifiche Visive consumano token AI?
Le modifiche visive dirette non consumano token AI, poiché le modifiche vengono effettuate tramite i controlli di editing anziché tramite prompt generati dall'AI.
D: Posso usare un prompt su un elemento specifico selezionato?
Sì. Seleziona l'elemento che vuoi modificare e inserisci un'istruzione mirata nell'area del prompt delle Modifiche Visive.
D: Posso modificare più di un elemento alla volta?
Sì. La selezione multipla può essere usata per aggiornamenti coordinati come spaziatura coerente, stili condivisi o rifinitura ripetuta del layout.