Boîtes englobantes
Aperçu
Les boîtes englobantes sont le modèle d'interaction central de la Rétro-ingénierie. Après avoir téléchargé une image, vous dessinez des boîtes rectangulaires autour d'éléments d'interface individuels pour les isoler. Chaque boîte englobante devient une région sélectionnable à laquelle peuvent être assignés des comportements, convertie en code ou exportée comme composant de maquette.
Flux d'écran et groupes
Le canevas de flux d'écrans vous permet d'organiser votre travail de rétro-ingénierie en groupes. Chaque groupe peut contenir plusieurs images d'écran et peut être typé comme Écran (pages principales, sections ou vues) ou Modal (superpositions, dialogues, popups, tiroirs). Double-cliquez sur un groupe pour l'ouvrir et travailler avec ses images.
Encadrement manuel
Sélectionner l'outil de boîte
Choisissez l'outil de dessin de boîte englobante dans la barre d'outils au-dessus du canevas d'image.
Dessiner une boîte
Cliquez et faites glisser sur l'image pour dessiner une boîte rectangulaire autour d'un élément d'interface — un bouton, une carte, une barre de navigation, une section héros ou n'importe quel composant.
Redimensionner et ajuster
Faites glisser les bords ou coins de n'importe quelle boîte pour affiner sa position et sa taille. Assurez-vous qu'elle enveloppe étroitement l'élément cible.
Assigner un comportement
Sélectionnez une boîte et définissez ce que l'élément doit faire — par exemple, « ouvre une modale », « navigue vers /about » ou « bascule un menu déroulant ».
Auto-boxing par IA
Au lieu de dessiner chaque boîte manuellement, utilisez l'auto-boxing par IA pour que Kaiju Hub AI détecte et délimite automatiquement les éléments d'interface dans votre image. L'IA analyse la disposition visuelle et crée des boîtes englobantes autour des composants détectés comme les en-têtes, boutons, cartes, champs de saisie, images et éléments de navigation.
Détection en un clic
Cliquez sur le bouton auto-box et l'IA scanne l'image entière, créant des boîtes englobantes autour de chaque élément d'interface détecté.
Modifier après la détection
Les boîtes détectées automatiquement sont entièrement modifiables. Déplacez, redimensionnez, supprimez ou ajoutez de nouvelles boîtes pour affiner les résultats.
Re-détection sélective
Exécutez la détection automatique sur une région spécifique de l'image si vous n'avez besoin de boîtes que pour une partie de la mise en page.
Direction du comportement
La puissance des boîtes englobantes réside dans la direction de ce que fait chaque élément. Après avoir encadré un élément, vous pouvez lui assigner des comportements interactifs qui seront reflétés dans le code ou la maquette générés :
Ouvre une modale
Cliquer sur l'élément ouvre une modale/dialogue. Spécifiez quel contenu la modale doit afficher.
Navigue vers une section
L'élément agit comme un lien ou un bouton qui navigue vers une autre page ou section de l'application.
Bascule le contenu
L'élément affiche ou masque le contenu associé — menus déroulants, accordéons, panneaux extensibles.
Soumission de formulaire
L'élément déclenche la validation du formulaire et la logique de soumission.
Action personnalisée
Définissez n'importe quelle description de comportement personnalisé et l'IA générera les gestionnaires d'événements et la logique appropriés.