Bounding Boxes
Panoramica
I bounding box sono il modello di interazione principale del Reverse Engineering. Dopo aver caricato un'immagine, disegni riquadri rettangolari intorno ai singoli elementi UI per isolarli. Ogni bounding box diventa una regione selezionabile a cui possono essere assegnati comportamenti, convertita in codice o esportata come componente wireframe.
Screen Flow & Groups
Il canvas Flusso Schermate ti permette di organizzare il tuo lavoro di reverse engineering in gruppi. Ogni gruppo può contenere più immagini di schermate e può essere tipizzato come Schermata (pagine principali, sezioni o viste) o Modale (overlay, dialoghi, popup, drawer). Fai doppio clic su un gruppo per aprirlo e lavorare con le sue immagini.
Manual Boxing
Seleziona lo strumento box
Scegli lo strumento di disegno bounding box dalla barra degli strumenti sopra il canvas dell'immagine.
Disegna un box
Clicca e trascina sull'immagine per disegnare un box rettangolare intorno a un elemento UI — un pulsante, una scheda, una barra di navigazione, una sezione hero o qualsiasi componente.
Ridimensiona e regola
Trascina i bordi o gli angoli di qualsiasi box per regolarne con precisione la posizione e la dimensione. Assicurati che avvolga strettamente l'elemento di destinazione.
Assegna comportamento
Seleziona un box e definisci cosa l'elemento dovrebbe fare — ad esempio, "apre un modale", "naviga a /about" o "attiva un menu a tendina".
AI Auto-Boxing
Invece di disegnare ogni box manualmente, usa l'auto-boxing IA per far rilevare e delineare automaticamente a Kaiju Hub AI gli elementi UI nella tua immagine. L'IA analizza il layout visivo e crea bounding box intorno ai componenti rilevati come intestazioni, pulsanti, schede, input, immagini e elementi di navigazione.
Rilevamento con un clic
Clicca il pulsante auto-box e l'IA scansiona l'intera immagine, creando bounding box intorno a ogni elemento UI rilevato.
Modifica dopo il rilevamento
I box rilevati automaticamente sono completamente modificabili. Sposta, ridimensiona, elimina o aggiungi nuovi box per perfezionare i risultati.
Rilevamento selettivo
Esegui il rilevamento automatico su una regione specifica dell'immagine se hai bisogno di box solo per parte del layout.
Directing Behavior
Il potere dei bounding box sta nel dirigere cosa fa ogni elemento. Dopo aver racchiuso un elemento, puoi assegnargli comportamenti interattivi che si rifletteranno nel codice o wireframe generato:
Apre modale
Cliccando l'elemento si apre un modale/dialogo. Specifica quale contenuto il modale dovrebbe mostrare.
Naviga a sezione
L'elemento agisce come un link o pulsante che naviga a un'altra pagina o sezione dell'app.
Attiva/disattiva contenuto
L'elemento mostra o nasconde contenuto correlato — menu a tendina, fisarmoniche, pannelli espandibili.
Invio modulo
L'elemento attiva la validazione e l'invio del modulo.
Azione personalizzata
Definisci qualsiasi descrizione di comportamento personalizzato e l'IA generera i gestori di eventi e la logica appropriati.