Inginerie inversă
Ce este ingineria inversă?
Pentru fiecare casetă de delimitare, definiți ce ar trebui să se întâmple — de exemplu, făcând clic pe un buton se deschide un strat modal, un link de navigare merge la o altă secțiune sau un card afișează conținut specific.
Direcționarea comportamentului elementului
Rafinare
Cum funcționează
Generați cod
Convertiți imaginea adnotată în cod de componente funcțional pentru cadrul țintă. Codul generat include aspectul, stilul și orice comportamente pe care le-ați definit pe casetele de delimitare.
Generați machetă
Exportați imaginea adnotată ca machetă în instrumentul Machete. Fiecare casetă de delimitare devine un element de machetă pe care îl puteți rafina, rearanja și conecta la alte ecrane.
Selecția cadrului
Alegeți cadrul țintă înainte de a genera. Cadrurile acceptate includ React, Vue, Svelte, SolidJS, Angular și multe altele.
Maparea comportamentului
Comportamentele atribuite casetelor de delimitare sunt traduse în manipulatoare de evenimente, logică de navigare, straturi modale și alte coduri interactive în ieșire.
Funcții cheie
Detectare cu un singur clic
Generați cod sau machetă
Anotare cu casetă de delimitare
Convertiți imaginea adnotată în cod de componentă funcțional în cadrul dvs. țintă sau exportați-o ca machetă pentru editare ulterioară în instrumentul Machete.
Casete de delimitare
Flux de ecran și grupuri
Editare manuală
Casetele de delimitare sunt modelul de interacțiune de bază al Reverse Engineering. După încărcarea unei imagini, desenați casete dreptunghiulare în jurul elementelor UI individuale pentru a le izola. Fiecare casetă de delimitare devine o regiune selectabilă căreia îi pot fi atribuite comportamente, convertită în cod sau exportată ca o componentă de machetă.
Ieșire duală
În loc să desenați fiecare casetă manual, utilizați detectarea automată AI pentru a permite Kaiju Hub AI să detecteze și să contureze automat elementele UI din imagine. AI analizează aspectul vizual și creează casete de delimitare în jurul componentelor detectate, cum ar fi antete, butoane, carduri, intrări, imagini și elemente de navigare.