Scopri come usare le Modifiche Visive in AI Studio per rifinire il tuo progetto direttamente dall'anteprima live. Imparerai come entrare in modalità Modifica Visiva e selezionare gli elementi modificabili. Vedrai anche come aggiornare testo, immagini, icone, colori, spaziature e layout.

INDICE DEI CONTENUTI

Cosa sono le Modifiche Visive in AI Studio

Le Modifiche Visive in AI Studio ti permettono di rifinire il tuo progetto AI direttamente dall'anteprima live, una volta che è stato generato. Puoi cliccare 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 tuo sito generato dall'AI è quasi pronto, ma hai ancora bisogno di rifinire il testo, la spaziatura, i colori, i pulsanti, le immagini, le icone o il layout. Le modifiche vengono mostrate prima nell'anteprima live e non vengono applicate al progetto fino al salvataggio.

Nota: il modello AI viene invocato solo quando invii esplicitamente un prompt. Le modifiche visive dirette effettuate tramite i controlli di modifica non richiedono la generazione AI e non consumano token.

Vantaggi principali delle Modifiche Visive in AI Studio

  • Modifica diretta della pagina: Clicca sugli elementi nell'anteprima e aggiornali senza aprire il Code Editor o usare l'AI.

  • Aggiornamenti rapidi del testo: Fai doppio clic sul testo e scrivi direttamente sulla pagina per modifiche rapide ai contenuti.

  • Modifiche tramite prompt mirati: Seleziona un elemento (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: Controlla 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 nella rifinitura di un sito. I controlli disponibili cambiano in base all'elemento selezionato, quindi il pannello di modifica mostra solo le opzioni pertinenti a ciò che hai cliccato.

Gli elementi modificabili includono:

  • Titoli e testo: Aggiorna il testo, la tipografia, l'allineamento, il colore e lo stile.

  • Pulsanti: Cambia etichette, stile del pulsante, tipo di pulsante, spaziatura e colori.

  • Immagini: Aggiorna la sorgente dell'immagine, la modalità di adattamento e il testo alternativo.

  • Icone: Sostituisci le icone e regola dimensione o stile.

  • Contenitori e sezioni: Regola spaziatura, bordi, ombre, sfondi e stile del layout.

Come entrare in 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 in modalità Modifica Visiva:

  1. Apri AI Studio e clicca sul progetto che vuoi aggiornare.

Schermata 1 — Modifiche Visive in AI Studio

  1. Clicca su Visual Edits nell'area del prompt in basso a sinistra nel builder.

Schermata 2 — Modifiche Visive in AI Studio

  1. Clicca su un elemento nell'anteprima per iniziare a modificare.

Schermata 3 — Modifiche Visive in AI Studio

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 spaziature, controllare il layout delle immagini, ridimensionare le icone o usare prompt su più elementi selezionati.

Clicca per selezionare e aprire i controlli visivi

Clicca su qualsiasi elemento nell'anteprima per aprire il pannello Visual Edits. 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 per colori e spaziatura sono disponibili nel pannello Visual Edits quando applicabili all'elemento selezionato. I colori del tema del tuo progetto appaiono insieme all'intera palette Tailwind. Compaiono anche i controlli per margini e padding, che ti permettono di gestire la spaziatura.

Schermata 4 — Modifiche Visive in AI Studio

Modifica il testo inline

La modifica del testo inline è la soluzione migliore per modifiche rapide ai contenuti. Fai doppio clic su un elemento di testo e scrivi direttamente sulla pagina per apportare le modifiche.

Schermata 5 — Modifiche Visive in AI Studio

Aggiorna le icone

I controlli delle icone rendono facile 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 un sostituto che si aggiorna immediatamente senza ricaricare la pagina. Puoi anche ridimensionare le icone Lucide selezionate.

Schermata 6 — Modifiche Visive in AI Studio

Regola il layout dell'immagine

I controlli delle immagini ti aiutano ad aggiornare sia l'immagine utilizzata sia il modo in cui appare all'interno dell'area assegnata. Quando selezioni un'immagine, puoi cambiare l'URL per sostituirla, aggiornare il testo alternativo e usare il menu a tendina Layout per scegliere il risultato visivo desiderato.

Schermata 7 — Modifiche Visive in AI Studio

Usa i prompt sugli elementi selezionati

La modifica tramite prompt ti permette 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 corrispondere meglio un componente al resto della pagina.

Per più elementi, è utile per applicare uno stile uniforme tra componenti ripetuti, come abbinare gli stili dei pulsanti, allineare la spaziatura tra contenitori, aggiornare card o colonne ripetute, o applicare lo stesso colore a un gruppo di elementi selezionati.

Schermata 8 — Modifiche Visive in AI Studio

Salvare o scartare le Modifiche Visive

Le Modifiche Visive utilizzano un flusso di lavoro basato sull'anteprima, 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 variazioni di contenuto.

Clicca Save 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 previsto, clicca Discard per rimuovere le modifiche non salvate e tornare alla versione precedente.

Schermata 9 — Modifiche Visive in AI Studio

Domande frequenti

D: Devo abilitare un'impostazione prima di usare le Modifiche Visive?

No. Apri un progetto in AI Studio e clicca su Visual Edits nell'area del prompt in basso a sinistra nel builder per iniziare a modificare.

D: Le Modifiche Visive consumano token AI?

Le modifiche visive dirette non consumano token AI perché le modifiche vengono apportate tramite i controlli di modifica 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 di Visual Edits.

D: Posso modificare più di un elemento alla volta?

Sì. La selezione multipla può essere usata per aggiornamenti coordinati come spaziatura uniforme, stile condiviso o rifinitura ripetuta del layout.

Articoli correlati

  • AI Studio in HITLEAD

  • Code Editor in AI Studio

  • Supporto SEO avanzato in AI Studio

  • Collega Form e Calendari in AI Studio