Generació de codi i maquetes
Visió general
Per obtenir els millors resultats, fes servir imatges d'alta resolució amb elements de la interfície d'usuari clars. Dibuixa quadres delimitadors ajustats al voltant de cada element per obtenir una generació de codi més precisa. Assigna comportaments específics en lloc de descripcions vagues: "obre un modal de registre" funciona millor que "fa alguna cosa". La IA funciona millor amb dissenys web estàndard i patrons d'interfície d'usuari comuns.
Barra lateral de l'assistent d'IA
Selector del model de visió
Selector de framework
Selecciona el framework de destinació per a la generació de codi (per exemple, React, Vue, Svelte). El codi generat farà servir la sintaxi i els patrons del framework seleccionat.
Pestanyes de components/maquetes
Alterna entre la generació de codi de components (pestanya de components) o maquetes (pestanya de maquetes) a partir de les imatges anotades.
Imatges de grup
Mostra tots els grups d'imatges del projecte d'enginyeria inversa actual. Selecciona un grup per previsualitzar les seves imatges i configurar la generació. Cada grup mostra el recompte d'imatges.
Genera blocs
Fes clic per iniciar el procés de generació d'IA. La IA analitza les imatges del grup seleccionat juntament amb qualsevol anotació de quadre delimitador i comportament per produir la sortida.
Genera codi
Converteix la imatge anotada en codi de component funcional per al teu framework de destinació (React, Vue, Svelte, etc.). El codi generat inclou el disseny, l'estil i qualsevol comportament que hagis definit als quadres delimitadors.
Modes de sortida
Genera maquetes
Exporta la imatge anotada com a disseny de maquetes per utilitzar-la a l'eina de maquetes. Cada quadre delimitador es converteix en un element de maquetes que pots refinar, reorganitzar i connectar a altres pantalles.
Selecció de framework
Selecciona el teu framework de destinació abans de generar. Els frameworks admesos inclouen React, Vue, Svelte, SolidJS, Angular i molt més.
Funcions de generació de codi
Assignació de comportament
Els comportaments assignats als quadres delimitadors es tradueixen en controladors d'esdeveniments, lògica de navegació, modals i altres codis interactius a la sortida.
Precisió del disseny
La IA utilitza les posicions i mides dels quadres delimitadors de la imatge per produir un disseny que coincideix estretament amb el disseny visual original.
Guarda als blocs
Els components generats es poden guardar directament a la teva biblioteca de blocs per reutilitzar-los en projectes.
Afegeix al projecte
Insereix el codi generat directament al teu projecte actual com a nous fitxers de components.
Llista de tasques
Detalls de la tasca
Consells
Tria quin model de visió d'IA vols utilitzar per analitzar les teves imatges i generar sortida. Diferents models poden produir diferents nivells de detall i precisió.