Le site web est en cours de chargement, et la Visionneuse d'App fonctionne normalement, laissez-lui un moment. Si cela prend plus de 2 minutes, cliquez sur l’icône Actualiser ou vérifiez le panneau Console pour voir s’il y a des erreurs.

Les agents peuvent rencontrer des problèmes pendant la compilation, ce qui provoque parfois des erreurs de page web. Cliquez sur Resolve et les agents le répareront pour vous ; une fois corrigé, l’aperçu reviendra à la normale. Les messages rouges sont un signal, pas une crise.

La suppression du badge nécessite Pro ou supérieur. Cliquez sur votre avatar dans le coin supérieur droit, sélectionnez Settings, puis allez dans Plans & Billing et choisissez le forfait Pro ou Max. Une fois la mise à niveau effectuée, le badge Atoms est automatiquement supprimé de vos pages publiées.

1. Ouvrez Design Mode et sélectionnez l’élément exact qui est mal aligné ou mal stylisé.
2. Indiquez la page et le breakpoint, le problème actuel, le résultat souhaité et ce qui ne doit pas changer.
3. Utilisez des instructions mesurables telles que le padding, l’alignement, la largeur, la couleur ou le comportement de retour à la ligne. Joignez une image de référence lorsque la correspondance visuelle est importante.
4. Appliquez un changement, puis vérifiez les mises en page bureau et mobile ainsi que les états importants comme chargement, vide, survol et erreur.
5. Si le résultat casse une autre zone, revenez à la dernière version fonctionnelle et réessayez avec une cible plus précise.

1. Confirmez si le problème affecte uniquement la Visionneuse d'App, l’URL d’aperçu ou également le site publié.
2. Actualisez une fois, ouvrez l’aperçu dans un nouvel onglet et testez une fenêtre de navigation privée.
3. Vérifiez si la tâche ou la compilation en cours est toujours en cours d’exécution. Attendez qu’elle se termine avant de réessayer.
4. Si un message explicite indique que le solde Cloud & AI est insuffisant ou que l’app est suspendue, ouvrez Settings → Cloud & AI et vérifiez ce solde. N’effectuez pas de recharge en vous basant uniquement sur un écran vide.
5. Enregistrez toute erreur Console ou Network sans partager de cookies, de jetons ou de valeurs secrètes.

Si l’écran reste vide, contactez le support avec le Chat Link, l’URL complète du Viewer, l’heure et le fuseau horaire, les environnements affectés, une capture d’écran et les détails d’erreur nettoyés.

1. Vérifiez si seule la Visionneuse d'App, l’URL d’aperçu ou le site publié est affecté.
2. Actualisez une fois, ouvrez l’aperçu dans un nouvel onglet et testez une fenêtre de navigation privée.
3. Vérifiez si la tâche ou la compilation en cours est toujours en cours d’exécution et attendez qu’elle se termine.
4. Testez la dernière version connue comme fonctionnelle. Si elle fonctionne, comparez le changement récent qui a introduit l’écran vide.
5. Ouvrez Settings → Cloud & AI uniquement lorsque le produit signale explicitement un solde insuffisant ou une app suspendue.

Si le problème persiste, contactez le support avec le Chat Link, l’URL complète du Viewer, la version, l’heure et le fuseau horaire, les environnements affectés, une capture d’écran et une erreur Console ou Network nettoyée.

L’aperçu et le site publié sont des canaux indépendants. Enregistrer ou prévisualiser ne pousse pas les changements en production.

1. Cliquez sur Update dans le panneau Publish — Ouvrez le panneau Publish et cliquez sur Update. Attendez que le statut affiche Up to date.
2. Forcez l’actualisation du site en ligne — Appuyez sur Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows), ou ouvrez l’URL dans une fenêtre de navigation privée pour exclure le cache du navigateur.
3. Vérifiez le numéro de version publiée — Dans le panneau Publish, confirmez que la version correspond à ce que vous voyez dans l’aperçu. Si elles diffèrent, publiez à nouveau.
4. Testez le sous-domaine Prod de la plateforme — Si vous utilisez un domaine personnalisé, ouvrez séparément l’URL Prod par défaut. Si le sous-domaine Prod est à jour mais pas le domaine personnalisé, le problème vient du cache DNS ou CDN.

Si le problème persiste, fournissez l’URL d’aperçu, l’URL Prod, des captures d’écran de comparaison côte à côte et l’heure à laquelle vous avez cliqué sur Publish ou Update.

Lorsque l’agent modifie la mise en page ou le style, il peut involontairement casser le comportement responsive sur les écrans plus petits.

1. Prévisualisez d’abord en largeur mobile — Utilisez la bascule d’appareil dans la barre d’outils de la Visionneuse d'App pour passer en vue mobile et vérifier le résultat avant publication.
2. Utilisez Design Mode en vue mobile — Passez en Design Mode pendant que la bascule d’appareil est réglée sur mobile. Cliquez sur l’élément cassé afin que l’agent cible uniquement ce composant à cette taille d’écran.
3. Fournissez des contraintes responsive explicites — Dites exactement à l’agent à quoi la mise en page mobile doit ressembler. Exemple : "On screens narrower than 768px, stack the cards in a single column and set padding to 16px."
4. Demandez à l’agent de préserver les media queries existantes — Lorsque vous demandez des changements sur bureau, ajoutez : "Do not modify any existing responsive or mobile styles."

Si le problème persiste, fournissez le Chat Link, une capture d’écran de la mise en page mobile cassée et une image de référence de la mise en page attendue.

Si les images semblent cassées, affichent des icônes de remplacement ou ne se chargent pas :

1. Vérifiez les chemins des fichiers image — Ouvrez la section Files et vérifiez que les fichiers image existent bien aux chemins référencés dans votre code. L’agent a peut-être déplacé ou renommé des fichiers pendant les modifications.
2. Vérifiez la taille et le format des fichiers — Les images très volumineuses ou les formats non pris en charge peuvent ne pas se charger. Compressez les images ou convertissez-les en PNG, JPG ou WebP.
3. Vérifiez le stockage Cloud — Allez dans Settings > Cloud & AI pour confirmer que vous disposez d’un espace de stockage disponible.
4. Forcez l’actualisation — Appuyez sur Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows) pour effacer les références d’images mises en cache.

Si le problème persiste, fournissez le Chat Link, l’URL de l’image manquante et une capture d’écran de l’état cassé.

Lorsque l’agent modifie des éléments non liés ou introduit des régressions dans d’autres parties de la page :

1. Revenez en arrière — Allez dans History et faites un Remix à partir de la dernière version stable. Cela réinitialise le contexte du chat tout en préservant votre code.
2. Utilisez Design Mode pour isoler — Passez en Design Mode et cliquez directement sur l’élément spécifique. Cela ancre la portée de modification de l’agent à ce composant.
3. Ajoutez des contraintes explicites — Indiquez clairement ce qui ne doit PAS changer. Exemple : "Change only the header background color to #1A365D. Do not modify the navigation bar, footer, or any other component."
4. Un changement par prompt — Effectuez un changement, vérifiez le résultat, puis passez au suivant.

Si l’agent provoque à plusieurs reprises des régressions sur d’autres éléments, faites un Remix à partir d’une version stable et recommencez avec une instruction strictement ciblée.

Si le panneau d’aperçu affiche une erreur de build, une bannière d’erreur rouge ou un message concernant des packages manquants :

1. Utilisez le bouton Resolve — Si une notification Signaler un problème apparaît dans la Visionneuse d'App, cliquez sur Resolve et l’IA analysera et corrigera automatiquement toutes les erreurs identifiées. Si aucun bouton Resolve n’apparaît, copiez le message d’erreur exact depuis le panneau Console et collez-le à l’agent avec : "Fix this build error: [error message]."
2. Vérifiez les changements récents — Si l’erreur est apparue après une modification spécifique, allez dans History et comparez avec la dernière version fonctionnelle pour identifier le changement qui a provoqué la panne.
3. Faites un Remix à partir de la dernière version fonctionnelle — Si l’erreur est difficile à résoudre, faites un Remix depuis votre dernier point de contrôle réussi et réappliquez les changements progressivement.
4. Vérifiez la compatibilité des packages — Si l’erreur fait référence à un package spécifique, demandez à l’agent : "Check whether [package name] is compatible with the current project setup and fix any version conflicts."

Remarque : si le message d’erreur fait référence à des composants de la plateforme (Visionneuse d'App, script de démarrage, Publish, enregistrement de déploiement) ou à des fichiers internes de packages tiers (par ex., @vue/compiler-core, vite), il peut s’agir d’un problème de plateforme plutôt que d’un problème lié à l’agent. Contactez le support avec le message d’erreur complet.

Si le problème persiste, fournissez le message d’erreur complet, le Chat Link et une capture d’écran de l’erreur.

Si l’agent confirme que le changement est effectué mais que le résultat visuel n’a pas changé :

1. Forcez l’actualisation — Appuyez sur Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows). Les changements CSS sont souvent mis en cache par le navigateur.
2. Vérifiez les conflits de spécificité CSS — L’agent a peut-être ajouté des styles qui sont remplacés par des règles existantes. Demandez à l’agent : "Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed."
3. Utilisez Design Mode pour inspecter — Passez en Design Mode et cliquez sur l’élément. L’éditeur visuel à gauche affiche les couleurs, espacements, propriétés typographiques et de mise en page actuellement appliqués, afin que vous puissiez voir si le changement demandé a été appliqué.
4. Vérifiez le bon fichier — Pour les projets avec à la fois des feuilles de style globales et des styles au niveau des composants, l’agent a peut-être modifié le mauvais fichier. Demandez : "Where did you apply the change? Show me the file path and line."

Si le problème persiste, fournissez le Chat Link, une capture d’écran de l’élément inchangé et les valeurs de style exactes que vous avez demandées.

Design Mode utilise la mise en page visuelle pour déterminer quel composant vous ciblez. Des éléments imbriqués ou superposés peuvent entraîner une sélection incorrecte.

1. Zoomez — Zoomez sur la zone avant de cliquer. Cela aide à distinguer les composants étroitement imbriqués.
2. Utilisez une description textuelle comme solution de secours — Si cliquer plusieurs fois sélectionne le mauvais élément, décrivez-le plutôt dans le chat. Exemple : "Select the second button inside the pricing card in the right column."
3. Référencez par chemin de fichier — Si vous savez quel fichier contient le composant, dites-le directement à l’agent : "Edit the element in src/components/PricingCard.tsx, line 42."

Si les problèmes de sélection persistent, fournissez une capture d’écran mettant en évidence l’élément souhaité ainsi que le Chat Link.