線框圖
歡迎
線框圖區域讓您可以視覺化地設計和原型化您的介面佈局。在編寫程式碼之前,建立線框圖來規劃您的應用程式結構。當您首次開啟線框圖時,您會看到歡迎畫面,其中有一張建立線框圖卡片可供開始,或使用右上角的+ 新增線框圖按鈕。
主要功能
手動設計
使用視覺化畫布編輯器手動建置線框圖——拖放元件以設計您的畫面。
AI 驅動生成
描述您想要的內容,讓 AI 自動為您生成線框圖文件和幀。
語音輸入
使用內建的麥克風按鈕或中鍵點擊以語音口述您的線框圖描述。
線框圖轉程式碼
線框圖準備好後,直接傳送至程式碼生成——從設計到可運作的程式碼一氣呵成。
建立線框圖
點擊建立線框圖或+ 新增線框圖以開啟建立對話框。您將輸入標題、選擇目標平台(行動裝置、桌面或網頁)、撰寫線框圖描述,並在手動或AI 驅動模式之間做選擇。
專案設定欄位
標題
為您的線框圖專案命名,以便稍後在線框圖清單中識別。
平台
選擇目標平台——Mobile、Desktop 或 Web——以調整線框圖版面和限制條件。
描述
描述您想建置的內容。AI 驅動模式使用此描述來生成文件和幀。支援透過麥克風按鈕進行語音輸入。
模式
選擇手動以直接進入畫布編輯器,或選擇 AI 驅動以讓 AI 為您生成文件和幀。
手動模式
當您選擇手動標籤並點擊建立時,您將直接進入線框圖畫布編輯器,可以立即開始建構您的畫面。當您已經有明確的設計想法並希望從一開始就擁有完全控制時,這是最佳選擇。
何時使用手動
您心中有特定的設計,想要自己建構。
您想快速勾勒初步佈局,然後再進行優化。
您偏好從一開始就完全控制每個元素。
AI 驅動模式
當您選擇AI 驅動標籤時,會出現額外選項。您可以輸入或口述描述,選擇性地定義個別幀,從頂部下拉選單中選擇您偏好的 AI 模型,然後點擊生成讓 AI 為您建立線框圖文件。
運作方式
輸入詳情
填寫標題、選擇平台並撰寫專案描述。
定義幀(選用)
切換到定義幀標籤以指定您要 AI 生成的個別畫面或檢視。
選擇 AI 模型
從下拉選單中選擇您偏好的 AI 模型(例如 Claude Code、Opus 4.6)。
生成
點擊生成以開始 AI 文件生成。線框圖專案將在文件建立時出現在您的清單中。
建立幀
文件完成後,您可以從線框圖編輯器開始生成每個個別幀。
使用 AI 增強
在 AI 驅動模式中,點擊AI 增強按鈕會開啟一個對話框,讓您使用 AI 改進描述。這會取用您在描述欄位中撰寫的內容,並根據您的指示進行增強——使其在生成線框圖之前更加詳細、結構化或完整。
增強選項
AI 模型
選擇用於增強描述的 AI 模型(例如 Claude Code、Opus 4.6)。
增強指示
選擇性地提供 AI 應如何改進描述的具體指示。支援語音輸入。
增強描述
點擊以執行增強。AI 將根據您的輸入和指示重寫並改進您的描述。
文件生成
在 AI 驅動模式中點擊生成後,您的線框圖專案會出現在線框圖列表中,狀態為正在生成文件...。AI 正在根據您定義的標題、平台、描述和幀來建立結構化文件。
接下來會發生什麼
文件生成
AI 根據您的描述建立定義每個畫面、元件和版面的結構化文件。
幀生成
文件完成後,您可以開啟線框圖並從編輯器開始生成每個個別幀。
精煉
幀生成後,您可以在畫布編輯器中手動調整、新增或移除元件以微調設計。
