程式碼和線框圖生成
概述
使用邊界框標註圖片並指派行為後，您可以生成可運作的元件程式碼或線框圖版面。AI 使用邊界框位置、元素類型和行為導向來產生準確的輸出。
AI 助手側邊欄
AI 助手面板是用於設定和觸發程式碼或線框圖生成的右側邊欄。它包含以下控制項：
視覺模型選擇器
選擇用於分析圖片和生成輸出的 AI 視覺模型。不同的模型可能產生不同程度的細節和準確度。
框架選擇器
選擇程式碼生成的目標框架（例如 React、Vue、Svelte）。生成的程式碼將使用所選框架的語法和模式。
元件 / 線框圖標籤
在從標註圖片生成元件程式碼（元件標籤）或線框圖版面（線框圖標籤）之間切換。
圖片群組
列出目前逆向專案的所有圖片群組。選取群組以預覽其圖片並設定生成。每個群組顯示其圖片數量。
生成區塊
點擊以啟動 AI 生成程序。AI 分析所選群組的圖片以及任何邊界框標註和行為以產生輸出。
輸出模式
生成程式碼
將標註的圖片轉換為目標框架（React、Vue、Svelte 等）的可運作元件程式碼。生成的程式碼包含版面、樣式和您在邊界框上定義的任何行為。
生成線框圖
將標註的圖片匯出為在線框圖工具中開啟的線框圖版面。每個邊界框成為線框圖元素，您可以進一步精煉、重新排列和連接到其他畫面。
程式碼生成功能
框架選擇
生成前選擇您的目標框架。支援的框架包括 React、Vue、Svelte、SolidJS、Angular 等。
行為映射
指派給邊界框的行為會轉換為輸出中的事件處理器、導航邏輯、對話框和其他互動程式碼。
版面準確度
AI 使用圖片中的邊界框位置和大小來產生與原始視覺設計密切匹配的版面。
儲存到區塊
生成的元件可以直接儲存到您的區塊庫中，以便在各專案中重複使用。
新增到專案
將生成的程式碼直接作為新元件檔案插入您目前的專案中。
提示
為獲得最佳結果，請使用具有清晰 UI 元素的高解析度圖片。緊密地在每個元素周圍繪製邊界框以獲得更準確的程式碼生成。指派具體行為而非模糊描述——「開啟註冊對話框」比「執行某些操作」效果更好。AI 在標準 Web 版面和常見 UI 模式下表現最佳。