Vibe Coding

Vibe Coding 是一种通过自然语言提示词和现成模板来创建交互功能与逻辑的方法，无需编写传统代码。

TL;DR

• 从操作子菜单或侧边栏打开 Vibes。
• 选择一个模板（Templates、Community 或 Yours）并添加到你的 Space。
• 在 Vibe Prompt UI 中用自然语言描述需求并生成行为。
• 调整生成的参数，然后使用 选择 Save as New 或 Save to Parent 保存。
• 准备好后，可将 Yours 中完成的模板发布到 Community。

打开 Vibe 菜单

要打开新的 Vibe UI 或添加新的 Vibe，有两种方式：

1. 操作子菜单 1 → Vibe 2
2. 侧边栏 → Vibes 3

两种方式都会自动打开侧边栏，你可以在其中创建或管理 Vibe。

Vibe 菜单总览

面板顶部有搜索栏，可在当前激活标签页中的 Vibes 里搜索。搜索会按标题过滤结果。1

当前 Vibe 模板菜单分为三类 2：

1. Templates
   Arrival.Space 团队创建的预设功能
2. Community
   其他创作者创建并分享的功能
3. Yours
   你自己保存和自定义的功能

你可以将这些模板 3 添加到 Space 中，用于使用特定功能、扩展现有逻辑，或作为自定义行为的基础。

编辑 Vibe UI

Source Code 1
Source Code 包含 Vibe 的核心功能。
可进行编辑 、下载 或替换 。

提示

仅在你熟悉 JavaScript 时，才建议直接编辑 Source Code。否则修改很容易导致错误。

Prompt Vibe > 2
Prompt Vibe UI 会打开 Vibe Prompt UI。你可以在其中用自然语言描述希望创建的功能。点击 图标也会打开同一界面。

使用 图标可以将 Vibe 保存为模板。

Parameters 3
每个 Vibe 的参数会根据其功能而不同，参数会依据该 Vibe 提供的具体行为添加。

你可以在 Vibe Prompt UI 中明确指定哪些参数应被公开、替换或修改。此外，也可能根据描述的功能自动生成参数。

输入选项	适用场景	“Vibe Coding”中的常见术语
Input Field	短的单行输入（例如姓名、标题、URL、数值）	Text Input / Single-Line Input
Textarea	较长文本内容（例如描述、备注）	Multiline Input
Toggle	开/关选项或布尔设置	Toggle / Switch
Upload Field	需要上传文件时（例如图片、网格模型）	File Upload / Media Upload
Drop-down Menu	需要从预定义选项中选择时	Select / Dropdown
Color Picker	需要定义颜色时（例如物体颜色）	Color Picker
Slider (with Number Input)	可调范围值（例如大小、强度、半径）	Range Slider / Value Control

Vibe Prompt UI

Vibe Tabs 1
Vibe Tabs 显示你与 AI 的当前提示词/聊天会话。你可以快速切换，并同时运行多个 Vibe Coding。若标签名称旁的圆点为绿色，表示该会话正在由 AI 处理。

Usage 2

这里可以查看你的使用百分比。它从 100% 开始并逐步降至 0%。系统区分每小时和每周的 token 限额。

Prompt history 3
Prompt history 会保存你与 AI 的对话，便于回顾之前的消息。

Prompt input field 4
使用输入框描述你希望 AI 生成的功能。

Attach File 5

如果你希望附加图片或 3D 模型 .glb（例如让 AI 将一个盒子替换为你上传的模型），可在此上传。

= Resize 6
使用底部拖拽条可调整 Vibe Prompt UI 的大小，移动端同样适用。

提示

你可以点击并拖动 Vibe Tabs 旁的顶部区域，在浏览器窗口内自由移动 Vibe Prompt UI。

Send Message 5

点击此按钮发送提示词，或按 ↲ Enter。

管理你的 Vibes

添加 Vibes

要添加 Vibe，请先打开 Vibe 菜单。然后点击 New Vibe 1，或对现有模板执行 单击 2。Content List 条目会自动打开。

你可以 多次 添加同一个 Vibe——在一个 Space 内使用数量没有上限。添加一次后，按钮会变为 Add Another，并额外出现 Remove 按钮，用于将该模板作为 Entity 移除。

编辑 Vibes

要编辑已添加的 Vibes，请打开 Space Edit UI，使用悬浮按钮，或切换到 Content 标签页并打开对应条目。

之后你可以通过自然语言（参见 Vibe Prompt UI）或直接编辑源代码（参见 编辑 Vibe UI）来修改 Vibe。

保存 Vibes

若要让 Vibe 在模板列表中可用并能在其他 Spaces 复用，你需要先保存。

使用 图标。点击后会打开子菜单 1：

• Save as New: 创建并保存一个新模板
• Save to Parent: 更新现有模板

如果选择 Save as New，将打开右侧所示 UI。你可以设置模板名称并添加描述。目前预览中仅显示两行。

发布到 Community

当你将 Vibe 保存为模板后，它会出现在 Vibe 菜单的 Yours 标签页中。模板卡片右上角有 按钮，点击可打开子菜单。

Remove from Space

该选项与实体内部的 Delete 作用相同。Vibe 会作为实体被移除，但模板仍保留在列表中。

Capture Screenshot

你可以为模板创建截图。先调整相机位置（建议使用 Free Cam 模式 F），再点击该选项。截图可随时更新。

Upload Screenshot

如果你已有自定义截图，也可以上传。上传后仍可设置首选裁剪区域。

Select

Select 允许你一次删除多个模板。选择后会出现复选框。

Delete

使用此选项可从已保存模板中删除该模板。删除后，如果它在当前 space 中存在，会自动出现一项可同时删除实体的选项。若模板在其他位置被使用，那些实体不会被移除。

Publish to Community

你可以通过此选项将模板分享给社区。它会打开 Vibe UI，你可再次编辑标题和描述。随后模板会经过审核，如不含违规内容则会被批准。

最佳实践

以下最佳实践可帮助你在实时 3D 环境中创建清晰结构、可复用模板和稳定系统。重点在于清晰性、灵活性和性能，确保你的 Vibes 在项目增长时依然易于扩展。

以可复用模式 / 组件思考
以模块化方式构建模板和组件，让 Vibe 能够扩展与演进。

示例（PlayCanvas / 3D）：
你想创建多个由方块组成的金字塔。

与其构建一个所有方块都手动摆放的大型固定结构，不如创建一个 Pyramid 组件。

公开以下输入：

• 每层方块数量
• 方块尺寸
• 颜色 / 材质
• 圆角
• 间距

每个金字塔都基于这些属性动态生成。

这样你可以：

• 在 3D 空间任意位置放置多个金字塔
• 为每个金字塔设置不同材质或比例
• 只需改进一次结构逻辑，即可自动更新所有金字塔

原则：
不要重复手工构建几何体。
构建一个可配置的 3D 生成器组件。

将任务拆分为小步骤
先从简单开始，再逐步迭代。

示例（PlayCanvas / 3D）：
你想构建一个程序化高塔。

不要一开始就同时做动画、材质、灯光和物理等复杂脚本：

1. 先生成堆叠方块。
2. 再添加间距控制。
3. 再添加材质自定义。
4. 最后添加动画。

每一步都应先独立可用，再继续下一步。

原则：
稳定的小系统比不稳定的复杂系统更容易扩展。

只公开有意义的输入
每个设置都应有明确用途。

示例（PlayCanvas / 3D）：
如果你在构建“Glowing Orb”组件，不要暴露 15 个随机参数。

建议只公开：

• 半径
• 发光强度
• 颜色
• 脉冲开/关

不要公开内部 shader 复杂参数或不必要的调试值。

以系统而非对象思考
构建生成器，而不是静态场景。

示例（PlayCanvas / 3D）：
与其手动摆放 50 块石头，不如创建一个 Rock Scatter System。

输入：

• 区域大小
• 石头密度
• 随机缩放范围
• 随机旋转

该系统会在 3D 空间中自动分布石头。

原则：
设计能够自动生成变化的逻辑，而不是手动摆放每个网格。