学习目标
- 对Vibe Coding有基本的认知
- 用AI写游戏，体验过程
- 对Vibe Coding过程中的操作进一步深挖，总结
什么是Vibe Coding？
2025 年 2 月，计算机科学家 Andrej Karpathy（OpenAI 创始人之一、前特斯拉 AI 负责人）提出了 Vibe Coding。简单说，就是程序员不用手写代码，直接用自然语言跟 AI 说要做什么，AI 就能生成可用代码。
先动手！体验Vibe Coding
简单的贪吃蛇游戏
打开chat.z.ai/，选中全栈开发
之后输入提示词
帮我做一个贪吃蛇游戏：
1. 用方向键控制蛇的移动
2. 吃到食物后蛇会变长，分数增加
3. 撞到墙壁或自己的身体就游戏结束
4. 要有开始和重新开始按钮
5. 界面要简洁好看
等待几分钟，就会得到一个贪吃蛇游戏
试玩后，发现蛇经过食物的时候不会变长。
输入提示词：
蛇经过食物的时候不会变长，修复这个问题
现在我们的游戏正常运行了！
现代版的 AI 贪吃蛇游戏
上一部分，我们已经用 AI 快速做出了能玩的贪吃蛇原型，也大概了解了 AI 的能力边界。接下来，我们用最简单的 vibe coding 技巧，做一个现代版 AI 贪吃蛇：让蛇吃掉文字，而不是豆子。最后让游戏根据吃掉的文字，自动生成一首诗和一幅画。
通过这个案例，理解这种全新编程方式的核心：怎样用自然语言，把需求说清楚。
快速获得产品原型
重新打开一个对话页面，输入提示词
帮我做一个贪吃蛇游戏，具备最核心的功能即可
之后得到了一个可用的基础贪吃蛇游戏
对产品功能进行细化，逐步得到我们想要的
输入提示词
帮我做一个贪吃蛇游戏，应该具备功能：
1. 我可以吃不同的单词，它们会被收集在一个盒子里
输入提示词
帮我做一个贪吃蛇游戏，应该具备功能：
1. 我可以吃不同的单词，它们会被收集在一个盒子里
2. 当蛇吃了8个单词时，llm 应该根据这些单词创作一首诗，我们可以根据需要重新混合这首诗。
前面的游戏过程省略，现在AI用8个关键词为我们创作了一首诗歌
输入提示词
帮我做一个贪吃蛇游戏，应该具备功能：
1. 我可以吃不同的单词，它们会被收集在一个盒子里
2. 当蛇吃了8个单词时，llm 应该根据这些单词创作一首诗，我们可以根据需要重新混合这首诗。
3. 当诗完成后，下一步将自动根据这首诗创建一幅图像。
虽然还有瑕疵，但是整个过程跑通了，之后可以让AI进一步修改
AI生成的开放世界游戏！
首先给AI提示词，让他帮我生成提示词方案
我想让AI生成一个简单的开放世界游戏（用前端Tree.js技术栈，要3D的）。给我每个步骤需要给AI什么提示词，放在md代码块中
之后按照顺序实现功能即可 输入提示词
帮我用 Three.js 开发一个简单的 3D 开放世界游戏基础场景：
1. 创建 800×600 画布，适配浏览器窗口
2. 生成无限延伸的平面地形（草地材质）
3. 添加天空盒（蓝色渐变天空）
4. 加入第一人称视角相机，支持鼠标拖拽旋转视角
5. 代码需完整可运行，引入 Three.js CDN 链接
游戏中地面显示为黑色，不对，应该是草地材质。这里输入了很草率的提示词“地板显示为黑色了”
现在地板颜色修复了，但是竖直高度差导致地板上有孔洞。输入提示词“绿地不平的地方，有竖直高度差，导致地板像是绿草地上有孔一样，我希望地面是连续的”
emm，这个问题并没有被修复，但是先别管，我们先实现主要的功能。
现在得到
输入提示词
基于之前的 Three.js 开放世界代码，新增功能：
1. 创建简单立方体角色（1×2×1 尺寸，灰色材质）
2. 支持 WASD 键控制角色前后左右移动，空格键跳跃
3. 加入地面碰撞检测，角色不会穿透地形
4. 移动时相机跟随角色，保持第一人称视角
5. 只修改原有代码，保留基础场景，输出完整代码
这里又尝试修复之前的地面间隙问题，提示词“地面还是有竖直高度差导致的空隙，为什么？”这次情况有所减轻，但是还是没有完全修复
得到
现在有了角色，并且可以跳跃，还有阴影
输入提示词
在现有开放世界代码中新增功能：
1. 在地形随机生成 10 个彩色立方体道具（不同颜色）
2. 角色靠近道具（距离<3）时，按 E 键拾取道具
3. 右上角显示已拾取道具数量和颜色列表
4. 拾取后道具从场景中消失
5. 输出完整可运行代码，不改动移动/视角逻辑
得到
输入提示词
优化现有 Three.js 开放世界代码：
1. 添加平行光模拟太阳，支持从东到西的昼夜循环（10秒一轮）
2. 光照强度随时间变化，夜晚添加微弱环境光
3. 天空盒颜色随昼夜切换（白天蓝/黄昏橙/夜晚黑）
4. 地形和角色添加光影材质，显示光照效果
5. 保留所有原有功能，输出完整代码
得到
输入提示词
在现有开放世界代码中新增：
1. 创建 2 个球形 NPC（红色，尺寸 1），在地形随机缓慢移动
2. 角色与 NPC 碰撞时，弹出提示框「遇到了NPC！」
3. NPC 移动时不会穿透地形，也不会走出地形范围
4. 不修改原有移动、拾取、昼夜逻辑，输出完整代码
得到
输入提示词
完善开放世界游戏，新增 UI 与重置功能：
1. 左上角显示移动操作提示（WASD移动/鼠标转视角/E拾取/空格跳跃）
2. 右下角添加「重置游戏」按钮，点击后重置角色位置、道具、NPC
3. UI 用 CSS 美化，半透明背景，不遮挡游戏画面
4. 在不碰到npc的情况下收集所有道具，则游戏胜利，否则失败
5. 输出最终完整可运行代码，包含所有功能
得到
至此，我们实现了简单的3D开放世界游戏。
如何假装自己是 Vibe Coding 大师？
在Vibe Coding过程中，我们最开始为了设计项目的架构，可能需要复杂的提示词来进行约束，但是在开发过程中，每次只让AI实现一个小功能，往往不需要太复杂的提示词，常见的提示词如下：
"代码里有个BUG，修好。"
"我不要零散的代码，给我改好后的完整代码。"
"你给的代码还是有问题。"
"麻烦再改一次，给我完整的修正版代码。"
"刚才还能运行，怎么现在不行了？"
"你没明白我的意思吧？别改我原来的代码。"
"别加任何调试的功能。"
"别做我没让你做的操作。"
"我让你做的功能在哪呢？"
"我只需要一个函数就行。"
"我跟你说过要参考我之前的代码。"
"别加没必要的注释。"
"别改动我原始代码的核心逻辑。"
"帮我改下代码。"
"照着我的代码来改……"
"别改我的变量名！！！"
"别改原来的函数名！"
"别乱动我的变量。"
"别加额外的功能。"
"别只写个框架，要生成能直接用的完整代码。"
既然AI能写代码，我们是否还需要学习相关开发知识？
在Vibe Coding中，我们不太需要开发知识，但是了解一些基础知识是必要的，这样有助于我们向AI清晰地表达自己的开发需求。
如：在html中有各种标签，我们明确了标签类型后，可以让AI修改指定类型的标签。
相关的基础知识也可以询问AI，进行学习。（可以直接问：该项目用了什么技术栈，我该如何学习基础知识？） 可以给AI提示词：给我一个前端基础知识的学习大纲，分章节 根据AI罗列的章节信息，按章询问AI，获取每章内容 用AI找一些官方文档的网站，从而获取更专业的解释
Vibe Coding必备基础知识
模型上下文的上限
模型上下文是 AI 的短期记忆。它是在当前一次对话中，模型能够“看到”和“记住”的所有文本内容，包括你之前输入的问题、系统提供的说明、相关资料等。
AI之所以能听懂你接着之前的话题继续提问，实现一轮轮流畅连贯的对话，靠的就是上下文。如果没有上下文，你说的每一句话对模型来说都是全新问题，它不知道你之前说过什么，自然无法继续对话。
每个大模型都有自己的上下文长度（context window），一般用 token 来计算（可以简单理解成“文字片段”）。现在主流模型的上下文大多在 32k～128k token 之间。上下文越长，模型一次性能“记住和读懂”的内容就越多，比如： • 一次性读完一篇长论文或报告 • 在同一段对话里参考多篇资料、多个案例 • 记住前面多轮复杂讨论的结论
当你输入的内容接近或超出上下文上限时，就会出现这些问题： • 模型忘记前面文本里的细节和关键信息 • 聊着聊着就偏离了最初的话题 • 对同一份材料的回答前后对不上
这些情况并不是模型“变笨”，只是上下文容量满了，是很正常的现象。
实际使用时，我们既想要更长的上下文，也要注意两点： • 上下文越长，消耗的算力越多 • 调用成本也会更高
所以在做 AI 应用时，要在“信息量”和“成本、效率”之间做平衡，比如： • 把需要长期保留的信息先精简总结，再交给模型 • 不重要的旧信息，不要反复塞进上下文里 • 用外部知识库存长期记忆，而不是全都塞给模型上下文
AI的能力如何衡量？
AI的能力可以用指令遵循能力来衡量，它指的是模型在理解指令后，能否准确、完整地按照要求完成任务，比如按照指定的格式、风格和步骤输出内容。
例如这些都是有明确要求的指令：
- 将文章总结为三个要点
- 用正式礼貌的语气写回复邮件
- 把词语翻译成英文并各造一个例句
- 从文章中提取作者、时间和主要事件
指令遵循能力强的模型通常有这些特点：
- 按要求的数量输出内容
- 不遗漏指定的关键信息
- 严格遵守格式与语气要求
- 不做无关的额外延伸
实际使用中，强指令遵循能力非常重要：
- 提升稳定性：多次执行同一指令，输出更一致
- 提升可复现性：方便在产品和流程中测试迭代
- 便于系统集成：规范输出可直接对接程序与工具
因此，在选择和评估大模型时，除了看知识广度与效果，更要重视指令遵循能力。对工业级应用而言，稳定准确执行指令，远比偶尔的惊艳回答更关键。
参考
datawhalechina/easy-vibe: Vibe coding from 0 to 1 ｜把想法做成真正能上线的产品｜首个交互式教程｜零基础也能学会的 AI 编程实战
部分文字用豆包润色
