从 Prompt 到 3D 小世界编辑器：一次「AI Native / Vibe Coding」的课程复盘与方法论沉淀

关键词：AI Native、Vibe Coding、Three.js、Prompt Engineering、AIGC vs Agent、LLM、Ollama

最近在课程里做了一个很有意思的小练习：用 Prompt 直接生成一个网页上的「3D 小世界编辑器」——像摆在桌面上的迷你模型，而不是开放世界游戏。
这次练习让我对「AI Native 思维」有了更清晰的体感：不是把 AI 当成“搜索引擎/代码生成器”，而是把它当成“可以协作的生产力单元”。

这篇文章会把课堂笔记 + 课后总结整理成一篇可以直接发布在掘金的技术文章，重点包括：

如何把需求拆成可控的 Prompt（并写出一个“能落地”的 Prompt）
为什么 Vibe Coding 也需要行业经验/领域知识
AIGC 和 Agent 的关键差异到底是什么
用一个简单公式理解 LLM 为什么“能工作”
为什么会接触到 Ollama（以及它适合做什么）

1. 目标：做一个「桌面小模型」风格的 3D 世界编辑器

我对这个小项目的定位很明确：

打开网页就能玩：一个 8x8 左右的格子世界
点格子放置：草地/土壤/水/石头/树/房子/擦除（7 个工具）
拖拽旋转视角、滚轮缩放
悬停格子有反馈
关闭网页后数据还在（本地持久化）
支持 3 个存档槽（可切换）
一键「重置」生成一个程序化的小村庄
一键「清空」全变草地
首次打开有简短操作提示，几秒后淡出

这类小项目非常适合做 Prompt 驱动的开发练习，因为它：

目标清晰（“可玩”比“可写”更容易验收）
需求天然可拆（交互、渲染、数据、持久化、UI…）
复杂度中等（需要你做架构约束，否则很容易发散）

2. AI Native 思维：先“设计协作方式”，再“让 AI 写代码”

很多人用 AI 写代码的体验是：

“它能写一段 demo，但我一把需求加复杂就崩了。”

原因往往不是模型不行，而是你没有把“协作方式”先设计好。

这次课程给我的启发是：Prompt 不是“描述需求”，而是把项目的边界、约束、验收标准一次性讲清楚，让 AI 在“正确的围栏”里输出。

我把这类思维总结成一句话：

你不是在“要代码”，你是在“定义一个可执行的工程任务”。

3. 一个可落地的 Prompt：把需求拆成 5 层（体验→架构→视觉→UI→代码组织）

下面是课堂里整理出的 Prompt（我基本原样保留）。它之所以好用，是因为它不仅说“做什么”，还说清楚：

不允许做什么（避免堆工具链、堆外部资源）
怎么组织代码（避免生成一坨不可维护的脚本）
验收标准（避免“看起来像完成了，但不能玩”）

你可以把它当成一个“Prompt 模板”，换成自己的小项目也通用。

我想做一个网页上的“3D小世界编辑器”，定位是“摆在桌子上的小模型”那种感觉，不是开放世界游戏
## 我想要的体验

- 一打开网页能看到一个 8x8 左右的世界，立刻能玩
- 鼠标点格子放东西（草地、土壤、水、石头、树、房子、擦除，7个工具）
- 拖拽转视角、滚轮缩放
- 鼠标悬停的格子有视觉反馈
- 关闭网页，下次打开还在
- 能切换3个不同的存档世界
- 一个“重置”按钮给我一个程序化生成的小村庄（有水塘、石堆、几栋房子、几棵树、连通的小路）
- 一个“清空”按钮全变草地
- 首次打开有个简短的操作提示（“拖拽旋转、滚轮缩放、点格子放置”之类），几秒后自动淡出

## 技术架构

- 单页面，零构建：直接双击 HTML 就能打开
- 文件不超过 3 个：一个 HTML、一个 CSS、一个 JS
- Three.js 用 CDN 引入（r128 版本），不要 ES module，不要 import map，不要 npm
- 不要 React / Vue / TypeScript / Webpack / Vite / OrbitControls
- 所有 3D 物体用 Three.js 内置几何体（Box、Cone、Cylinder、Icosahedron 等）拼，不要外部模型或贴图 

## 视觉方向

- "积木玩具"风：颜色饱和、对比明确
- 背景是奶油色或米色（CSS 处理，不是 Three.js 的天空），不要做天空、不要地平线
- 光照要"日光"感而不是"演播室白炽灯"——草地不要被照成发白
- 阴影要柔，不要硬切

## UI 风格

- 顶部一个标题面板 + 一个存档面板（下拉选 + 重置 + 清空按钮）
- 底部居中浮一个工具卡片栏，每个工具卡片有 emoji 图标 + 中文标签
- 右下一个小地图（canvas 2D），俯视显示当前世界，地形用色块、树和房子用剪影
- 全部面板用浅色磨砂玻璃风格（半透明 + 模糊背景），圆角

## 代码组织

- HTML 只放结构和引用
- CSS 写所有外观
- JS 包成 IIFE，逻辑分段（场景/光照/数据/工厂/交互/持久化/小地图/启动），用注释分隔
- 数据用 `world[x][z] = { terrain, kind }`，所有写入走唯一入口（比如 setCell）

3.1 为什么这个 Prompt 结构有效？

我把它背后的方法论拆成 4 点：

先给体验，后给技术：先对齐“玩起来是什么样”，再约束“怎么实现”
明确“禁止项”：禁止项越清晰，越能减少模型发散（尤其是前端工程）
把“隐性经验”写出来：比如代码组织、数据结构、唯一写入口（setCell）
这些其实就是“领域知识/工程经验”，写出来才会变成可复用的产物
写出验收点：持久化、存档、重置生成、提示淡出……都是可验证的功能点

4. Vibe Coding 也需要行业经验/领域知识

课程里我最有共鸣的一句话是：

高端的 Vibe Coding 需要行业经验以及领域知识。

原因很现实：模型可以补“手速”，但很难替你补齐“边界感”。

举几个在这个 3D 小项目里非常典型的例子：

你不说“不要 OrbitControls”，它很可能直接给你塞 OrbitControls（但你又说不想用构建工具/模块化）
你不说“零构建、双击 HTML 可运行”，它很可能默认现代工程（Vite + npm + module）
你不说“不要外部模型贴图”，它可能去加载 glTF 或贴图（然后离线打不开）
你不说“所有写入走 setCell”，它会到处改 world 数据，后续很难加持久化/撤销/同步小地图

所以所谓“会用 AI 写代码”，更像是两种能力的叠加：

你能把工程约束讲清楚（经验）
AI 能在约束内补齐实现细节（手速）

5. AIGC vs Agent：差的不只是“会不会写代码”

在课堂笔记里有一个很关键的对比：AIGC 和 Agent 的区别。

我的理解是：

AIGC：偏“内容生成”。你给输入，它给输出（代码/文案/图片）。
常见体验是“生成一段代码给你复制粘贴”。
Agent：偏“任务完成”。除了生成内容，它还具备“手脚”，能把任务串起来执行：
创建文件、写入代码、运行、修错、迭代、产出最终可交付物。

这也是为什么现在很多 Coding Agent（例如 Cursor / Claude Code / Trae 等形态）会更强调：

不离开编辑器
能改多文件
能执行命令/运行测试
能按步骤推进一个工程任务

生成代码并不等于交付。Agent 的价值是把“生成 → 落地”的链路打通。

6. 模型选择：复杂项目确实需要更强的模型

课后总结里我写了一条非常真实的体会：

复杂的项目也需要更高端的大模型才能满足相应的需求。

并不是说小模型完全没用，而是你要学会匹配任务：

小功能 / 局部代码：便宜模型足够（尤其是“你能验收”的部分）
架构设计 / 多模块协作 / 强约束交付：更强的模型更稳

换句话说：

你的 Prompt 和验收能力决定上限，模型能力决定下限。

当任务复杂时，“下限”会变得特别重要：输出一坨能跑但不可维护的东西，反而会把你拖进“人工 Debug 地狱”。

7. 用一句话（和一个公式）理解 LLM：它为什么能生成看起来合理的东西？

课堂笔记里对 LLM 的定义非常凝练：

大模型是依托海量数据训练、参数量庞大的深度神经网络模型，具备逻辑推理与内容生成能力（包括生成代码）。

我特别喜欢用一个极简公式来建立直觉：

y = f_θ(x)

x：输入（文本/上下文的向量表示）
y：输出（下一段文本/代码序列）
θ：模型参数（权重）
fθ：由参数构成的映射函数

把它翻译成人话就是：

LLM 本质上是在做“概率上的续写”：在给定上下文 x 的情况下，算出最可能的输出 y。

这也解释了为什么 Prompt 很重要：Prompt 其实是在塑造 x 的分布，从而把输出 y 拉向你想要的形态。

8. 为什么会接触 Ollama：把“推理能力”搬到本地

课程还提到了 Ollama：一个本地大模型管理与运行平台，你可以在本机安装、运行一些开源模型。

它解决的是一个很实际的问题：

有些场景你希望 离线可用 / 数据不出本地 / 成本可控
或者你只是想把本地模型当成“一个随叫随到的推理服务”

当然，它也有天然限制：本地算力（CPU/GPU/内存）决定你能跑多大的模型、能多快。

9. 最后给一个「可复用的 Prompt Checklist」

如果你也想用 Prompt 做一个“能落地的小项目”，我建议你写 Prompt 时至少包含：

体验目标（用户怎么玩、怎么验收）
技术边界（允许/禁止：框架、构建方式、依赖来源）
数据结构（核心数据怎么存）
代码组织（模块分段、唯一写入口、命名约束）
迭代方式（先出可跑 MVP，再补功能点）

Prompt 写得越像“工程任务书”，模型输出就越像“可交付的工程结果”。

参考

Three.js r128（cdnjs）：cdnjs.com/libraries/t…
Ollama Download：ollama.com/download