Kaiju Hub AI

畫布編輯器

Wireframe canvas editor showing left toolbar, canvas with Dashboard wireframe, right sidebar with element properties, and AI prompt bar

線框圖編輯畫布是您設計和精煉畫面的位置。左側邊欄包含所有繪圖和選取工具,中央是您放置和排列元素的畫布,右側邊欄顯示所選元素的屬性。

工具

選取

點擊以選取和移動畫布上的元素。選取的元素在右側邊欄中顯示其屬性。

方形

在畫布上繪製矩形容器元素。

圓形

在畫布上繪製圓形元素。

文字

新增文字標籤和內容區塊。

圖片

放置圖片佔位元素。

按鈕

新增互動按鈕元素。

輸入

新增表單輸入欄位。

+(新增畫面)

新增新畫面到線框圖專案。

鎖定元素

AI 生成的畫面預設為鎖定——元素在解鎖之前無法移動或調整大小。按Ctrl + D解鎖當前畫面上的所有元素,讓您完全控制重新排列和編輯它們。

故事板模式

Storyboard view showing Dashboard frame card with 45 elements, zoom controls, and right sidebar with screen list

故事板模式讓您以鳥瞰圖的方式查看所有幀及其連接點。使用左側邊欄中的同一按鈕在單畫面畫布和故事板模式之間切換。在故事板模式下,每個畫面顯示為帶有版面預覽的卡片。

故事板功能

幀概覽

一覽所有畫面及其元素數量和視覺預覽。

設定對話框

將任何畫面標記為對話框覆蓋層而非完整頁面。

點擊編輯

點擊任何幀卡片以跳轉到其畫布檢視進行詳細編輯。

縮放控制

使用左側的縮放控制項放大/縮小故事板。

流程連接

視覺化畫面如何透過幀之間的流程動作連接。

元素屬性

雙擊畫布上的任何元素以進入該元素並在右側邊欄開啟其屬性面板。面板有三個標籤:屬性、流程和顏色。從這裡您可以編輯每個元素的位置、大小、樣式和行為。

屬性標籤

位置(X, Y)

設定元素在畫布上的精確像素位置。

尺寸(寬度, 高度)

設定元素的像素尺寸。

Z-Index(圖層順序)

控制哪些元素顯示在其他元素之上。

圓角半徑

使用數值設定圓角,或使用銳角、圓角或膠囊預設值。

文字內容

編輯元素內顯示的文字。

顏色標籤

自訂所選元素的背景、邊框和文字顏色。

流程

流程定義畫面之間的動作和導航。流程是一種動作,例如導航到另一頁面、開啟對話框或路由到不同區域。畫布上的小連結圖示指示哪些元素附加了流程。幀在 AI 生成過程中會自動相互連結,流程連接也會同時建立。

設定流程

1

選取元素

點擊您要新增流程的元素。

2

開啟流程標籤

在右側邊欄中,切換到流程標籤以查看現有連接或新增連接。

3

新增連接

點擊新增第一個連接(或 + 按鈕)以建立新流程。選擇要連結的目標畫面或幀。

4

在畫布上查看

已連接的元素在畫布上顯示小連結圖示以指示它們有流程動作。

區塊連接

區塊連結讓您可以將區塊庫中的區塊直接附加到線框圖元素上。當您雙擊一個元素並在屬性面板中向下捲動時,您會找到區塊連結部分。點擊+ 新增區塊將區塊(HTML、元件或範本)連結到元素。連結的區塊在使用 AI 生成程式碼時會被參考,使特定的 HTML 或元件程式碼更容易附加到線框圖元素上。

AI 編輯

畫布底部的 AI 提示列讓您可以使用 AI 來編輯或建立畫面。從左側下拉選單中選擇您的 AI 模型,描述您想要的變更,AI 將為您修改線框圖。您也可以使用語音輸入或CLI 編輯按鈕進行進階編輯。

上下文感知提示

單一畫面

編輯單一畫面時,提示列顯示「正在編輯 '畫面名稱'」,AI 變更僅套用於該畫面。

故事板

在故事板模式下,AI 可以一次編輯所有幀或使用現有幀作為參考建置新幀。

語音輸入

使用提示列中的麥克風圖示口述您的指示而不用打字。

CLI 編輯

點擊 CLI 編輯以取得進階編輯模式,對 AI 驅動的變更有更多控制。

匯出和整合

線框圖可以匯出、匯入或在建立專案時或在專案中心內直接使用。這使得從線框圖設計過渡到功能專案變得容易,無需手動重新建立設計。

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