Bounding box
Übersicht
Begrenzungsrahmen sind das zentrale Interaktionsmodell des Reverse Engineering. Nach dem Hochladen eines Bildes zeichnen Sie rechteckige Rahmen um einzelne UI-Elemente, um sie zu isolieren. Jeder Begrenzungsrahmen wird zu einer auswählbaren Region, der Verhaltensweisen zugewiesen, in Code konvertiert oder als Wireframe-Komponente exportiert werden kann.
Flusso schermate e gruppi
Die Bildschirmfluss-Leinwand ermöglicht es dir, deine Reverse-Engineering-Arbeit in Gruppen zu organisieren. Jede Gruppe kann mehrere Bildschirmbilder enthalten und kann als Bildschirm (Hauptseiten, Abschnitte oder Ansichten) oder Modal (Overlays, Dialoge, Popups, Drawers) typisiert werden. Doppelklicke auf eine Gruppe, um sie zu öffnen und mit ihren Bildern zu arbeiten.
Boxing manuale
Rahmen-Werkzeug auswählen
Wählen Sie das Begrenzungsrahmen-Zeichenwerkzeug aus der Symbolleiste über dem Bild-Canvas.
Einen Rahmen zeichnen
Klicken und ziehen Sie auf dem Bild, um einen rechteckigen Rahmen um ein UI-Element zu zeichnen — eine Schaltfläche, eine Karte, eine Navigationsleiste, einen Hero-Bereich oder eine beliebige Komponente.
Größe ändern und anpassen
Ziehen Sie die Kanten oder Ecken eines beliebigen Rahmens, um seine Position und Größe fein abzustimmen. Stellen Sie sicher, dass er das Zielelement eng umschließt.
Verhalten zuweisen
Wählen Sie einen Rahmen aus und definieren Sie, was das Element tun soll — zum Beispiel „öffnet ein Modal", „navigiert zu /about" oder „schaltet ein Dropdown-Menü um".
Auto-boxing IA
Anstatt jeden Rahmen manuell zu zeichnen, verwenden Sie KI-Auto-Boxing, damit Kaiju Hub AI automatisch UI-Elemente in Ihrem Bild erkennt und umreißt. Die KI analysiert das visuelle Layout und erstellt Begrenzungsrahmen um erkannte Komponenten wie Kopfzeilen, Schaltflächen, Karten, Eingabefelder, Bilder und Navigationselemente.
Ein-Klick-Erkennung
Klicken Sie auf die Auto-Box-Schaltfläche und die KI scannt das gesamte Bild und erstellt Begrenzungsrahmen um jedes erkannte UI-Element.
Nach Erkennung bearbeiten
Automatisch erkannte Rahmen sind vollständig bearbeitbar. Verschieben, skalieren, löschen oder fügen Sie neue Rahmen hinzu, um die Ergebnisse zu verfeinern.
Selektive Neuerkennung
Führen Sie die automatische Erkennung in einem bestimmten Bereich des Bildes aus, wenn Sie nur Rahmen für einen Teil des Layouts benötigen.
Direzione del comportamento
Die Stärke der Begrenzungsrahmen liegt in der Steuerung dessen, was jedes Element tut. Nach dem Einrahmen eines Elements können Sie ihm interaktive Verhaltensweisen zuweisen, die im generierten Code oder Wireframe widergespiegelt werden:
Öffnet Modal
Das Klicken auf das Element öffnet ein Modal/Dialog. Geben Sie an, welchen Inhalt das Modal anzeigen soll.
Navigiert zum Abschnitt
Das Element fungiert als Link oder Schaltfläche, die zu einer anderen Seite oder einem Abschnitt der App navigiert.
Inhalte umschalten
Das Element zeigt oder verbirgt zugehörige Inhalte — Dropdowns, Akkordeons, erweiterbare Panels.
Formularübermittlung
Das Element löst Formularvalidierung und Übermittlungslogik aus.
Benutzerdefinierte Aktion
Definieren Sie eine beliebige benutzerdefinierte Verhaltensbeschreibung und die KI generiert die entsprechenden Event-Handler und Logik.