Vibe Coding 终极指南 V1.2

笔记心得 0

作者: Nicolas Zullo, https://x.com/NicolasZu创建日期: 2025年3月12日最后更新日期: 2025年10月6日


入门指南

要开始氛围编码,你只需要以下两个工具之一:

  • Claude Sonnet 4.5,在 Claude Code 中

  • gpt-5-codex (high),在 Codex CLI 中

本指南适用于 CLI 版本(在终端中使用)和 VSCode 扩展版本(Codex 和 Claude Code 都有,界面更新)。

(注:虽然本指南的早期版本使用了 Grok 3,但我们后来转向了 Gemini 2.5 Pro。现在我们使用的是 Claude 4.5(或 gpt-5-codex (high)))

(注2:如果你想使用 Cursor,请查看本指南的 版本 1.1,但我们认为它的能力不如 Codex CLI 或 Claude Code)

正确设置一切是关键。如果你认真想创建一个功能完整且视觉吸引力强的游戏(或应用),请花时间建立坚实的基础。

关键原则: 计划就是一切。 不要让 AI 自主规划,否则你的代码库会变成难以管理的混乱状态。


设置所有内容

1. 游戏设计文档

  • 拿出你的游戏想法,让 GPT-5Sonnet 4.5 创建一个简单的 游戏设计文档,使用 Markdown 格式:game-design-document.md

  • 审查和完善该文档,确保它与你的愿景一致。文档基础一些也没关系——目标是给你的 AI 提供关于游戏结构和意图的上下文。不要过度设计,我们稍后会迭代。

2. 技术栈和 CLAUDE.md / Agents.md

  • GPT-5Sonnet 4.5 为你的游戏推荐最佳技术栈(例如,多人 3D 游戏使用 ThreeJS 和 WebSocket)。将其保存为 tech-stack.md

    • 挑战它,提出最简单但最健壮的技术栈

  • 在终端中,打开 Claude CodeCodex CLI 并使用 /init 命令。它会使用你到目前为止创建的两个 .md 文件。这将创建一套规则,以便正确引导你的 LLM。

  • 关键是审查生成的规则。 确保它们强调模块化(多个文件)并 discourage 单体(一个巨大的文件)。你可能需要手动调整或添加规则。也要在它们触发时进行审查。

    • 重要: 有些规则对于维护上下文至关重要,应该设置为 "Always" 规则。这确保 AI 在生成代码之前总是参考它们。考虑添加以下规则并将其标记为"Always":

      # 重要:
      # 在编写任何代码之前,始终读取 memory-bank/@architecture.md。包含完整的数据库架构。
      # 在编写任何代码之前,始终读取 memory-bank/@game-design-document.md。
      # 添加主要功能或完成里程碑后,更新 memory-bank/@architecture.md。
    • 示例:确保其他(非"Always")规则引导 AI 遵循你的技术栈的最佳实践(如网络、状态管理等)。

    • 如果你想要一个尽可能优化且代码干净的游戏,这个整体规则设置是强制性的。

3. 实施计划

  • GPT-5Sonnet 4.5 提供:

    • 游戏设计文档(game-design-document.md

    • 技术栈推荐(tech-stack.md

  • 让它创建一个详细的实施计划,使用 Markdown(.md)格式,这是为你的 AI 开发人员准备的逐步指导说明。

    • 步骤应该小而具体。

    • 每个步骤必须包含一个测试来验证正确实施。

    • 不要写代码——只需清晰、具体的说明。

    • 专注于基础游戏,而不是完整的功能集(细节稍后添加)。

4. 记忆库

  • 为你的项目创建一个新文件夹,然后在 VSCode 中打开它。

  • 在项目文件夹内,创建一个名为 memory-bank 的子文件夹。

  • memory-bank 添加以下文件:

    • game-design-document.md

    • tech-stack.md

    • implementation-plan.md

    • progress.md(创建这个空文件用于跟踪完成的步骤)

    • architecture.md(创建这个空文件用于文档化文件用途)


基础游戏的氛围编码

现在有趣的部分开始了!

确保一切清晰

  • 在 VSCode 的扩展中打开 CodexClaude Code,或者在项目终端中启动 Claude Code 或 Codex CLI。

  • 提示:读取 /memory-bank 中的所有文档,implementation-plan.md 清楚吗?你有什么问题可以让你 100% 清楚?

  • 它通常会问 9-10 个问题。回答它们并提示它相应地编辑 implementation-plan.md,使其更好。

你的第一个实施提示

  • 在 VSCode 的扩展中打开 CodexClaude Code,或者在项目终端中启动 Claude Code 或 Codex CLI。

  • 提示:读取 /memory-bank 中的所有文档,并继续实施计划的第 1 步。我将运行测试。在我验证测试之前,不要开始第 2 步。验证之后,打开 progress.md 并记录你为未来开发人员所做的工作。然后将任何架构见解添加到 architecture.md 来解释每个文件的作用。

  • 始终从"Ask"模式或"Plan Mode"(Claude Code 中的 shift+tab)开始,一旦你满意,就允许 AI 执行该步骤。

  • 极致氛围: 安装 Superwhisper 与 Claude 或 GPT-5 休闲对话,而不是打字。

工作流程

  • 完成第 1 步后:

  • 将你的更改提交到 Git(如果不熟悉,请向你的 AI 寻求帮助)。

  • 开始新聊天(/new/clear)。

  • 提示:现在浏览记忆库中的所有文件,读取 progress.md 了解之前的工作,然后继续第 2 步。在我验证测试之前,不要开始第 3 步。

  • 重复此过程,直到整个 implementation-plan.md 完成。


添加细节

恭喜,你已经构建了基础游戏!它可能粗糙且缺乏功能,但现在你可以实验和完善它。

  • 想要雾、后期处理、效果或声音?更好的飞机/汽车/城堡?美丽的天空?

  • 为每个主要功能创建一个新的 feature-implementation.md 文件,包含简短的步骤和测试。

  • 逐步实施和测试。


修复错误和困境

  • 如果提示失败或破坏了游戏:

  • 在 Claude Code 中使用 /rewind 并完善你的提示,直到它工作。如果使用 GPT-5,你可以经常提交到 git 并在需要时重置。

  • 对于错误:

    • 如果是 JavaScript: 打开控制台(F12),复制错误,并将其粘贴到 VSCode 中,为视觉故障提供截图。

    • 懒人选项: 安装 BrowserTools 来跳过手动复制/截图。

  • 如果卡住:

    • 回到你最后一次 Git 提交(git reset)并用新提示重试。

  • 如果真的卡住:

    • 使用 RepoPromptuithub 将整个代码库放在一个文件中,并请求 GPT-5 或 Claude 的帮助。


Claude Code 和 Codex 提示

  • Codex CLI 或 Claude Code 在终端中: 在 VSCode 的终端内运行任一工具,以查看差异并提供额外的上下文,而无需离开你的工作区。

  • Claude Code /rewind 如果一个迭代不符合预期,使用此命令将项目回滚到更早的状态。

  • 自定义 Claude Code 命令: 创建像 /explain $arguments 这样的辅助命令,触发提示,如"深入研究代码并理解 $arguments 的工作原理。一旦你理解了,让我知道,我将为你提供我的任务。"这样模型在编辑之前会引入丰富的上下文。

  • 清除上下文: 如果仍需要之前对话的上下文,请经常使用 /clear/compact 清除上下文。

  • 节省时间(风险自负): 使用 claude --dangerously-skip-permissionscodex --yolo 启动 Claude Code 或 Codex CLI,在这种模式下它永远不会请求你确认。

其他提示

  • 小编辑: 使用 GPT-5 (medium)

  • 出色的营销文案: 使用 Opus 4.1

  • 生成优秀的精灵图(2D 图像): 使用 ChatGPT 和 Nano Banana

  • 生成音乐: 使用 Suno

  • 生成音效: 使用 ElevenLabs

  • 生成视频: 使用 Sora 2

  • 更好的提示输出:

    • 添加"尽可能长时间地思考以做对,我不着急。重要的是你精确地遵循我要求并完美地执行。如果我不够精确,请问我问题。"

    • 对于 Claude Code,使用特定短语触发更深的推理:think < think hard < think harder < ultrathink


常见问题

问:我正在制作一个应用,不是游戏,是相同的工作流程吗?答: 大部分是相同的工作流程,是的!不用 GDD(游戏设计文档),你可以做 PRD(产品需求文档)。你也可以使用像 v0、Lovable 或 Bolt.new 这样的优秀工具先制作原型,然后将你的代码移到 GitHub,再克隆到 VSCode 或终端中继续使用本指南。

问:你的空战游戏中的飞机很棒,但我无法在一个提示中复制它!答: 这不是一个提示——而是大约 30 个提示,由特定的 plane-implementation.md 文件指导。使用尖锐、具体的提示,如"在机翼上切出副翼的空间",而不是像"制作一架飞机"这样模糊的提示。

问:为什么 Claude Code 或 Codex CLI 现在比 Cursor 更好?答: 这真的取决于你的喜好。我们强调 Claude Code 更擅长使用 Claude Sonnet 4.5,而 Codex CLI 更擅长使用 GPT-5,比 Cursor 使用它们中的任何一个都更好。让它们在终端中运行解锁了许多更多的开发工作流程:从任何 IDE 工作,通过 SSH 跳转到远程服务器等等。有强大的自定义选项,如自定义命令、子代理和钩子,随着时间的推移将加速开发的质量和速度。最后,如果你使用较低级别的 Claude 或 ChatGPT 计划,那也足够开始了。

问:我不知道如何为我的多人游戏设置服务器答: 问你的 AI。