Outils de capture

Donnez à l’IA un contexte visuel précis. Captures d’écran, sélection d’éléments et images.

Plus le contexte visuel que tu fournis à l’IA est précis, meilleurs seront ses modifications. Proyecta propose plusieurs outils de capture.

Sélectionner un élément (Visual Editor)

En mode Visual Editor, chaque élément de l’aperçu devient cliquable. Survole-le pour le mettre en surbrillance, clique dessus pour le sélectionner. L’élément sélectionné est mis en évidence par un calque superposé, et ses propriétés modifiables (texte, couleurs, espacement, polices, bordures, effets) apparaissent dans le panneau latéral.

Une fois un élément sélectionné, tu peux soit :

• Le modifier directement — changer ses propriétés en ligne sans rédiger de prompt
• Interroger l’IA à son sujet — la sélection est transmise en tant que contexte, ce qui te permet de dire "make this button bigger" ou "move this section above the hero" et l’IA sait exactement de quoi tu parles

Les éléments dynamiques (classNames calculés, rendu conditionnel, expressions) basculent automatiquement vers le chat IA avec un prompt structuré.

Consulte Visual Edit pour la liste complète des propriétés modifiables.

Coller ou glisser des captures d’écran dans le chat

Le champ de saisie du chat accepte les images directement :

1. Coller — copie une capture d’écran avec le raccourci de ton système (Cmd+Shift+4 sur Mac, Win+Shift+S sur Windows) et colle-la dans le chat
2. Glisser — dépose n’importe quel fichier image sur le champ de saisie du chat

Formats pris en charge : PNG, JPEG, WebP, GIF, AVIF. Taille maximale : 10 Mo par image.

Captures d’écran de l’aperçu

L’IA peut prendre ses propres captures d’écran de ton aperçu à tout moment via un outil intégré preview_screenshot. Tu verras les captures d’écran s’afficher directement dans le chat. L’IA les déclenche automatiquement lorsqu’elle doit vérifier ses modifications ou comprendre l’état actuel de ton application.

L’outil de capture peut cibler des routes spécifiques (par ex. /dashboard, /settings) et enregistre les dimensions, ce qui aide l’IA à raisonner sur la mise en page et l’espacement.

FAQ

Comment pointer l’IA vers un bouton ou un texte spécifique ?

Utilise le mode Visual Editor et clique sur l’élément. Cela transmet à l’IA une référence précise et structurée — bien plus efficace que de décrire l’élément avec des mots.

Prochainement disponible

Les outils de capture suivants sont implémentés en interne, mais pas encore exposés dans l’interface :

• Annoter — capture l’aperçu actuel et dessine des flèches, des rectangles, des cercles, des traits libres et des étiquettes textuelles avant de l’envoyer à l’IA.
• Enregistrement d’écran — enregistre une interaction en plusieurs étapes (clics, navigation, animations) et joint les frames capturées à ton message de chat. Idéal pour les bugs liés au timing qu’une seule capture d’écran ne permet pas de reproduire.