Rétro-ingénierie
Qu'est-ce que la Rétro-ingénierie ?
La Rétro-ingénierie est l'outil de Kaiju Hub AI pour la conversion d'image en code et d'image en maquette dirigée par boîtes englobantes. Téléchargez n'importe quelle image — une capture d'écran, une maquette de design ou une photo d'une interface utilisateur — et utilisez des boîtes englobantes pour identifier et diriger ce que chaque élément de l'image doit faire. Convertissez le résultat en code fonctionnel ou en mise en page de maquette.
Création d'un projet de rétro-ingénierie
Cliquez sur le bouton + Nouveau projet de rétro-ingénierie pour créer un nouveau projet. Donnez-lui un nom et une description pour garder votre travail de rétro-ingénierie organisé.
Comment ça fonctionne
Télécharger une image
Téléchargez une capture d'écran, une maquette de design ou n'importe quelle image d'une interface utilisateur dans l'outil de Rétro-ingénierie.
Dessiner ou détecter automatiquement les boîtes englobantes
Dessinez manuellement des boîtes englobantes autour des éléments d'interface, ou utilisez l'auto-boxing par IA pour détecter les éléments automatiquement. Chaque boîte met en évidence un composant distinct sur l'image.
Diriger le comportement de l'élément
Pour chaque boîte englobante, définissez ce qui doit se passer — par exemple, cliquer sur un bouton ouvre une modale, un lien de navigation va vers une autre section, ou une carte affiche un contenu spécifique.
Générer du code ou une maquette
Convertissez l'image annotée en code de composant fonctionnel dans votre framework cible, ou exportez-la comme mise en page de maquette pour un travail ultérieur dans l'outil Maquette.
Fonctionnalités clés
Téléchargement d'image
Glissez-déposez ou parcourez pour télécharger n'importe quelle image — captures d'écran, maquettes, photos de croquis dessinés à la main ou interfaces d'applications existantes.
Annotation par boîtes englobantes
Dessinez des boîtes englobantes précises autour d'éléments d'interface individuels pour les isoler en vue de la génération de code ou de l'attribution de comportements.
Auto-boxing par IA
Laissez l'IA détecter et encadrer automatiquement les éléments d'interface dans votre image, économisant du temps sur les mises en page complexes avec de nombreux composants.
Direction du comportement
Assignez des comportements aux éléments encadrés — définissez ce que cliquer, survoler ou interagir avec chaque élément doit faire dans le code généré.
Double sortie
Générez soit du code fonctionnel (dans votre framework cible) soit une mise en page de maquette qui peut être affinée dans l'outil Maquette.