一轮对话 Vibe Coding 出可直接上手玩的浏览器 3D 游戏

今天看到一个有趣的实验，只给一组参考图和一条完整提示词，Claude Fable 就做出了一个可玩的浏览器 3D 游戏。虽然玩法比较简单，但是作为用于快速验证的游戏 demo 来说，已经足够了，作者也试了下 Codex，说效果更惊艳，我就在想自己试试。

我是怎么做的

要实时预览效果，可以在 github 上建一个空白仓库，开通 gitpage，让 Codex 每一步完成后都把结果推送上去，这样就能不用等待，同步查看游戏效果。

另外，在开始做游戏之前，我们应该对这个游戏的风格、玩法有一个大致的想法，根据这些想法生成游戏概念图。比如我要做一个剑三这样的 MMORPG 游戏，可能会有组队、任务之类的。

下面是生成游戏概念图的提示词

概念图一 开放江湖与门派探索

生成提示词如下。

为一款原创中国武侠 MMORPG 生成游戏环境概念图。画面表现三名年轻侠客前往山中门派，重点传达可以探索的地形、结伴旅行和一个有人生活其中的江湖世界。

场景设在清晨的辽阔山谷。远近有层叠峭壁、瀑布、松林和沿山势修建的门派建筑，索桥与石阶连接不同高度。山下能看见临河城镇，道路上有少量旅人和驮兽。

前景从背后看到三名原创侠客。一人穿蓝灰色长袍持剑，一人穿暗红色轻甲持枪，另一人背着小药箱。天空中有一只白鹤。人物只占画面下方较小区域，让世界的规模成为主体。

使用 16 比 9 横向远景和略高的第三人称游戏镜头。道路应当清楚地通往山门，前景、中景和远景都有可辨认的地标。风格采用精致的电影感游戏概念设计和克制的写实武侠美术。色彩以墨蓝、松绿和石灰色为主，加入少量晨光暖金色。

世界、服装、门派建筑和人物全部原创。可以表现大型中国武侠 MMORPG 的江湖气质，不要复制《剑网3》或其他现有游戏。不要界面、标题、文字、标志和水印，也不要现代物件、夸张奇幻盔甲或现有作品中的标志性场景。

概念图二　五人小队团队战斗

生成提示词如下。

为一款原创中国武侠 MMORPG 生成团队战斗概念图。画面表现五人小队在江边破庙的庭院中保护村民，对抗一名走火入魔的武林高手和两只由他召出的影兽。重点传达清楚的队伍分工、战斗空间和武侠动作。

场景设在暴雨将至的傍晚。旧寺院临着宽阔江面，瓦顶破损，青石板被雨打湿，竹林随风摇动，灯笼发出暖光。远处能看见船只和山影，村民躲在石门后。

五名原创侠客同时配合。持剑者在近处挡住首领，持枪者控制两只影兽，治疗者用小手鼓形成克制的圆形保护区域，弓手站在坍塌屋顶射击，身穿轻装的侠客踏过水面绕向首领后方。首领是画面中央明确的威胁。

使用 16 比 9 横向动态构图和略高的第三人称游戏镜头。五名侠客分布在一个清楚可行走的战斗场地里，角色之间的配合和攻击方向一眼可见。风格采用精致的电影感游戏概念设计和克制的写实武侠美术，材质、布料和武器要可信。

色彩以暴雨蓝、青灰和深竹绿为主，灯笼使用暖琥珀色，武学效果只用少量淡青色、暗红色和金色。人物、服装、武器、敌人和建筑全部原创。不要复制《剑网3》或其他现有游戏。不要游戏界面、标题、文字、标志和水印，也不要现代物件、巨型动漫武器或暴露式奇幻盔甲。

给 Codex 的游戏制作提示词

不用指定任何技术方案，现在 AI 写的浏览器 3D 游戏一般都是用的 Three.js，完全够用了。

Codex 自带图片生成服务，生成的图质量都挺好，这里我们也不用专门指定美术资源服务了。

跟原文一样，写上“独立完成工作，不要再问我任何设计决策”，看看在没有任何后续输入的情况下，它能不能做出一个完整且可以运行的游戏。

请为浏览器制作一个完整、可以玩的原创 3D 武侠 MMORPG 竖切原型。玩家应当能在 10 到 15 分钟内走完一条完整任务线。这个版本不做账号、服务器或真实网络多人功能，重点做好探索、移动、战斗和队伍配合。

我附上了两张概念图。图片 1 是世界与门派参考，用它确定山谷、门派建筑、道路、城镇和整体色彩。图片 2 是战斗参考，用它确定第三人称镜头、五人小队分工、首领战空间和技能表现。请提取设计语言，不要逐像素照抄。

游戏采用完全原创的世界、门派、人物、服装、武器和敌人。可以借鉴大型中国武侠 MMORPG 的类型体验，不要复制《剑网3》或其他现有游戏中的角色、门派、地图、界面、技能图标和标志性视觉设计。

先实现一条可通关的任务。玩家从山门接到求援，沿山路前往江边村落，途中使用轻功跨越断桥。到达破败寺院后保护村民，与四名 AI 队友共同击败一名走火入魔的武林高手，随后返回山门交付任务。每个阶段都要有明确目标和可见反馈。

使用第三人称视角。玩家操作持剑角色，四名 AI 队友分别承担长枪控场、远程弓箭、治疗辅助和轻功突袭。队友必须参与战斗，也要能被首领攻击。玩家可以用一个简单指令让队伍集火目标或回到身边。

战斗要有普通攻击、闪避和两个容易理解的主动技能。首领至少有三种可辨认的攻击，包含近身范围攻击和需要躲避的地面预警，第三种攻击由你根据场景设计。治疗技能和队友集火应当真的改变战斗结果。

轻功必须参与关卡。玩家可以短距离冲刺、二段跳，并在水面或狭窄落脚点上连续移动。断桥路段要让玩家实际使用这些能力，失败后在附近安全位置重新开始。

项目必须以静态文件运行。请尽快创建一个能打开的 index.html，再从这个最小版本逐步开发。最终版本不能依赖服务端，也不能在运行时调用任何 AI API。Three.js 可以内置到项目中，也可以选择更合适的浏览器 3D 技术。

游戏必须适合桌面和手机。桌面端支持 WASD 或方向键移动、鼠标控制镜头、空格跳跃，并提供攻击、闪避、技能和队伍指令按键。移动端提供触控摇杆、镜头拖动和主要动作按钮。手机横屏是主要移动布局，竖屏至少要能正常显示提示并引导玩家旋转设备。

直接调用 Codex 内置的图像生成功能，为游戏生成必要的标题图、远景和纹理素材。把生成结果保存为项目内的静态资源，风格与概念图保持一致。不要在图片中加入文字、标志或水印。

保持代码简单，拆成少量职责清楚的模块，避免单个文件承担全部逻辑。优先完成可玩的主流程，再补画面和声音。请独立完成设计和实现，不要再向我询问设计选择。

开发过程中持续更新 notes.md，记录每轮改动、测试结果、发现的问题和修复方式。每完成一个可以预览的阶段就提交一次。

使用真实浏览器测试游戏。检查桌面端和手机横屏，查看截图、控制台错误和关键状态。发现问题后直接修复，再运行回归测试。

完成后提供简短说明，写清玩法、操作方式、技术实现、生成的图像素材和已经通过的测试。必须确认游戏能从 index.html 启动，并能从接任务一直玩到击败首领和返回交付。

生成的游戏怎么样？

生成的游戏操作都没问题，可以正常的交接任务打 boss，能正常走完游戏流程，基本跟我给的提示词要的效果一致，不过玩法、美术这些可能比较简单，也符合我上面说的，快速验证没问题，成品的可能还需要进一步的打磨。

参考

One-shotting a Raccoon Heist game using Claude Fable 5