Kaiju Hub AI

線框圖

Wireframes welcome screen with Create Wireframe button

歡迎

線框圖區域讓您可以視覺化地設計和原型化您的介面佈局。在編寫程式碼之前,建立線框圖來規劃您的應用程式結構。當您首次開啟線框圖時,您會看到歡迎畫面,其中有一張建立線框圖卡片可供開始,或使用右上角的+ 新增線框圖按鈕。

主要功能

手動設計

使用視覺化畫布編輯器手動建置線框圖——拖放元件以設計您的畫面。

AI 驅動生成

描述您想要的內容,讓 AI 自動為您生成線框圖文件和幀。

語音輸入

使用內建的麥克風按鈕或中鍵點擊以語音口述您的線框圖描述。

線框圖轉程式碼

線框圖準備好後,直接傳送至程式碼生成——從設計到可運作的程式碼一氣呵成。

建立線框圖

Create New Wireframe Project dialog showing title, platform selection, and Manual/AI-Powered tabs

點擊建立線框圖或+ 新增線框圖以開啟建立對話框。您將輸入標題、選擇目標平台(行動裝置、桌面或網頁)、撰寫線框圖描述,並在手動或AI 驅動模式之間做選擇。

專案設定欄位

標題

為您的線框圖專案命名,以便稍後在線框圖清單中識別。

平台

選擇目標平台——Mobile、Desktop 或 Web——以調整線框圖版面和限制條件。

描述

描述您想建置的內容。AI 驅動模式使用此描述來生成文件和幀。支援透過麥克風按鈕進行語音輸入。

模式

選擇手動以直接進入畫布編輯器,或選擇 AI 驅動以讓 AI 為您生成文件和幀。

手動模式

當您選擇手動標籤並點擊建立時,您將直接進入線框圖畫布編輯器,可以立即開始建構您的畫面。當您已經有明確的設計想法並希望從一開始就擁有完全控制時,這是最佳選擇。

何時使用手動

•

您心中有特定的設計,想要自己建構。

•

您想快速勾勒初步佈局,然後再進行優化。

•

您偏好從一開始就完全控制每個元素。

AI 驅動模式

AI-Powered wireframe creation with title, platform, description, Define Frames tab, model selector, and Generate button

當您選擇AI 驅動標籤時,會出現額外選項。您可以輸入或口述描述,選擇性地定義個別幀,從頂部下拉選單中選擇您偏好的 AI 模型,然後點擊生成讓 AI 為您建立線框圖文件。

運作方式

1

輸入詳情

填寫標題、選擇平台並撰寫專案描述。

2

定義幀(選用)

切換到定義幀標籤以指定您要 AI 生成的個別畫面或檢視。

3

選擇 AI 模型

從下拉選單中選擇您偏好的 AI 模型(例如 Claude Code、Opus 4.6)。

4

生成

點擊生成以開始 AI 文件生成。線框圖專案將在文件建立時出現在您的清單中。

5

建立幀

文件完成後,您可以從線框圖編輯器開始生成每個個別幀。

使用 AI 增強

Enhance with AI dialog showing AI Model selection, Enhancement Instructions field, and Enhance Description button

在 AI 驅動模式中,點擊AI 增強按鈕會開啟一個對話框,讓您使用 AI 改進描述。這會取用您在描述欄位中撰寫的內容,並根據您的指示進行增強——使其在生成線框圖之前更加詳細、結構化或完整。

增強選項

AI 模型

選擇用於增強描述的 AI 模型(例如 Claude Code、Opus 4.6)。

增強指示

選擇性地提供 AI 應如何改進描述的具體指示。支援語音輸入。

增強描述

點擊以執行增強。AI 將根據您的輸入和指示重寫並改進您的描述。

文件生成

Wireframes list showing a project card with Generating Documentation status

在 AI 驅動模式中點擊生成後,您的線框圖專案會出現在線框圖列表中,狀態為正在生成文件...。AI 正在根據您定義的標題、平台、描述和幀來建立結構化文件。

接下來會發生什麼

1

文件生成

AI 根據您的描述建立定義每個畫面、元件和版面的結構化文件。

2

幀生成

文件完成後,您可以開啟線框圖並從編輯器開始生成每個個別幀。

3

精煉

幀生成後,您可以在畫布編輯器中手動調整、新增或移除元件以微調設計。

Kaiju Hub AI 中顯示的所有第三方標誌、商標和品牌名稱均為其各自所有者的財產。它們的使用僅用於識別目的,並不意味著認可、贊助或隸屬關係。