邊界框
概述
邊界框是逆向工程的核心互動模型。上傳圖片後，您在個別 UI 元素周圍繪製矩形框以隔離它們。每個邊界框成為可選取的區域，可以指派行為、轉換為程式碼或匯出為線框圖元件。
畫面流程和群組
畫面流程畫布讓您可以將逆向工程工作整理成群組。每個群組可以包含多個畫面圖片，並可分類為畫面（主要頁面、區段或視圖）或彈出視窗（覆蓋層、對話框、彈出窗口、抽屜）。雙擊群組以開啟並處理其圖片。
手動框選
1
選擇框選工具
從圖片畫布上方的工具列中選擇邊界框繪製工具。
2
繪製框
在圖片上點擊並拖曳以在 UI 元素周圍繪製矩形框——按鈕、卡片、導航列、主視覺區段或任何元件。
3
調整大小和位置
拖曳任何框的邊緣或角落以微調其位置和大小。確保它緊密包裹目標元素。
4
指派行為
選取一個框並定義元素應執行的動作——例如「開啟對話框」、「導航到 /about」或「切換下拉選單」。
AI 自動框選
使用 AI 自動框選讓 Kaiju Hub AI 自動偵測並框選圖片中的 UI 元素，而不用手動繪製每個框。AI 分析視覺版面並在偵測到的元件周圍建立邊界框，例如頁首、按鈕、卡片、輸入欄位、圖片和導航項目。
一鍵偵測
點擊自動框選按鈕，AI 掃描整張圖片，在每個偵測到的 UI 元素周圍建立邊界框。
偵測後編輯
自動偵測的框完全可編輯。移動、調整大小、刪除或新增框以精煉結果。
選擇性重新偵測
如果您只需要版面的部分框，可以在圖片的特定區域上執行自動偵測。
導向行為
邊界框的強大之處在於導向每個元素的功能。框選元素後，您可以為其指派互動行為，這些行為將反映在生成的程式碼或線框圖中：
開啟對話框
點擊元素開啟對話框。指定對話框應顯示的內容。
導航至區段
元素作為連結或按鈕，導航到應用程式的另一頁面或區段。
切換內容
元素顯示或隱藏相關內容——下拉選單、摺疊面板、可展開面板。
表單提交
元素觸發表單驗證和提交邏輯。
自訂動作
定義任何自訂行為描述，AI 將生成適當的事件處理器和邏輯。