一个MR烹饪应用和一款XR篮球游戏

（映维网Nweon 2026年01月28日）在XR开发领域，高门槛的技术要求曾令众多创意难以快速验证。如今，AI驱动的“氛围编程”正在改变这一局面。它允许设计者通过简单的自然语言描述，直接生成可运行的XR场景原型，大幅降低了沉浸式体验的创作门槛。

日前，UX Collective撰文分享了两个实际案例（一个MR烹饪应用和一款XR篮球游戏），探讨了AI氛围编程如何帮助我们跨越技术障碍，高效地将空间构想转化为可交互的虚实融合体验：

Vibe Coding氛围编程是当下的热门词汇，这绝非偶然，AI工具赋予了产品设计师一个巨大的新超能力。它们将我们都变成了“创造者”。在本文中，我将展示如何运用氛围编程完成了两个不同的项目：一个悬浮UI烹饪应用和一款XR篮球游戏。

尽管Figma让氛围编程进入了设计师的视野，但这种方法远不止于单一工具。现在有大量令人惊叹的工具服务于不同目的：专注于设计的工具如Stitch；原型引擎如Vercel、Lovable、Google AI Studio；以及可用于生产的环境如Antigravity或Cursor。值得一提的是，即便是我归类为原型制作的工具，都能将其代码发送到GitHub，这为生成生产就绪代码又迈进了一步。

在为移动端和网页应用原型进行了一段时间的“氛围编程”后，我意识到这些工具也应该能够处理XR 3D画布。这引发了一个思考……它们也能为XR体验制作原型吗？

技术上当然是可行的。WebXR是用于网页沉浸式体验的标准API，而像A-Frame这样的框架则提供了现成的XR组件，涵盖输入、基础组件、传送、手势等。由于AI编程工具已经可以调用外部库，我意识到我只需要提供意图，并引导AI实现我想要的空间效果。

于是，我这么做了，而且成功了。突然间，我可以告诉AI我想要什么，它就能创建一个带有头部追踪camera、手柄控制器和功能交互的3D画布。这就是空间氛围编程的开端。

我的空间氛围编程方法

在实践中，为沉浸式体验进行氛围编程与为移动端或桌面端进行氛围编程类似，但多了一个维度。

即使你不是开发者，也能制作功能性原型，但你对技术栈了解得越多，你的控制力就越强。纯粹的“氛围编程”——只关注意图而不考虑“如何实现”——是有效的，并且通常是避免对AI产生偏见的最佳方式。如果你给予AI代理自由，它往往能找到最高效的路径。相反，如果你试图事无巨细地管理它，最终会导致“两个大脑”在同一任务上相互掣肘。

然而，了解这些工具能让你与AI说同一种语言，从而提高速度和精度。例如，A-Frame有一个特定的组件叫做hand-tracking-controls。如果你告诉AI使用这个特定组件，它会生成一个标准化的、开箱即用的解决方案，这比自定义方案产生的问题更少。

我的建议是？专注于意图，但基于已知的最佳组件来建立“规则”。

提示策略：自由 vs 偏见

当涉及技术复杂的项目时，我更倾向于让主要的AI代理来构思解决方案，而不是让另一个AI来润色或“工程化”我的提示语。

根据我的经验，当另一个AI接手我粗略的提示语并进行“润色”时，它会引入偏见。它通常会引导最终的编码代理走向一个它本来不会自然选择的方向，导致更差的结果。当我让AI优化提示语但不规定如何解决问题时，或者干脆使用我原始的、基于意图的提示语时，我得到了更好的结果。

“基于意图”的提示语（在此示例中成功）

以下是我创建的原始提示语。它关注的是“要做什么”，而不是“如何做”的细枝末节：

我希望你创建一个MR烹饪应用。这个应用需要提供透视体验，并在其中渲染一个UI面板。当应用发布后，在VR头显（如Meta Quest 2或3）中打开URL时，用户应在浏览器中看到标准的‘在VR中打开’按钮。点击后，用户可以进入体验。

使用WebXR和A-Frame。我会经常引用A-Frame组件和基础组件，因此请确保尽可能使用原生的A-Frame基础组件。

确保UI在MR体验内渲染。将UI面板放置在用户的左侧，并稍微朝向用户的相机倾斜。目前，在面板中包含占位元素：一个标题、一张图片和一些文字。

输入系统应为手势追踪，使用A-Frame的射线投射组件。准备一个用于分组所有UI元素的结构，因为该应用将包含多个屏幕和导航。使用A-Frame基础构件构建UI。

结果：我得到了一个功能性的3D画布、一个输入系统、穿透式效果和一个就位的UI。尽管不够精致，但这是一个坚实的迭代基础。

“过度工程化”的提示语（在此示例中失败）

然后我尝试使用一个AI来“专业化”这个提示语。这个版本过于规定了：

使用A-Frame框架，创建一个用于混合现实烹饪应用的功能性WebXR原型。

场景与环境设置：

初始化一个为AR/MR透视体验配置的。确保背景透明（移除或设为透明），以便用户看到真实世界。确保WebXR按钮默认启用，以便用户可以在Meta Quest 2/3浏览器上点击‘进入VR/AR’。

camera与输入：

设置一个位置为‘0 1.6 0’的camera装置。实现手势追踪控制。使用hand-tracking-controls组件为左右手添加组件。为双手附加射线投射器（配置为与UI对象交互），以便用户可以通过指点和捏合/选择元素。

UI架构：

创建一个父级作为‘屏幕容器’，用于分组所有UI元素。这将便于未来导航时的可见性切换。放置：将此UI组放置在用户左侧（约x: -1, z: -1.5），并绕Y轴旋转（约rotation=”0 45 0”），使其倾斜面向用户的camera。

UI设计（A-Frame基础组件）：

在UI组内，使用作为背景（深色，略带透明度）构建一个面板。为食谱标题图片添加一个占位符。为食谱标题和说明占位符添加。确保所有UI元素都是父级组的子元素，并在MR视图中正确渲染。”

结果：这个提示语过度引导了AI代理。它最终只是严格遵循指令，而不是找到一个连贯的解决方案，这导致了代码无法运行。这就像微观管理一位平面设计师，如果你确切地告诉他们每个像素放哪里，你将无法得到他们最好的作品。

在设计上迭代

一旦基础确定，我决定提升保真度。我注意到我最初的简要说明中有一定的错误，特别是试图用基础组件构建复杂的UI。我意识到更好的方法是在Figma中设计一个高保真UI，将其导出为PNG，然后导入到体验中。虽然像Figma Make这样的工具在处理指点和捏合输入系统时略有困难，但这足以可视化生产版本可能的样子。

更进一步：使用Gemini 3 Pro实现复杂交互

为了超越UI面板，我使用了Google AI Studio中的Gemini Pro。

这表明，15分钟的提示会话就能生成一个功能完整的WebXR原型，包含物理效果、抓取机制和游戏逻辑。生成的物理效果非常出色，感觉非常流畅和真实。

尽管这种方法需要通过Cloud Run部署（而不是一个简单的“发布”按钮），但设置只需两分钟。结果是一个在VR和AR中都能工作的原型，创造了世界之间的无缝过渡。从这一点出发，添加计数器、音效或纹理就只是几句话的功夫。

✨ 加入一点 Nano Banana 的魔力！ 通过升级到高保真视觉效果，我们可以提供更具说服力和影响力的提案。

这些都是早期的实验，但它们展示了空间氛围编程正变得多么易于上手。我渴望用更强大的工具（如Antigravity）测试这种方法，结合最新的Blender或Unity MCP（模型上下文协议），将打开通往生产就绪代码的大门，而不仅仅是原型。

最重要的收获不是这些工具能走多远，而是作为非开发者的我能走多远。 我现在可以构思一个XR游戏或应用的想法，自行设计，并完全独立地制作原型。创建沉浸式现实的准入门槛从未如此之低。

---

原文链接：https://news.nweon.com/137728