Visualizzatore App

Che cos'è Visualizzatore App?

Quando gli Agenti IA completano un'attività, il Visualizzatore App appare nella parte superiore della pagina. Ti consente di visualizzare in anteprima la tua app live e apportare modifiche visive direttamente, senza bisogno di programmare.

Prima di iniziare

• L'elaborazione dell'Agente potrebbe richiedere un momento: attendi con pazienza.
• Controlla il pannello Terminale sulla destra per vedere i progressi dettagliati. Il pannello Terminale mostra i log in tempo reale di ciò che sta facendo l'Agente IA, inclusi la creazione di file, la generazione di codice e qualsiasi errore riscontrato durante il processo di build.
• Fai clic sull'icona Refresh in qualsiasi momento per ricaricare l'anteprima.

Come usare Visualizzatore App

Passaggio 1: attendi il caricamento dell'anteprima

Dopo che gli Agenti hanno terminato, il Visualizzatore App carica l'anteprima nella finestra di anteprima principale.

⏱️ Di solito richiede da pochi secondi a un minuto.

Se richiede più di 2 minuti: fai clic sull'icona Refresh nella barra degli strumenti di Visualizzatore App. Se è ancora bloccato, controlla il pannello Terminale per eventuali errori (vedi il Passaggio 3 qui sotto).

Passaggio 2: visualizza l'anteprima della tua app

Una volta caricata, puoi vedere la tua app live nella finestra di anteprima.

• Desktop / Tablet / Mobile — Usa la barra degli strumenti del dispositivo nella parte superiore della finestra di anteprima per passare da una vista all'altra e testare la reattività. La barra degli strumenti mostra tre icone che rappresentano dispositivi desktop, tablet e mobile. Fai clic su ciascuna icona per vedere come appare la tua app su diverse dimensioni dello schermo senza lasciare la pagina.
• Apri in una nuova scheda— Fai clic sull'icona a forma di freccia nell'angolo in alto a destra della finestra di anteprima per aprire l'anteprima in una scheda del Browser separata. Questo è particolarmente utile se l'anteprima incorporata è bloccata o non risponde.

Passaggio 3: controlla la presenza di errori (se qualcosa non va)

Se la tua app non si carica o sembra danneggiata, controlla il pannello Console per i messaggi di errore.

Il pannello Console si trova sul lato destro dello schermo, sotto la scheda Terminale. Mostra i log di sistema e i messaggi di errore generati durante il processo di build.

Se vedi messaggi di errore in rosso, in genere includono:

• Una descrizione di cosa è andato storto
• Il file e il numero di riga in cui si è verificato l'errore
• Una stack trace per aiutare a identificare la causa principale

Per correggere gli errori: (Per maggiori dettagli, fai riferimento a: Segnalazione problemi)

• Fai clic su "Resolve" — l'IA analizzerà e correggerà automaticamente tutti i bug identificati.
• L'anteprima verrà ricaricata una volta applicate le correzioni. Puoi monitorare il progresso in tempo reale tramite il pannello Terminale.

Nessun pulsante "Resolve"?

Fai clic su "..." (altre opzioni) accanto all'ultimo messaggio dell'Agente, quindi seleziona "Feedback" per segnalare il problema al nostro team di supporto. Includi il tuo Chat Link e uno screenshot dell'errore.

Passaggio 4: modifica la tua app

Metodo 1: fai clic per modificare (consigliato per le modifiche visive)

Fai clic direttamente su qualsiasi elemento nella finestra di anteprima. Un editor visuale apparirà sul lato sinistro dello schermo, consentendoti di regolare:

• Colori — Cambia il colore del testo, il colore di sfondo o il colore del bordo con un selettore di colore
• Spaziatura — Regola padding, margine e spazio tra gli elementi
• Tipografia — Modifica dimensione, peso e famiglia del font
• Layout — Cambia allineamento, impostazioni flexbox o proprietà della griglia
• Contenuto testuale — Modifica il testo direttamente nell'editor

Una volta apportata una modifica, l'anteprima si aggiorna istantaneamente così puoi vedere il risultato in tempo reale.

L'editor visuale include anche una scheda Library in cui puoi sfogliare e aggiungere risorse predefinite come icone, immagini e componenti UI al tuo progetto.

Metodo 2: descrivi nella chat

Di' all'Agente IA cosa vuoi cambiare usando il linguaggio naturale. Per esempio:

• "Rendi più scuro il colore di sfondo"
• "Riduci il padding intorno all'intestazione"
• "Cambia il colore del pulsante in blu"

L'IA comprenderà la tua richiesta e applicherà le modifiche alla tua app.

Riferimento rapido

• Aggiorna anteprima – Fai clic sull'icona Refresh nella barra degli strumenti di Visualizzatore App per ricaricare la finestra di anteprima.
• Cambia vista dispositivo – Usa le icone Desktop, Tablet o Mobile nella barra degli strumenti di anteprima per testare come appare la tua app su diverse dimensioni dello schermo.
• Apri in una nuova scheda – Fai clic sull'icona a forma di freccia nell'angolo in alto a destra della finestra di anteprima per aprire l'anteprima in una scheda del Browser separata.
• Visualizza i log degli errori – Controlla il pannello Console sul lato destro dello schermo per i messaggi di errore e i log di sistema.
• Correggi automaticamente gli errori – Fai clic sul pulsante "Resolve" nella notifica Segnalazione problemi per consentire all'IA di correggere tutti i bug identificati.
• Modifica gli elementi visivi – Fai clic su qualsiasi elemento nella finestra di anteprima per aprire l'editor visuale sul lato sinistro.
• Segnala un problema – Fai clic su "..." → "Feedback" in qualsiasi messaggio dell'Agente per segnalare problemi al team di supporto.

FAQ

Perché il mio Visualizzatore App mostra una schermata di caricamento?

La schermata di caricamento indica che il sito web si sta caricando. Il Visualizzatore App funziona normalmente. Attendi un momento affinché l'anteprima si carichi correttamente. Se richiede più di 2 minuti, prova a fare clic sull'icona Refresh o a controllare il pannello Console per eventuali errori.

Perché il mio Visualizzatore App mostra messaggi di errore rossi?

Gli Agenti possono riscontrare problemi durante il processo di build, che occasionalmente possono causare errori nella pagina web. Fai clic su "Resolve" e gli Agenti correggeranno l'errore per te. Una volta corretto, Visualizzatore App mostrerà normalmente l'anteprima, quindi non c'è bisogno di preoccuparsi della comparsa di messaggi di errore rossi.

Perché non riesco a rimuovere il badge Atoms dalla mia pagina pubblicata?

La rimozione del badge richiede Pro o superiore. Puoi eseguire l'aggiornamento in qualsiasi momento da Settings → Plans & Billing. Dopo l'aggiornamento, il badge verrà rimosso automaticamente dalle tue pagine pubblicate.

Per eseguire l'aggiornamento, fai clic sul tuo avatar nell'angolo in alto a destra, seleziona Settings, quindi vai a Plans & Billing. Scegli il piano Pro o Max e completa il processo di aggiornamento. Una volta effettuato l'aggiornamento, il badge Atoms non apparirà più sulle tue pagine pubblicate.