Génération de code et de maquettes
Aperçu
Une fois que vous avez annoté votre image avec des boîtes englobantes et assigné des comportements, vous pouvez générer soit du code de composant fonctionnel, soit une mise en page de maquette. L'IA utilise les positions des boîtes englobantes, les types d'éléments et les directions de comportement pour produire une sortie précise.
Barre latérale de l'assistant IA
Le panneau Assistant IA est la barre latérale du côté droit utilisée pour configurer et déclencher la génération de code ou de maquettes. Il contient les contrôles suivants :
Sélecteur de modèle de vision
Choisissez quel modèle de vision IA utiliser pour analyser vos images et générer la sortie. Différents modèles peuvent produire différents niveaux de détail et de précision.
Sélecteur de framework
Choisissez le framework cible pour la génération de code (par ex. React, Vue, Svelte). Le code généré utilisera la syntaxe et les modèles du framework sélectionné.
Onglets Composants / Maquettes
Basculez entre la génération de code de composant (onglet Composants) ou de mises en page de maquettes (onglet Maquettes) à partir de vos images annotées.
Groupes d'images
Liste tous vos groupes d'images pour le projet de rétro-ingénierie actuel. Sélectionnez un groupe pour prévisualiser ses images et configurer la génération. Chaque groupe affiche son nombre d'images.
Générer des blocs
Cliquez pour démarrer le processus de génération par IA. L'IA analyse les images du groupe sélectionné ainsi que toutes les annotations de boîtes englobantes et les comportements pour produire la sortie.
Modes de sortie
Générer du code
Convertissez l'image annotée en code de composant fonctionnel pour votre framework cible (React, Vue, Svelte, etc.). Le code généré inclut la mise en page, le style et tous les comportements que vous avez définis sur les boîtes englobantes.
Générer une maquette
Exportez l'image annotée en tant que mise en page de maquette qui s'ouvre dans l'outil Maquette. Chaque boîte englobante devient un élément de maquette que vous pouvez affiner, réorganiser et connecter à d'autres écrans.
Fonctionnalités de génération de code
Sélection du framework
Choisissez votre framework cible avant de générer. Les frameworks pris en charge incluent React, Vue, Svelte, SolidJS, Angular et plus encore.
Mappage des comportements
Les comportements assignés aux boîtes englobantes sont traduits en gestionnaires d'événements, logique de navigation, modales et autre code interactif dans la sortie.
Précision de la mise en page
L'IA utilise les positions et tailles des boîtes englobantes de l'image pour produire une mise en page qui correspond étroitement au design visuel original.
Enregistrer dans les blocs
Les composants générés peuvent être enregistrés directement dans votre bibliothèque de Blocs pour une réutilisation dans vos projets.
Ajouter au projet
Insérez le code généré directement dans votre projet actuel en tant que nouveaux fichiers de composants.
Conseils
Pour de meilleurs résultats, utilisez des images haute résolution avec des éléments d'interface clairs. Dessinez des boîtes englobantes serrées autour de chaque élément pour une génération de code plus précise. Assignez des comportements spécifiques plutôt que des descriptions vagues — « ouvre la modale d'inscription » fonctionne mieux que « fait quelque chose ». L'IA fonctionne mieux avec les mises en page web standard et les modèles d'interface courants.