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 轴顺序(层级顺序)

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

边框圆角

使用数值设置圆角,或使用直角、圆角或胶囊预设。

文本内容

编辑元素内部显示的文本。

颜色标签页

为所选元素自定义背景、边框和文本颜色。

流程

流程定义屏幕之间的操作和导航。流程是诸如导航到另一个页面、打开模态框或路由到不同区域的操作。画布上的小链接图标指示哪些元素附加了流程。AI 生成期间帧会自动相互链接,并创建流程连接。

设置流程

1

选择元素

点击要添加流程的元素。

2

打开流程标签页

在右侧边栏中,切换到流程标签页以查看现有连接或添加新连接。

3

添加连接

点击"添加第一个连接"(或 + 按钮)创建新流程。选择要链接到的目标屏幕或帧。

4

在画布上查看

已连接的元素在画布上显示小链接图标,表示它们有流程操作。

区块连接

块连接允许您将块库中的块直接附加到线框图元素。双击元素并在属性面板中向下滚动,您会找到块连接部分。点击+ 添加块将块(HTML、组件或模板)链接到元素。连接的块在使用AI生成代码时被引用,使得将特定的HTML或组件代码附加到线框图元素变得容易。

AI 编辑

画布底部的AI提示栏允许您使用AI编辑或创建屏幕。从左侧下拉菜单中选择AI模型,描述您想要的更改,AI将为您修改线框图。您还可以使用语音输入或CLI编辑按钮进行高级编辑。

上下文感知提示

单屏

编辑单个屏幕时,提示栏显示"正在编辑'屏幕名称'",AI 更改仅应用于该屏幕。

故事板

在故事板模式下,AI 可以一次编辑所有帧,或使用现有帧作为参考构建新帧。

语音输入

使用提示栏中的麦克风图标口述您的指令而不是打字。

CLI 编辑

点击 CLI 编辑以获得对 AI 驱动更改的更多控制的高级编辑模式。

导出与集成

线框图可以导出、导入或在创建项目时或在项目中心内直接使用。这使得从线框图设计过渡到可工作的项目变得简单,无需手动重新创建设计。

Kaiju Hub AI 中显示的所有第三方徽标、商标和品牌名称均为其各自所有者的财产。它们的使用仅用于识别目的,并不意味着认可、赞助或隶属关系。