停止 Vibe Coding，开始 Learn by Building

"Vibe Coding"听起来好像凭着感觉走，AI 就能帮你把应用写出来。但实际试过的人都知道：一句话丢过去，代码根本跑不起来；让它改 bug，刚才还能跑的功能也一起改崩了；折腾两天，文件夹里几十个文件，不知道哪个是干嘛的，不知道怎么发布、怎么迭代，项目最终烂尾。

核心原因在于：Vibe Coding 虽然名字里有个"Vibe"，但它其实有一套步骤明确的工作方法。本教程介绍一套可以持续运转、错误率极低、新手友好的 Vibe Coding 方法——构建循环。不需要懂代码，只要管理好文件夹、会跟 AI 聊天，就能轻松做出完整项目。所有工具免费、国内可用。

需要的工具只有两个，均免费且国内可用：VS Code + Claude Code。

VS Code 是微软出品的免费可视化代码编辑器，支持中文界面，Windows 和 Mac 都能用。下载安装包后一路下一步即可完成安装。界面结构：左侧活动栏、中间文件编辑区、右侧文件目录树。

https://code.visualstudio.com/

Claude Code 是 Anthropic 开发的 AI 编程框架，本身免费。可以接入 Claude Pro 账号，也可以通过 cc switch 命令接入国产模型使用。

安装步骤：

1. 打开 VS Code，点击左侧扩展图标
2. 搜索 "Claude Code"，找到 Anthropic 官方插件安装
3. 安装完成后左侧会出现 Claude Code 图标
4. 点击图标，按提示接入模型（登录 Claude Pro 或使用 cc switch 切换国产模型）
5. 接好后随便发条消息，有回复即表示就绪

很多人装好工具后的第一反应是跟 AI 说"帮我写一个 XX 应用"，然后 AI 疯狂输出代码，写到一半发现文件夹里堆了几十个文件，不知道哪个是干嘛的，想要指挥 AI 干活也不知道从哪下手。

问题的核心在于：没有规划好 Vibe Coding 的工作区。

一个规范的工作区应包含以下结构：

project-root/
├── docs/              # 产品文档区
│   └── prd.md         # 产品需求文档
├── assets/            # 视觉素材区
│   ├── design/        # 设计稿、参考图
│   ├── bug/           # 报错截图
│   └── reference/     # 参考设计
├── notes/             # 学习资料区
│   └── xxx-notes.md   # 开发过程中积累的知识笔记
├── [project-code]/    # 代码文件夹（独立，不与其他内容混放）
├── AGENTS.md          # AI 入职说明书（根目录）
└── claude.md          # AI 项目规则（根目录）

各文件夹作用：

• docs（产品文档区）：存放项目开发前写的核心文档。驱动 AI 精准高效干活不能仅凭一句话，作为产品设计者本身需要有充分输入。
• assets（视觉素材区）：设计稿、参考图、测试截的 bug 图全归一处。design 放效果图，bug 放报错截图，reference 放参考设计。给 AI 反馈问题时把图片放在这里，再引用文件夹内的内容向 AI 反馈。
• notes（学习资料区）：开发过程中记的笔记。例如 Windows 电脑开发 iOS 应用后怎么打包上架、上架审核步骤、邮件怎么回复等。
• 代码文件夹：AI 写的代码全放在这一个文件夹里，纯代码，不跟任何其他东西混在一起。
• AGENTS.md：给 AI 的入职说明书，放在根目录，AI 一打开项目就读到。每次开新对话不用重新交代，换了开发工具或模型也可以直接让它阅读。
• claude.md：给 AI 看的项目规则，包括使用什么编程语言、希望 AI 怎么开发等。

这些文件夹不需要手动创建。在项目根目录下对 Claude Code 说：

"请帮我在当前项目根目录下创建以下开发工作区：docs 产品文档、assets 下面三个子目录 design/bug/reference、notes 学习笔记，以及一个独立的代码文件夹。所有文档放 docs，遇到新知识记到 notes，设计稿图标和视觉素材放进 assets。"

一段话，AI 就帮你把骨架搭好了。AGENTS.md 和 claude.md 可以在后续开发中让 AI 逐步写出来。

工作区建好后，按照"构建循环"四步法推进项目：讨论 → 写文档 → 开发 → 学习。转完一圈，项目往前推一步，然后带着新问题回到讨论，开始下一次循环。

第一步：在 docs 里把想法变成 PRD

有一个想法时，别急着让 AI 写代码。打开 docs 文件夹，新建一个文件，跟 AI 讨论你的想法。AI 会提问、给建议、帮你完善。经过几轮修改，把模糊的想法变成一份清晰的产品文档（PRD）。

PRD 中需要写清楚：应用做什么、有哪些功能、页面长什么样。不需要懂技术，只需要把"我想要什么"讲清楚，AI 会帮你翻译成产品文档。

在 Vibe Coding 中，"讨论和文档化"必须放在最前面。因为 AI 不会读心，脑子里的想法不变成文字，它只能乱猜。这一步是新手最容易跳过的，也是项目烂尾的根本原因。

第二步：先做 Demo

PRD 确认后，不要急着开发全部功能。先让 AI 做一个页面 Demo，只要能看到样子就行。Demo 跑起来后在浏览器里直观看到效果，不满意就继续讨论调整，直到符合预期。

如果有用其他 AI 工具生成的界面参考图，放到 assets/design/ 里，AI 会照着感觉做。Demo 的作用是在投入大量开发之前，用最小成本先看到东西，提前脑补出产品的使用方法。

第三步：补全逻辑，制定开发计划

Demo 通过后，方向没问题。接下来让 AI 做两件事：

1. 补全 PRD 功能逻辑：构思 PRD 时只能想到主线流程，但分支流程（增删改查、页面跳转逻辑等）容易遗漏。让 AI 帮你补全，这样开发时就不会出现遗漏。
2. 制定开发计划：拆成一步一步，每步干什么、产出什么。AGENTS.md 里的开发路线图就是一个清晰的行动计划。

第四步：开发 + 测试，遇到问题就记下来

AI 按计划逐步推进。过程中遇到反复出现的 Bug，跟 AI 讨论搞清楚原因。遇到不懂的技术问题，让 AI 解释，搞懂之后把学到的东西总结成笔记，放进 notes 文件夹。

每一个踩过的坑都记录下来。解决一个问题，沉淀一份知识。这些笔记就是项目里积累的知识资产，踩过的坑不会再踩第二次。随着经验积累，这些知识会成为日后高效工作的核心壁垒。

一圈走完后继续循环：想法 → PRD 2.0 → Demo → 开发 → 学习 → 沉淀知识 → 上架新版本，不断螺旋上升。这才是 Vibe Coding 的正确姿势。

三个核心理由：

1. 插件全覆盖：VS Code 市面上所有插件都能用——格式化、调试、调用 AI、备份等，基本上需要的都有。
2. 可视化操作界面：文件树一目了然，完全不会写代码也可以通过图形操作打开任意文件进行编辑。
3. Git 和 GitHub 不用学：上传代码、管理版本、提交更新，直接跟 AI 说"帮我提交今天改的内容"，它自己知道该干什么。

这套组合门槛低且上限高，是尝试 Vibe Coding 的理想选择。

市面上有一些好用的 Vibe Coding Skill（如 Superpowers）可以加速开发，但 Skill 只是加速器。今天讲的"讨论、写文档、开发、学习"的循环才是根本，Skill 只是让你跑得更快。

总结

通过 VS Code 和 Claude Code，以及建立分区工作台，跑起来"构建循环"——讨论、写文档、开发、学习，四步不断推进。项目就能稳步推进，不会烂尾。

Vibe Coding 的"Vibe"不是让你凭感觉乱做。搭好工作台、跑起循环，AI 才能在正确的方向上帮你做出东西。