Skip to content

我的开发经验+vibe-coding 的中文翻译版本

License

Notifications You must be signed in to change notification settings

pillar/vibe-coding-cn

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vibe Coding 指南

Vibe Coding 终极指南 V1.2

一个通过与 AI 结对编程,将想法变为现实的终极工作流程。

作者

Nicolas Zullo, https://x.com/NicolasZu

tukuaiai, https://x.com/123olp

创建日期: 2025年3月12日 最后更新日期: 2025年11月26日


构建状态 最新版本 许可证 主要语言 代码大小 贡献者

📚 相关文档🚀 入门指南⚙️ 完整设置流程🎮 Vibe Coding 开发🐞 问题修复🤝 参与贡献


📚 相关文档


🚀 入门指南

要开始 Vibe Coding,你只需要以下两种工具之一:

  • Claude Sonnet 4.5,在 Claude Code 中使用
  • gpt-5.1-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. 游戏设计文档(Game Design Document)
  • 把你的游戏创意交给 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 文件,生成一套规则来正确引导大模型。
  • 关键:一定要审查生成的规则。 确保规则强调 模块化(多文件)和禁止 单体巨文件(monolith)。可能需要手动修改或补充规则。
    • 极其重要: 某些规则必须设为 "Always"(始终应用),确保 AI 在生成任何代码前都强制阅读。例如添加以下规则并标记为 "Always":
      # 重要提示:
      # 写任何代码前必须完整阅读 memory-bank/@architecture.md(包含完整数据库结构)
      # 写任何代码前必须完整阅读 memory-bank/@game-design-document.md
      # 每完成一个重大功能或里程碑后,必须更新 memory-bank/@architecture.md
      
    • 其他(非 Always)规则要引导 AI 遵循你技术栈的最佳实践(如网络、状态管理等)。
    • 如果想要代码最干净、项目最优化,这一整套规则设置是强制性的。
3. 实施计划(Implementation Plan)
  • 将以下内容提供给 GPT-5Sonnet 4.5
    • 游戏设计文档(game-design-document.md
    • 技术栈推荐(tech-stack.md
  • 让它生成一份详细的 实施计划(Markdown 格式),包含一系列给 AI 开发者的分步指令。
    • 每一步要小而具体。
    • 每一步都必须包含验证正确性的测试。
    • 严禁包含代码——只写清晰、具体的指令。
    • 先聚焦于 基础游戏,完整功能后面再加。
4. 记忆库(Memory Bank)
  • 新建项目文件夹,并在 VSCode 中打开。
  • 在项目根目录下创建子文件夹 memory-bank
  • 将以下文件放入 memory-bank
    • game-design-document.md
    • tech-stack.md
    • implementation-plan.md
    • progress.md(新建一个空文件,用于记录已完成步骤)
    • architecture.md(新建一个空文件,用于记录每个文件的作用)

🎮 Vibe Coding 开发基础游戏

现在进入最爽的阶段!

确保一切清晰
  • 在 VSCode 扩展中打开 CodexClaude Code,或者在项目终端启动 Claude Code / Codex CLI。
  • 提示词:阅读 /memory-bank 里所有文档,implementation-plan.md 是否完全清晰?你有哪些问题需要我澄清,让它对你来说 100% 明确?
  • 它通常会问 9-10 个问题。全部回答完后,让它根据你的回答修改 implementation-plan.md,让计划更完善。
你的第一个实施提示词
  • 打开 CodexClaude Code(扩展或终端)。
  • 提示词:阅读 /memory-bank 所有文档,然后执行实施计划的第 1 步。我会负责跑测试。在我验证测试通过前,不要开始第 2 步。验证通过后,打开 progress.md 记录你做了什么供后续开发者参考,再把新的架构洞察添加到 architecture.md 中解释每个文件的作用。
  • 永远 先用 "Ask" 模式或 "Plan Mode"(Claude Code 中按 shift+tab),确认满意后再让 AI 执行该步骤。
  • 极致 Vibe: 安装 Superwhisper,用语音随便跟 Claude 或 GPT-5 聊天,不用打字。
工作流
  • 完成第 1 步后:
    • 把改动提交到 Git(不会用就问 AI)。
    • 新建聊天(/new/clear)。
    • 提示词:阅读 memory-bank 所有文件,阅读 progress.md 了解之前的工作进度,然后继续实施计划第 2 步。在我验证测试前不要开始第 3 步。
  • 重复此流程,直到整个 implementation-plan.md 全部完成。

✨ 添加细节功能

恭喜!你已经做出了基础游戏!可能还很粗糙、缺少功能,但现在可以尽情实验和打磨了。

  • 想要雾效、后期处理、特效、音效?更好的飞机/汽车/城堡?绝美天空?
  • 每增加一个主要功能,就新建一个 feature-implementation.md,写短步骤+测试。
  • 继续增量式实现和测试。

🐞 修复 Bug 与卡壳情况

常规修复
  • 如果某个提示词失败或搞崩了项目:
    • Claude Code 用 /rewind 回退;用 GPT-5 的话多提交 git,需要时 reset。
  • 报错处理:
    • JavaScript 错误: 打开浏览器控制台(F12),复制错误,贴给 AI;视觉问题截图发给它。
    • 懒人方案: 安装 BrowserTools,自动复制错误和截图。
疑难杂症
  • 实在卡住:
    • 回退到上一个 git commit(git reset),换新提示词重试。
  • 极度卡壳:
    • RepoPromptuithub 把整个代码库合成一个文件,然后丢给 GPT-5 或 Claude 求救。

💡 技巧与窍门

Claude Code & Codex 使用技巧
  • 终端版 Claude Code / Codex CLI: 在 VSCode 终端里运行,能直接看 diff、喂上下文,不用离开工作区。
  • Claude Code 的 /rewind 迭代跑偏时一键回滚到之前状态。
  • 自定义命令: 创建像 /explain $参数 这样的快捷命令,触发提示词:“深入分析代码,彻底理解 $参数 是怎么工作的。理解完告诉我,我再给你任务。” 让模型先拉满上下文再改代码。
  • 清理上下文: 经常用 /clear/compact(保留历史对话)。
  • 省时大法(风险自负):claude --dangerously-skip-permissionscodex --yolo,彻底关闭确认弹窗。
其他实用技巧
  • 小修改: 用 GPT-5 (medium)
  • 写顶级营销文案: 用 Opus 4.1
  • 生成优秀 2D 精灵图: 用 ChatGPT + Nano Banana
  • 生成音乐: 用 Suno
  • 生成音效: 用 ElevenLabs
  • 生成视频: 用 Sora 2
  • 提升提示词效果:
    • 加一句:“慢慢想,不着急,重要的是严格按我说的做,执行完美。如果我表达不够精确请提问。”
    • 在 Claude Code 中触发深度思考的关键词强度:think < think hard < think harder < ultrathink

❓ 常见问题解答

Q:我在做应用不是游戏,这个流程一样吗? **A:** 基本完全一样!把 GDD 换成 PRD(产品需求文档)即可。你也可以先用 v0、Lovable、Bolt.new 快速原型,再把代码搬到 GitHub,然后克隆到本地用本指南继续开发。
Q:你那个空战游戏的飞机模型太牛了,但我一个提示词做不出来! **A:** 那不是一个提示词,是 ~30 个提示词 + 专门的 `plane-implementation.md` 文件引导的。用精准指令如“在机翼上为副翼切出空间”,而不是“做一个飞机”这种模糊指令。
Q:为什么现在 Claude Code 或 Codex CLI 比 Cursor 更强? **A:** 完全看个人喜好。我们强调的是:Claude Code 能更好发挥 Claude Sonnet 4.5 的实力,Codex CLI 能更好发挥 GPT-5 的实力,而 Cursor 对这两者的利用都不如原生终端版。终端版还能在任意 IDE、使用 SSH 远程服务器等场景工作,自定义命令、子代理、钩子等功能也能长期大幅提升开发质量和速度。最后,即使你只是低配 Claude 或 ChatGPT 订阅,也完全够用。
Q:我不会搭建多人游戏的服务器怎么办? **A:** 问你的 AI。

🤝 参与贡献

我们热烈欢迎各种形式的贡献!如果您对本项目有任何想法或建议,请随时开启一个 Issue 或提交一个 Pull Request

✨ 贡献者们

感谢所有为本项目做出贡献的开发者!


📜 许可证

本项目采用 MIT 许可证。


如果这个项目对您有帮助,请不要吝啬您的 Star ⭐!

Star History

Star History Chart

Made with ❤️ and a lot of ☕ by Nicolas Zullo, tukuaiai and 123olp

⬆ 回到顶部

About

我的开发经验+vibe-coding 的中文翻译版本

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Makefile 100.0%