Qu’est-ce que l’éditeur visuel ?
L’éditeur visuel vous permet d’apporter des modifications pratiques à votre interface en cliquant directement sur les éléments. Il fonctionne à la fois dans le Canvas de design et dans l’aperçu, vous pouvez donc modifier les maquettes et les applications en cours d’exécution de la même manière. Les modifications simples — changements de texte, ajustements de couleurs, retouches d’espacement — mettent à jour le code source directement sans consommer de crédits IA. Pour les modifications qui impliquent une complexité cachée, l’éditeur visuel délègue automatiquement à Agent. Concepts clés :- Modifications déterministes : Les modifications simples (texte, couleurs, espacement) s’appliquent directement au code source sans passer par Agent
- Pas de coût en crédits : Les modifications directes ne consomment pas de crédits IA — seules les modifications complexes passent par Agent
- Double contexte : Fonctionne de manière identique sur les cadres du Canvas de design et dans l’aperçu
- Synchronisation du code source : Chaque modification met à jour instantanément le code source sous-jacent
L’éditeur visuel est actuellement disponible uniquement sur les navigateurs web. Il n’est pas pris en charge sur l’application mobile ou l’application de bureau.
Comment utiliser l’éditeur visuel
Modifier dans l’aperçu
Cliquez sur n’importe quel élément de votre application en cours d’exécution pour commencer à modifier. Modifiez le texte, les couleurs, l’espacement ou les images — et voyez les modifications appliquées en direct.Effectuer votre modification
Modifiez le texte en ligne, ajustez les couleurs avec le sélecteur, changez l’espacement avec les contrôles de style, ou remplacez les images. Utilisez le volet d’édition dans le chat pour des propriétés supplémentaires comme le rembourrage, la marge, et plus encore.
Modifier sur le Canvas
La même expérience d’édition fonctionne sur les cadres du Canvas de design. Cliquez sur n’importe quel élément dans un cadre pour le modifier — redimensionner, changer le texte, ajuster les couleurs et l’espacement sur vos maquettes sans passer par Agent.Modification du texte
Cliquez sur n’importe quel élément texte et tapez pour le modifier directement. Si le texte est une chaîne dans votre code source, la modification s’applique immédiatement.Ajustements de couleurs
Utilisez le sélecteur de couleurs pour ajuster les couleurs du texte et de l’arrière-plan. Tapez un nom de couleur comme « violet » dans le champ de saisie, ou utilisez la pipette pour choisir une couleur n’importe où sur votre écran.Modifications de style
Ajustez le rembourrage, les marges et la mise en page des éléments à l’aide de contrôles intuitifs.Mises à jour d’images
Sélectionnez des images pour changer les URL ou télécharger vos propres fichiers avec des aperçus instantanés.Ce que vous pouvez faire
- Corrections rapides de texte : Mettez à jour les textes, étiquettes et titres sans ouvrir les fichiers sources
- Exploration des couleurs : Essayez différents schémas de couleurs en cliquant et en ajustant — pas besoin de trouver le bon CSS
- Retouches de mise en page : Affinez le rembourrage, les marges et l’espacement visuellement au lieu de deviner les valeurs en pixels
- Remplacement d’images : Remplacez les images fictives par de vraies ressources en cliquant et en téléchargeant
- Itération de design : Ajustez rapidement les cadres du Canvas pour comparer des directions visuelles sans aller-retours avec Agent
Foire aux questions
Les modifications de l'éditeur visuel coûtent-elles des crédits IA ?
Les modifications de l'éditeur visuel coûtent-elles des crédits IA ?
Les modifications simples et déterministes — changements de texte, sélections de couleurs, ajustements d’espacement — ne consomment pas de crédits IA. Elles mettent à jour le code source directement. Si l’éditeur visuel détecte une complexité cachée, il route la modification via Agent, ce qui utilise des crédits.
Puis-je modifier des éléments qui apparaissent à plusieurs endroits ?
Puis-je modifier des éléments qui apparaissent à plusieurs endroits ?
Oui. La sélection d’un élément rendu dans une boucle ou réutilisé dans plusieurs composants met en surbrillance et met à jour toutes les instances à la fois.
Pourquoi ne puis-je pas modifier le texte de certains éléments ?
Pourquoi ne puis-je pas modifier le texte de certains éléments ?
Les éléments composites constitués de plusieurs sous-éléments ne peuvent pas être modifiés directement dans l’éditeur visuel. Demandez à Agent dans le chat d’effectuer ces modifications à la place.
Comment trouver le code source d'un élément ?
Comment trouver le code source d'un élément ?
Cliquez sur l’étiquette en haut à gauche d’un élément sélectionné pour accéder à son emplacement dans le code source.