Visionneuse d'App
Prévisualisez votre app en direct, testez ses interactions et exécutez les vérifications avant publication — avec une visite complète de la barre d’outils et de toutes les façons d’effectuer des modifications visuelles.
Qu’est-ce que la Visionneuse d'App ?
Lorsque vos Agents IA terminent une tâche, la Visionneuse d'App s’ouvre en haut de la page. Au lieu de simplement voir à quoi ressemble votre création, vous pouvez interagir avec elle comme avec une app entièrement fonctionnelle — parcourir les pages, tester les fonctionnalités et effectuer des modifications visuelles sans écrire de code. Elle sert également de dernier point de contrôle avant la publication : si quelque chose semble incorrect ou se comporte de manière inattendue, vous pouvez le détecter et le corriger avant que les utilisateurs ne le voient.
Avant de commencer : le traitement par l’Agent peut prendre un moment. Pendant l’exécution de la tâche, le panneau Terminal à droite affiche l’activité en temps réel, y compris la création de fichiers, la génération de code et les éventuelles erreurs rencontrées en cours de route. Vous pouvez également utiliser l’icône Actualiser à tout moment pour recharger la dernière version de l’aperçu.
La barre d’outils de la Visionneuse d'App
Une fine barre d’outils se trouve au-dessus de la fenêtre d’aperçu. De gauche à droite, voici à quoi sert chaque contrôle :
- Design: active ou désactive le mode d’édition visuelle. Lorsqu’il est actif, cliquer sur n’importe quel élément dans l’aperçu sélectionne cet élément pour modification — voir « Modifier votre app » ci-dessous.
- Device toggle: l’icône d’affichage bascule l’aperçu en vue mobile puis revient en arrière, afin que vous puissiez vérifier la réactivité sans quitter la page.
- Refresh: recharge la fenêtre d’aperçu. Votre premier réflexe chaque fois que l’aperçu semble obsolète ou bloqué.
- Home: ramène l’aperçu à la page d’accueil de votre app, où que vous ayez navigué.
- Page selector: le menu déroulant au milieu liste les pages de votre app, choisissez-en une pour la prévisualiser directement au lieu d’y accéder en cliquant.
- Open in new tab: l’icône en forme de flèche ouvre l’aperçu dans un onglet distinct du navigateur. Particulièrement utile lorsque l’aperçu intégré est bloqué ou ne répond pas.
- Console: sur le bord droit, ouvre le panneau contenant les journaux système et les messages d’erreur, votre premier arrêt lorsque quelque chose semble cassé.
La barre d’outils au-dessus de l’aperçu : Design à gauche, puis le bouton de bascule d’appareil (« Show mobile preview »), actualiser, accueil, le sélecteur de page, ouvrir dans un nouvel onglet et Console à droite.
L’icône en forme de flèche ouvre l’app en cours d’exécution dans son propre onglet de navigateur — une échappatoire fiable si l’aperçu intégré se comporte mal.
Comment utiliser la Visionneuse d'App
Étape 1 : Attendez que l’aperçu se charge
Une fois que les agents ont terminé, la Visionneuse d'App charge votre aperçu dans la fenêtre principale. Cela prend généralement de quelques secondes à une minute.
Plus de 2 minutes ? Cliquez sur Refresh dans la barre d’outils. Si c’est toujours bloqué, vérifiez les erreurs dans la Console (voir l’étape 3).
Étape 2 : Prévisualisez et testez les interactions
Une fois chargé, vous regardez votre véritable app :
- Check responsiveness: utilisez le bouton de bascule d’appareil pour passer de la vue bureau à la vue mobile et confirmer que la mise en page tient sur les petits écrans.
- Click through the interactions: ouvrez chaque lien de navigation, appuyez sur les boutons, soumettez les formulaires et déclenchez les états de survol. Une page qui s’affiche n’est pas la même chose qu’une page qui fonctionne.
- Walk the key journey: suivez le parcours le plus important, de la page d’accueil à l’exploration puis à l’accomplissement de l’appel à l’action principal, du début à la fin.
- Test in a real tab: ouvrez l’aperçu dans un nouvel onglet du navigateur pour un dernier passage dans l’environnement réel de vos utilisateurs.
Étape 3 : Vérifiez les erreurs (si quelque chose semble incorrect)
Si l’app ne se charge pas ou semble cassée, sélectionnez Console dans la barre d’outils de la Visionneuse d'App. Le panneau Console s’ouvre sous l’aperçu, tandis que Terminal est une zone distincte d’activité des tâches. Il collecte les journaux système et les messages d’erreur générés pendant la compilation. Les messages d’erreur en rouge peuvent inclure une description de ce qui s’est mal passé ainsi que des détails de diagnostic supplémentaires.
Pour corriger les erreurs :
- Click Resolve dans la notification Signaler un problème, l’IA analyse et corrige automatiquement tous les bugs identifiés, et l’aperçu se recharge une fois les corrections appliquées. Vous pouvez suivre la progression en direct dans le panneau Terminal.
- No Resolve button? Cliquez sur « … » (plus d’options) à côté du dernier message de l’agent et sélectionnez Feedback pour contacter l’équipe d’assistance — incluez votre Chat Link et une capture d’écran de l’erreur.
Pour le flux complet de gestion des erreurs, voir Signaler un problème.
Étape 4 : Modifier votre app
Méthode 1 — Cliquer pour modifier (idéal pour les changements visuels)
Sélectionnez d’abord Design dans la barre d’outils de la Visionneuse d'App pour activer le mode d’édition visuelle. Design n’est disponible que dans les états de projet desktop éligibles pour les utilisateurs disposant d’un accès éditeur ; si vous ne le voyez pas, utilisez la méthode 2 dans le chat. Cliquez ensuite directement sur n’importe quel élément dans l’aperçu. L’élément est sélectionné avec un contour et un badge indiquant ce que vous avez choisi et sa taille, un h1, un bouton, une carte. Une barre intégrée « Ask the Atoms to change… » apparaît directement au niveau de l’élément, afin que vous puissiez décrire un changement limité exactement à cet endroit, et un Éditeur visuel s’ouvre à gauche pour des ajustements pratiques :
- Colors: couleurs du texte, de l’arrière-plan et des bordures via un sélecteur de couleurs.
- Spacing: padding, marge et espacement entre les éléments.
- Typography: taille, graisse et famille de police.
- Layout: alignement, propriétés flexbox et grille.
- Text content: modifiez le texte directement sur place.
Chaque modification met à jour l’aperçu instantanément, afin que vous voyiez le résultat en temps réel. L’Éditeur visuel comprend également un onglet Library pour parcourir et ajouter des ressources préconstruites : icônes, images et composants d’interface, directement dans votre projet.
L’édition par clic en action : le titre est sélectionné (avec son tag et sa taille affichés), et la barre intégrée vous permet de demander une modification exactement sur cet élément.
Méthode 2 — Décrivez-le dans le chat
Dites aux agents ce qu’il faut modifier en langage naturel, et ils l’appliqueront à l’app :
Rendez la couleur d’arrière-plan plus sombre.
Réduisez le padding autour de l’en-tête.
Changez la couleur du bouton en bleu.
Vérifications avant publication
La Visionneuse d'App est la dernière étape avant Publish. Cette checklist aide à détecter les problèmes courants avant que les utilisateurs ne les voient :
- L’aperçu se charge correctement, et la Console n’affiche aucun message d’erreur rouge.
- La mise en page tient en vue mobile, pas seulement sur desktop.
- Chaque interaction fonctionne : navigation, boutons, formulaires et appel à l’action principal.
- Le contenu de remplacement est remplacé, les éléments entre crochets comme [Company name] sont faciles à manquer et très visibles une fois en ligne.
- Chaque page du sélecteur de page reçoit au moins une vérification rapide, pas seulement la page d’accueil.
Tout est bon ? Cliquez sur Publish dans le coin supérieur droit et partagez le lien.
Référence rapide
- Actualiser l’aperçu — icône Refresh dans la barre d’outils de la Visionneuse d'App.
- Changer de vue d’appareil — bouton de bascule d’appareil dans la barre d’outils pour tester différentes tailles d’écran.
- Passer d’une page à l’autre — menu déroulant du sélecteur de page dans la barre d’outils.
- Ouvrir dans un nouvel onglet — icône en forme de flèche dans la barre d’outils.
- Afficher les journaux d’erreurs — sélectionnez Console dans la barre d’outils de la Visionneuse d'App ; le panneau des journaux s’ouvre sous l’aperçu.
- Corriger automatiquement les erreurs — bouton Resolve dans la notification Signaler un problème.
- Modifier les éléments visuels — cliquez sur n’importe quel élément dans l’aperçu pour le sélectionner et ouvrir l’éditeur visuel.
- Signaler un problème — « … » → Feedback sur n’importe quel message d’agent.
FAQ
Pourquoi ma Visionneuse d'App affiche-t-elle un écran de chargement ?
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 Refresh ou vérifiez le panneau Console pour voir s’il y a des erreurs.
Pourquoi ma Visionneuse d'App affiche-t-elle des messages d’erreur rouges ?
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 redevient normal. Les messages rouges sont un signal, pas une crise.
Pourquoi ne puis-je pas supprimer le badge Atoms de ma page publiée ?
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.
Comment corriger les problèmes de mise en page ou de style avec le Mode Design ?
- Ouvrez Mode Design et sélectionnez l’élément exact qui est mal aligné ou mal stylisé.
- Indiquez la page et le breakpoint, le problème actuel, le résultat souhaité et ce qui ne doit pas changer.
- 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.
- Appliquez une modification, puis vérifiez les mises en page desktop et mobile ainsi que les états importants comme le chargement, le vide, le survol et l’erreur.
- Si le résultat casse une autre zone, revenez à la dernière version fonctionnelle et réessayez avec une cible plus précise.
Pourquoi la Visionneuse d'App affiche-t-elle un écran blanc vide ?
- Confirmez si le problème affecte uniquement la Visionneuse d'App, l’URL Preview ou également le site publié.
- Actualisez une fois, ouvrez la Preview dans un nouvel onglet et testez une fenêtre de navigation privée.
- 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.
- 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. Ne rechargez pas votre compte sur la seule base d’un écran vide.
- 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.
Pourquoi ma Preview ou ma Visionneuse d'App affiche-t-elle un écran vide ou charge-t-elle indéfiniment ?
- Vérifiez si seule la Visionneuse d'App, l’URL Preview ou le site publié est affecté.
- Actualisez une fois, ouvrez la Preview dans un nouvel onglet et testez une fenêtre de navigation privée.
- Vérifiez si la tâche ou la compilation en cours est toujours en cours d’exécution et attendez qu’elle se termine.
- Testez la dernière version connue comme fonctionnelle. Si elle fonctionne, comparez la modification récente qui a introduit l’écran vide.
- 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.
Pourquoi mes modifications du Mode Design semblent-elles correctes dans Preview mais pas sur le site publié ?
Preview et le site publié sont des canaux indépendants. Enregistrer ou prévisualiser ne pousse pas les modifications en production.
- Cliquez sur Update dans le panneau Publish — Ouvrez le panneau Publish et cliquez sur Update. Attendez que le statut affiche Up to date.
- 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 écarter le cache du navigateur.
- Vérifiez le numéro de version publiée — Dans le panneau Publish, confirmez que la version correspond à ce que vous voyez dans Preview. Si elles diffèrent, publiez à nouveau.
- 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 Preview, l’URL Prod, des captures d’écran de comparaison côte à côte et l’heure à laquelle vous avez cliqué sur Publish ou Update.
Pourquoi ma page semble-t-elle cassée sur mobile après que l’agent a effectué des modifications ?
Lorsque l’agent modifie la mise en page ou le style, il peut involontairement casser le comportement responsive sur les petits écrans.
- Prévisualisez d’abord en largeur mobile — Utilisez le bouton de 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.
- Utilisez le Mode Design en vue mobile — Passez en Mode Design pendant que le bouton de bascule d’appareil est réglé sur mobile. Cliquez sur l’élément cassé afin que l’agent cible uniquement ce composant à cette taille d’écran.
- Fournissez des contraintes responsive explicites — Dites à l’agent exactement à quoi la mise en page mobile doit ressembler. Exemple : "Sur les écrans de moins de 768px de large, empilez les cartes sur une seule colonne et définissez le padding à 16px."
- Demandez à l’agent de préserver les media queries existantes — Lorsque vous demandez des modifications desktop, 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.
Pourquoi des images sont-elles manquantes ou ne se chargent-elles pas dans la Preview ou sur le site publié ?
Si les images semblent cassées, affichent des icônes de remplacement ou ne se chargent pas :
- Vérifiez les chemins des fichiers image — Ouvrez la section Files et vérifiez que les fichiers image existent aux chemins référencés dans votre code. L’agent a peut-être déplacé ou renommé des fichiers pendant les modifications.
- 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.
- Vérifiez le stockage Cloud — Allez dans Settings > Cloud & AI pour confirmer que vous disposez d’un espace de stockage disponible.
- 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é.
L’agent a modifié le mauvais élément ou a cassé d’autres parties de la page. Que dois-je faire ?
Lorsque l’agent modifie des éléments non liés ou introduit des régressions dans d’autres parties de la page :
- 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.
- Utilisez le Mode Design pour isoler — Passez en Mode Design et cliquez directement sur l’élément spécifique. Cela ancre la portée de modification de l’agent à ce composant.
- 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."
- Une modification par prompt — Effectuez une modification, vérifiez le résultat, puis passez à la suivante.
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.
Pourquoi la Preview affiche-t-elle une erreur de compilation ou une dépendance manquante ?
Si le panneau Preview affiche une erreur de compilation, une bannière d’erreur rouge ou un message concernant des packages manquants :
- 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]."
- Vérifiez les modifications récentes — Si l’erreur est apparue après une modification spécifique, allez dans History et comparez avec la dernière version fonctionnelle afin d’identifier le changement qui a causé la panne.
- 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 modifications progressivement.
- 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 d’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.
Pourquoi mes modifications de police, de couleur ou d’espacement ne prennent-elles pas effet ?
Si l’agent confirme que la modification est faite mais que le résultat visuel n’a pas changé :
- Forcez l’actualisation — Appuyez sur Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows). Les modifications CSS sont fréquemment mises en cache par le navigateur.
- 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."
- Utilisez le Mode Design pour inspecter — Passez en Mode Design 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 la modification demandée a été appliquée.
- 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.
Pourquoi le Mode Design sélectionne-t-il le mauvais composant lorsque je clique ?
Le Mode Design utilise la mise en page visuelle pour déterminer quel composant vous ciblez. Des éléments imbriqués ou qui se chevauchent peuvent provoquer une sélection incorrecte.
- Zoomez — Zoomez sur la zone avant de cliquer. Cela aide à distinguer des composants étroitement imbriqués.
- Utilisez une description textuelle comme solution de secours — Si cliquer sélectionne à plusieurs reprises 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."
- 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é et le Chat Link.