我用一份 Prompt 让 AI 写出了 3D 小世界编辑器：OPC、Vibe Coding 与 AI 协作范式
别再说“AI 写不了复杂前端”，是你不会写 Prompt。
写在前面
前两天我做了一个“3D 小世界编辑器”——一个摆在桌面上的积木风微型地图，支持点击放置、拖拽视角、多存档。我把需求写成了一份 Markdown 文档，然后扔给 AI。不到 5 分钟，一个完整的 Three.js 应用就跑了进来：鼠标悬停反馈、滚轮缩放、右下角小地图、三个存档、重置随机村庄……全部可用。
这件事让我重新思考：当 AI 能写出完整前端应用时，程序员的核心竞争力到底还剩什么？
答案不是“代码写得快”，而是“让 AI 写得准”。
这篇文章，我就以这个 3D小世界 项目为例，拆解一套可复用的 AI 协作范式 —— OPC（一人公司）+ Prompt 工程 + 五个基础构建块。全文约 3000 字，建议收藏。
一、OPC：一个人就是一支军队
**OPC = One Person Company
传统的软件开发流程是串行的：
PM 写需求 → 设计师出稿 → 工程师搭架构 → 前端写代码 → 测试回归
但在 AI 时代，一个人可以同时扮演所有角色——只要你会给 AI 下指令。
在我的 3D小世界 项目里，我自己就是：
| 角色 | 我的工作 | AI 的工作 |
|---|---|---|
| PM | 定义体验目标（“摆在桌上的小模型”） | —理解内容，构造框架 |
| 设计师 | 确定视觉风格（积木风、奶油背景、磨砂玻璃 UI） | —达成想要的视觉效果 |
| 工程师 | 写出技术约束（Three.js r128、零构建、IIFE 结构） | —使用确定技术栈 |
| 开发者 | —要求代码输出 | 生成完整 HTML/CSS/JS 代码 |
笔记：
OPC 不是“一个人干五个人的活”，而是“一个人用 AI 复用五个人的能力”。
你不需要会写 Three.js 的 OrbitControls 替代方案，你只需要说：“不要 OrbitControls，自己实现拖拽旋转”。
二、Prompt 工程：你写的不是文档，是可执行的规格书
很多同学问：“为什么我的 AI 写出来的代码总是缺胳膊少腿？”
根本原因：你把 AI 当成了“会猜心思的实习生”。
AI 不擅长“大概”“差不多”“你看着办”。它擅长的是清晰、结构、边界。
看看我那份 Prompt 是怎么写的（节选）：
我想要的体验
- 一打开网页就看到一个 8x8 左右的小世界，立刻能玩
- 鼠标点格子放东西（草地、土路、水、石头、树、房子、擦除，7 个工具）
- 拖拽转视角、滚轮缩放
- 鼠标悬停的格子要有视觉反馈
- 关闭网页，下次打开还在
- 能切换 3 个不同的存档世界
- 一个"重置"按钮给我一个程序化生成的随机小村庄
- 一个"清空"按钮全变草地
技术约束
- 单页面，零构建：直接双击 HTML 就能打开
- 文件不超过 3 个：一个 HTML、一个 CSS、一个 JS
- Three.js 用 CDN 引入（r128 版本），不要 ES module，不要 OrbitControls
- 所有 3D 物体用 Three.js 内置几何体拼接
视觉方向
- "积木玩具"风：颜色饱和、对比明确
- 背景是奶油色（CSS 处理），不要天空
- 光照要"日光"感，阴影柔
注意到了吗？每一条都是可验证的 ——
“8x8” → 能数格子
“不要 OrbitControls” → AI 就不会去 CDN 引入 OrbitControls
“不要天空” → 避免 AI 自作主张加个天空盒
吴恩达在《AI for Everyone》里反复强调：
“给 AI 的指令，要像给一个极其聪明但对你领域一无所知的新员工。你要把隐藏假设显式写出来。”
这就是 Prompt 的显式化原则。
三、Vibe Coding & 五个基础构建块
当 Prompt 足够清晰，AI 生成出的代码会自动形成一套稳定的架构。我把这种架构抽象为五个基础构建块（Five Basic Building Blocks） ：
块 1：数据模型（单一数据源）
// world[x][z] = { terrain, kind }
world[0][0] = { terrain: 'grass', kind: null }
所有写入必须通过 setCell(x, z, type)，这是唯一入口。这样存档、清空、重置、小地图渲染都能复用同一套逻辑。
块 2：场景/光照/相机
- 日光色温（
0xfff5e6）+ 柔阴影（shadow map size 1024） - 相机固定在俯视角，但允许绕 Y 轴旋转
块 3：物体工厂（Factory Pattern）
每个格子上的 3D 物体不是外部模型，而是用 Three.js 原生几何体拼装：
| 物体 | 拼法 |
|---|---|
| 树 | 棕色圆柱（树干）+ 绿色圆锥（树冠） |
| 房子 | 立方体（墙体）+ 四棱锥（屋顶） |
| 石头 | 灰色十二面体（Icosahedron） |
块 4：交互系统（射线检测 + 悬停）
- 用 Raycaster 检测鼠标下的格子
- 悬停时高亮（加一个半透边框立方体）
- 点击时调用
setCell更新数据 → 重建物体
块 5：持久化 + 小地图
- localStorage 存三个存档（slot0/1/2）
- 小地图用 Canvas 2D 实时绘制：草地绿色、水蓝色、房子灰色方块、树绿色圆点
笔记：
这 5 个块不是 AI 一次性想出来的，而是我通过 Prompt 里的“代码组织”一节明确要求的：代码组织 - JS 包成 IIFE，逻辑分段（场景/光照/数据/工厂/交互/持久化/小地图/启动），用注释分隔AI 不是建筑师，但你可以给 AI 一张蓝图。
四、吴恩达的“指令清晰度”理论，在代码生成里的实践
吴恩达在《Prompt Engineering for Developers》中提到一个核心观点：
“模型输出的质量，上限由指令的信息密度决定。”
翻译成人话：你写的细节越多，AI 的幻觉越少。
来看一个反面教材（常见错误 Prompt）：
帮我写一个 3D 世界编辑器，能放树和房子。
AI 会给你一个 Three.js 场景，大概率：
- 用了 OrbitControls（但你其实想要自己实现拖拽）
- 房子是个立方体（但你要的是立方体+尖顶）
- 没有存档（因为没提）
正面教材就是我的那份 Prompt —— 我甚至写了：
- 房子用 BoxGeometry（墙体）+ ConeGeometry（屋顶）
- 擦除工具：将格子设为草地
- 鼠标悬停的格子加一个边缘高亮线框
这些细节在人类 PM 看来“啰嗦”，但对 AI 来说就是救命稻草。
一个实用技巧：先写出“不做什么”，比“做什么”更重要。
比如：“不要 OrbitControls，不要天空，不要贴图，不要 ES module” —— 这些“不要”能砍掉 AI 80% 的错误路径。
五、长期 / 大型项目中的 Vibe Coding
有人会说：“你这个小 demo 当然容易，换一个复杂电商系统试试？”
其实我在 Albus（AI 编程助手）上维护过一个中型 CRM 项目，总结出几条长期项目里的 Vibe Coding 生存法则：
1. 用 Prompt 锁住架构，而不是锁住实现
比如你可以写：
架构约束
- 所有 API 调用必须经过 api/ 文件夹下的统一 fetch 封装
- 状态管理使用 Zustand，store 按 domain 拆分
- 组件必须接受 children 或 render prop
这些是架构边界，AI 每次生成新组件时会自动遵循。
2. 建立“Prompt 片段库”
把常用的高质量 Prompt 存成模板。我的模板库里有：
new-threejs-scene.md—— 新建 Three.js 场景的标准提示词localStorage-persistence.md—— 带存档切换的持久化方案glassmorphism-ui.md—— 磨砂玻璃 UI 风格
每次复用只需改几个参数。
3. 把 AI 当“结对编程的 junior”，而不是“自动完成”
你仍然需要 review 代码、调整参数、修复 corner case。但 AI 帮你省掉的是从 0 到 80 分那段时间，而你把精力放在 80 分到 100 分的关键细节上。
笔记：
我不相信“AI 完全替代程序员”，但我相信“会用 AI 的程序员替代不会用 AI 的程序员”。
OPC + Vibe Coding 的终极形态，是一个懂业务、懂架构、懂 Prompt 的人，用 AI 完成一支军队的工作。
六、结语：从“写代码”到“写规格”
回到开头的 3D 小世界编辑器。那份 Prompt 总共不到 300 行 Markdown，包含：
- 体验描述（8 条）
- 技术约束（6 条）
- 视觉方向（4 条）
- UI 风格（4 条）
- 代码组织（5 条）
AI 一次性生成了 450 行 JavaScript（Three.js 场景、射线交互、存档、小地图），而且第一次运行就没有报错。
这件事给我的震撼在于：未来程序员的核心技能，不再是语法和 API 记忆，而是把模糊的人类需求翻译成 AI 能精准执行的规格书。
这份“翻译”能力，需要你懂：
- 产品（用户想要什么）
- 设计（视觉风格如何描述）
- 技术（Three.js 能做什么、不能做什么）
- 工程（代码如何组织才能长期维护）
这就是 OPC 时代的核心竞争力。
如果你也想试试，不妨从复刻这个 3D 小世界开始 —— 把本文的 Prompt 模板拷走，扔给 Claude 或 GPT，你会看到奇迹。
附录：3D小世界 Prompt 模板（可直接使用）
我想做一个网页的"3D小世界编辑器"，定位是"摆在桌子上的小模型"。
体验
- 8x8 世界，鼠标点格子放东西（草地、土路、水、石头、树、房子、擦除）
- 拖拽转视角、滚轮缩放，悬停格子有视觉反馈
- 关闭网页再打开还在，能切换 3 个存档
- 重置按钮：程序化生成随机小村庄（水塘、石堆、房子、树、小路）
- 清空按钮：全变草地
- 首次打开简短操作提示，几秒后淡出
技术约束
- 单文件，双击 HTML 打开，Three.js r128 CDN，不要 OrbitControls
- 不用任何构建工具、不用 React/Vue
- 所有物体用内置几何体（Box/Cone/Cylinder/Icosahedron）拼
视觉
- 积木风，饱和颜色，奶油色 CSS 背景，不要天空
- 日光感光照，柔阴影
UI
- 顶部标题+存档面板（下拉选+重置+清空）
- 底部工具卡片栏（emoji+中文）
- 右下小地图（Canvas 2D，色块+剪影）
- 全部磨砂玻璃风格（半透明+模糊）
代码组织
- HTML 结构，CSS 外观，JS 包成 IIFE，注释分段：场景/光照/数据/工厂/交互/持久化/小地图/启动
- 数据用 world[x][z] = { terrain, kind }，所有写入走 setCell
把这段粘贴给 AI，你就能得到一个完整的 3D 编辑器。
如果这篇文章对你有帮助，欢迎点赞、收藏、转发。
也欢迎在评论区分享你的“AI 协作翻车/神操作”经历，我们一起优化这份 Prompt 模板。
作者： 一个在OPC路上狂奔的小白
掘金专栏： [AI 与前端工程化]
本文遵守 CC BY-NC 4.0 协议，可自由转载，请保留署名。
