Il sito web si sta caricando e il Visualizzatore App funziona normalmente, attendi un momento. Se richiede più di 2 minuti, fai clic sull'icona Aggiorna o controlla il pannello Console per eventuali errori.

Gli agenti possono incontrare problemi durante la build, il che occasionalmente causa errori della pagina web. Fai clic su Risolvi e gli agenti lo ripareranno per te; una volta corretto, l'anteprima tornerà normale. I messaggi rossi sono un segnale, non una crisi.

La rimozione del badge richiede Pro o superiore. Fai clic sul tuo avatar nell'angolo in alto a destra, seleziona Impostazioni, poi vai a Plans & Billing e scegli il piano Pro o Max. Una volta effettuato l'upgrade, il badge Atoms viene rimosso automaticamente dalle tue pagine pubblicate.

1. Apri Design Mode e seleziona l'elemento esatto che è disallineato o stilizzato in modo errato.
2. Indica la pagina e il breakpoint, il problema attuale, il risultato desiderato e ciò che non deve cambiare.
3. Usa istruzioni misurabili come padding, allineamento, larghezza, colore o comportamento di a capo. Allega un'immagine di riferimento quando la corrispondenza visiva è importante.
4. Applica una modifica, poi verifica i layout desktop e mobile più gli stati importanti come caricamento, vuoto, hover ed errore.
5. Se il risultato compromette un'altra area, torna all'ultima versione funzionante e riprova con un obiettivo più ristretto.

1. Conferma se il problema riguarda solo il Visualizzatore App, l'URL di anteprima o anche il sito pubblicato.
2. Aggiorna una volta, apri l'Anteprima in una nuova scheda e prova una finestra in incognito.
3. Controlla se l'attività o la build corrente è ancora in esecuzione. Attendi che finisca prima di riprovare.
4. Se un messaggio esplicito dice che il saldo Cloud & AI è insufficiente o che l'app è sospesa, apri Settings → Cloud & AI e controlla quel saldo. Non effettuare una ricarica basandoti solo su una schermata vuota.
5. Registra eventuali errori della Console o della Network senza condividere cookie, token o valori segreti.

Se lo schermo rimane vuoto, contatta il Supporto con il Chat Link, l'URL completo del Viewer, ora e fuso orario, ambienti interessati, screenshot e dettagli dell'errore ripuliti.

1. Controlla se è interessato solo il Visualizzatore App, l'URL di anteprima o il sito pubblicato.
2. Aggiorna una volta, apri l'Anteprima in una nuova scheda e prova una finestra in incognito.
3. Controlla se l'attività o la build corrente è ancora in esecuzione e attendi che finisca.
4. Testa l'ultima versione sicuramente funzionante. Se funziona, confronta la modifica recente che ha introdotto la schermata vuota.
5. Apri Settings → Cloud & AI solo quando il prodotto segnala esplicitamente un saldo insufficiente o un'app sospesa.

Se il problema continua, contatta il Supporto con il Chat Link, l'URL completo del Viewer, la versione, ora e fuso orario, ambienti interessati, screenshot ed errore della Console o della Network ripulito.

L'Anteprima e il sito pubblicato sono canali indipendenti. Salvare o visualizzare in anteprima non invia le modifiche in produzione.

1. Fai clic su Update nel pannello Pubblica — Apri il pannello Pubblica e fai clic su Update. Attendi finché lo stato non mostra Up to date.
2. Forza l'aggiornamento del sito live — Premi Cmd+Shift+R (Mac) o Ctrl+F5 (Windows), oppure apri l'URL in una finestra in incognito per escludere la cache del browser.
3. Controlla il numero della versione pubblicata — Nel pannello Pubblica, conferma che la versione corrisponda a quella che vedi in Anteprima. Se differiscono, pubblica di nuovo.
4. Testa il sottodominio Prod della piattaforma — Se usi un dominio personalizzato, apri separatamente l'URL Prod predefinito. Se il sottodominio Prod è aggiornato ma il dominio personalizzato no, il problema è la cache DNS o CDN.

Se il problema persiste, fornisci l'URL di Anteprima, l'URL Prod, screenshot di confronto affiancati e l'ora in cui hai fatto clic su Pubblica o Update.

Quando l'agente modifica layout o stile, può involontariamente compromettere il comportamento responsive sugli schermi più piccoli.

1. Visualizza prima in larghezza mobile — Usa il selettore dispositivo nella barra degli strumenti del Visualizzatore App per passare alla visualizzazione mobile e controllare il risultato prima della pubblicazione.
2. Usa Design Mode nella visualizzazione mobile — Passa a Design Mode mentre il selettore dispositivo è impostato su mobile. Fai clic sull'elemento danneggiato così l'agente prenderà di mira solo quel componente a quella dimensione dello schermo.
3. Fornisci vincoli responsive espliciti — Di' all'agente esattamente come dovrebbe apparire il layout mobile. Esempio: "Su schermi più stretti di 768px, disponi le schede in una singola colonna e imposta il padding a 16px."
4. Chiedi all'agente di preservare le media query esistenti — Quando richiedi modifiche desktop, aggiungi: "Non modificare alcuno stile responsive o mobile esistente."

Se il problema persiste, fornisci il Chat Link, uno screenshot del layout mobile danneggiato e un'immagine di riferimento del layout previsto.

Se le immagini appaiono danneggiate, mostrano icone segnaposto o non si caricano:

1. Controlla i percorsi dei file immagine — Apri la sezione Files e verifica che i file immagine esistano nei percorsi a cui fa riferimento il tuo codice. L'agente potrebbe aver spostato o rinominato i file durante le modifiche.
2. Verifica dimensione e formato del file — Immagini molto grandi o formati non supportati potrebbero non caricarsi. Comprimi le immagini o convertili in PNG, JPG o WebP.
3. Controlla l'archiviazione Cloud — Vai su Settings > Cloud & AI per confermare di avere spazio di archiviazione disponibile.
4. Forza l'aggiornamento — Premi Cmd+Shift+R (Mac) o Ctrl+F5 (Windows) per cancellare i riferimenti alle immagini memorizzati nella cache.

Se il problema persiste, fornisci il Chat Link, l'URL dell'immagine mancante e uno screenshot dello stato danneggiato.

Quando l'agente modifica elementi non correlati o introduce regressioni in altre parti della pagina:

1. Ripristina — Vai su History e fai Remix dall'ultima versione stabile. Questo reimposta il contesto della chat preservando il tuo codice.
2. Usa Design Mode per isolare — Passa a Design Mode e fai clic direttamente sull'elemento specifico. Questo ancora l'ambito di modifica dell'agente a quel componente.
3. Aggiungi vincoli espliciti — Indica chiaramente cosa NON deve cambiare. Esempio: "Cambia solo il colore di sfondo dell'intestazione in #1A365D. Non modificare la barra di navigazione, il footer o qualsiasi altro componente."
4. Una modifica per prompt — Apporta una modifica, verifica il risultato, poi passa alla successiva.

Se l'agente continua a introdurre regressioni in altri elementi, fai Remix da una versione stabile e riprova con un'istruzione dal perimetro molto ristretto.

Se il pannello Anteprima mostra un errore di build, un banner di errore rosso o un messaggio su pacchetti mancanti:

1. Usa il pulsante Risolvi — Se nel Visualizzatore App appare una notifica Segnalazione problemi, fai clic su Risolvi e l'IA analizzerà e correggerà automaticamente tutti gli errori identificati. Se non compare alcun pulsante Risolvi, copia il messaggio di errore esatto dal pannello Console e incollalo all'agente con: "Correggi questo errore di build: [messaggio di errore]."
2. Controlla le modifiche recenti — Se l'errore è apparso dopo una modifica specifica, vai su History e confronta con l'ultima versione funzionante per identificare quale modifica ha causato il problema.
3. Fai Remix dall'ultima versione funzionante — Se l'errore è difficile da risolvere, fai Remix dal tuo ultimo checkpoint riuscito e riapplica le modifiche in modo incrementale.
4. Controlla la compatibilità del pacchetto — Se l'errore fa riferimento a un pacchetto specifico, chiedi all'agente: "Controlla se [package name] è compatibile con la configurazione attuale del progetto e correggi eventuali conflitti di versione."

Nota: se il messaggio di errore fa riferimento a componenti della piattaforma (Visualizzatore App, script di avvio, Pubblica, record di deploy) o a file interni di pacchetti di terze parti (ad es. @vue/compiler-core, vite), potrebbe trattarsi di un problema della piattaforma piuttosto che dell'agente. Contatta il Supporto con il messaggio di errore completo.

Se il problema persiste, fornisci il messaggio di errore completo, il Chat Link e uno screenshot dell'errore.

Se l'agente conferma che la modifica è stata effettuata ma il risultato visivo non è cambiato:

1. Forza l'aggiornamento — Premi Cmd+Shift+R (Mac) o Ctrl+F5 (Windows). Le modifiche CSS vengono spesso memorizzate nella cache del browser.
2. Controlla i conflitti di specificità CSS — L'agente potrebbe aver aggiunto stili che vengono sovrascritti da regole esistenti. Chiedi all'agente: "Controlla se lo stile che ho richiesto viene sovrascritto da un'altra regola CSS e correggi la specificità se necessario."
3. Usa Design Mode per ispezionare — Passa a Design Mode e fai clic sull'elemento. L'editor visuale a sinistra mostra i colori, la spaziatura, la tipografia e le proprietà di layout attualmente applicati, così puoi vedere se la modifica richiesta è stata applicata.
4. Verifica il file corretto — Per i progetti con fogli di stile globali e stili a livello di componente, l'agente potrebbe aver modificato il file sbagliato. Chiedi: "Dove hai applicato la modifica? Mostrami il percorso del file e la riga."

Se il problema persiste, fornisci il Chat Link, uno screenshot dell'elemento invariato e i valori di stile esatti che hai richiesto.

La modalità Design usa il layout visivo per determinare quale componente stai cercando di selezionare. Elementi annidati o sovrapposti possono causare una selezione errata.

1. Ingrandisci — Ingrandisci l'area prima di fare clic. Questo aiuta a distinguere componenti annidati molto vicini.
2. Usa una descrizione testuale come alternativa — Se facendo clic ripetutamente viene selezionato l'elemento sbagliato, descrivilo invece nella chat. Esempio: "Seleziona il secondo pulsante all'interno della scheda prezzi nella colonna di destra."
3. Fai riferimento al percorso del file — Se sai quale file contiene il componente, dillo direttamente all'agente: "Modifica l'elemento in src/components/PricingCard.tsx, riga 42."

Se i problemi di selezione persistono, fornisci uno screenshot che evidenzi l'elemento desiderato e il Chat Link.