Kaiju Hub AI

创建器视图

布局概述

创建器视图是一个三面板编辑环境,通过双击组件区域中的任何分组来打开。它在左侧提供区块列表,中间是代码编辑器,右侧是实时预览,底部有 AI 提示框。

Creator View three-panel layout showing block list on the left, Text tab code editor in the center, and Start Creating live preview on the right with AI Prompt Box at the bottom

区块列表面板

左侧面板显示当前组中的所有块。每个块显示带有块名称和编号文件列表的卡片预览。使用顶部工具栏导航返回、在列表视图和分割视图之间切换,或点击+按钮添加新块。

代码编辑器

中间面板是一个带标签页的代码编辑器,用于编写和编辑区块内容。标签页按文件类型组织:

文本

为区块编写文档、Markdown 或纯文本内容。

HTML

编辑组件的 HTML 结构。

CSS

为组件添加样式。

JavaScript

为组件添加交互性和逻辑。

Creator View HTML tab showing editable HTML code with div and h1 elements in the center code editor panel

实时预览

右侧面板渲染组件的实时预览。当您在编辑器中添加HTML、CSS和JavaScript时,预览会更新以显示编译结果。您还可以将文件拖放或将内容粘贴(Ctrl+V)直接到预览区域以添加到块中。使用眼睛图标切换预览,使用BG开关更改预览背景。

Creator View with markdown source in the center editor and rendered Markdown Preview on the right showing Project Name, Table of Contents, and Installation sections

AI 提示框

底部栏是AI提示框。使用它来描述更改并让AI生成或修改块内容。它包括模型选择器、文本输入字段、语音和表情输入以及生成按钮。两个模式切换——A和V——在直接AI模式和变体模式之间切换。

AI Prompt Box in Direct AI Mode showing text input, microphone and emoji icons, orange A toggle active, V toggle, and Generate button

AI 生成类别

AI 模型选择器显示生成类别,决定 AI 生成什么类型的内容:

文本生成

生成或编辑基于文本的内容,如代码、文档和标记。

图像生成

从文本提示创建图像或使用 AI 编辑现有图像(文本转图像和图像转图像)。

视频生成

从文本描述生成视频或将静态图像制成动画视频(文本转视频和图像转视频)。

AI Gen Categories dropdown showing Text Gen, Image Gen, and Video Gen options with Select AI model button

直接 AI 模式 (A)

当A切换激活时,AI直接就地修改您的组件。字段文本显示"描述要应用于组件的更改",并显示一个徽章指示将修改哪个文件(例如"将修改:text")。此模式适合对当前选定文件进行快速、具体的编辑。

Direct AI Mode panel showing lightning bolt icon, Direct AI Mode title, Make direct modifications to your component with AI description, and Will modify text badge

变体模式 (V)

当V切换激活时,AI会生成组件的多个变体而不是就地编辑。字段文本变为"描述您想要生成的变体",并出现一个带有− / +控件的计数器,让您选择要创建多少个变体。生成的变体出现在专用面板中,您可以在其中查看并将首选版本添加到组中。

Variations panel showing No variations yet message with palette icon, prompt input for describing variations, minus and plus counter controls, purple V toggle active, and Generate button

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