Enginyeria inversa
Què és l'enginyeria inversa?
L'enginyeria inversa és l'eina de Kaiju Hub AI per a la conversió d'imatges a codi i d'imatges a maquetes dirigida per quadres delimitadors. Puja qualsevol imatge: una captura de pantalla, un prototip de disseny o una foto d'una interfície d'usuari i utilitza els quadres delimitadors per identificar i dirigir què ha de fer cada element de la imatge. Converteix el resultat en codi o en un disseny de maquetes funcional.
Creació d'un projecte d'enginyeria inversa
Fes doble clic a qualsevol element del llenç per entrar-hi i obrir el seu panell de propietats a la barra lateral dreta. El panell té tres pestanyes: Propietats, Flux i Colors. Des d'aquí pots editar la posició, la mida, l'estil i el comportament de cada element.
Com funciona
Pugeu una imatge
Dibuixa quadres delimitadors manualment al voltant dels elements de la interfície d'usuari o utilitza l'auto-quadre de la IA per detectar els elements automàticament. Cada quadre destaca un component diferent de la imatge.
Dirigeix el comportament de l'element
Per a cada quadre delimitador, defineix què hauria de fer: per exemple, fer clic en un botó obre un modal, un enllaç de navegació va a una altra secció o una targeta mostra contingut específic.
Genera codi o maquetes
Converteix la imatge anotada en codi de component funcional per al teu framework de destinació o exporta-la com a disseny de maquetes.
Entra els detalls
Introdueix el títol, selecciona una plataforma i escriu una descripció del teu projecte.
Funcions clau
Càrrega d'imatges
Arrossega i deixa anar o fes clic per carregar qualsevol imatge: captures de pantalla, prototips, fotos d'esbossos dibuixats a mà o interfícies d'aplicacions existents.
Anotació del quadre delimitador
Dibuixa quadres delimitadors precisos al voltant dels elements de la interfície d'usuari per aïllar-los per a la generació de codi o l'assignació de comportament.
Auto-quadre per la IA
Deixa que la IA detecti i quadri automàticament els elements de la interfície d'usuari a la teva imatge, cosa que estalvia temps en els dissenys complexos amb molts components.
Direcció del comportament
Assigna comportaments als elements enquadrats: defineix què hauria de fer fer clic, passar-hi el ratolí per sobre o interactuar amb cada element al codi generat.
Sortida dual
Genera codi o maquetes