小白用AI做产品的正确姿势：循环构建法详解

很多人被「Vibe Coding」这个概念误导了——以为随便跟AI说几句话，代码就能自动跑起来。现实是：你一句话丢过去，AI写出来的东西大概率跑不起来；让它改Bug，刚才还能跑的功能一起崩了；折腾两天后文件夹里堆了几十上百个文件，你根本不知道它们是干嘛的，也不知道怎么发布、怎么迭代，项目就此烂尾。

Vibe Coding这一概念由OpenAI联合创始人Andrej Karpathy于2025年初提出，原意是描述一种「完全沉浸在氛围中，忘记代码本身是否存在」的AI辅助编程方式。这个概念迅速走红，但也被大量误读为「不需要任何方法论、随便说话就能出产品」，导致大量新手陷入「AI幻觉循环」——AI输出看似合理但无法运行的代码，修复一个Bug又引入三个新Bug。

核心原因在于：Vibe Coding虽然听起来随性，但它背后有一套步骤明确的工作方法。本文将介绍一套可持续运转、错误率极低、新手友好的方法——循环构建法。你不需要懂代码，只需要管理好文件夹、会跟AI聊天就行。

工具准备：VS Code + Claude Code 插件

整套方法只需要两个免费工具：VS Code 和 Claude Code 插件。

VS Code 是一个免费的可视化代码编辑器，从官网下载安装包一路点「下一步」即可。装好后界面非常简洁：左边是活动栏，中间是文件编辑区，右边是文件目录。

Claude Code 很多人以为是付费的，但它本身只是一个AI运行框架，是免费的。你可以用它接入国产模型来写代码。安装方式也很简单：点击VS Code左边的扩展图标，搜索「Claude Code」，找到Anthropic官方的那个点安装即可。

装好后左边会多出一个Claude Code图标。如果你有Claude Pro账号可以直接登录；没有的话可以使用CC Switch接入国产模型，具体教程可以参考官网文档。

推荐这套组合的三个理由：

• 插件全覆盖：格式化、调试、AI调用、备份，你想要的基本都有
• 可视化操作：文件树一目了然，不会写代码也能通过图形界面编辑任意文件
• 命令零门槛：Git、GitHub这些命令不用学，直接跟AI说，它自己知道怎么操作

工作区搭建：先规划再动手

很多人装好工具后第一件事就是直接跟AI说「帮我写一个XX应用」，然后AI疯狂输出代码，写到一半文件夹里已经多了几十个文件，你完全不知道这些是干嘛的，想指挥AI也不知道从哪下手。

核心原因就是你没有规划好工作区。

以一个真实项目「KaiTalk」（猫咪叫声记录工具，已上架App Store）为例，根目录下其实只有这样几个文件夹：

五大核心目录

1. DOCS（产品文档区）：存放产品开发前的核心文档。仅凭一句话让AI动手肯定不行，作为产品设计者你需要给它输入大量内容
2. Assets（视觉素材区）：下设三个子目录——Design放效果图、Bug放报错截图、Reference放参考设计资源。给AI反馈问题时，把相应图片放在这里并引用
3. Nodes（学习资料区）：开发过程中的笔记，比如Windows电脑开发iOS应用怎么打包上架、审核步骤、审核邮件怎么回复等
4. 代码文件夹：AI写的代码全部放在一个独立文件夹里，纯代码不与其他内容混在一起
5. 根目录配置文件：agents.md是AI的「入职说明书」，每次新对话不用重新交代；claude.md是项目规则，定义编程语言和开发方式

agents.md和claude.md本质上是「系统级提示词文件」（System Prompt File）。Claude Code在启动新对话时会自动读取项目根目录下的这些配置文件，将其注入到每次会话的上下文中。这解决了大语言模型的一个固有限制：无状态性——每次新对话默认不记得上一次的约定。通过将技术栈选择、代码风格规范、项目边界等写入配置文件，开发者相当于给AI建立了持久化的「工作记忆」，避免在每次对话开头重复交代背景，同时也降低了AI偏离既定技术路线的概率。

一键创建工作区

这些文件夹不需要你手动创建，只需给AI一段提示词：

请帮我在当前项目根目录下创建以下开发工作区：DOCS（产品文档）、Assets（下设Design、Bug、Reference三个子目录）、Nodes（学习笔记）、以及一个独立的代码文件夹。所有文档放在DOCS，新知识记录到Nodes，设计图标和视觉素材放进Assets。

AI就能帮你把文件结构创建好。根目录的两个配置文件可以在后续开发时让AI写入。

循环构建法：四步驱动产品迭代

工作区搭建好之后，核心方法来了——循环构建法，分为四步：讨论→写文档→开发→学习。转完一圈项目就往前推进一步，然后带着新问题回到讨论，开始下一次循环。

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

当你有一个想法时，先别急着让AI写代码。打开DOCS文件夹，新建一个文件，跟AI讨论你的想法。它会提问、给建议，帮你把一个模糊的想法变成清晰的产品文档。

PRD（Product Requirements Document，产品需求文档）是软件行业中产品经理与开发团队之间最核心的沟通载体，包含产品目标、用户故事、功能列表、交互逻辑、边界条件等内容。在AI辅助开发场景中，PRD的作用被进一步放大——它本质上是给AI的「上下文锚点」。大语言模型的生成质量高度依赖输入的信息密度和结构化程度：模糊的输入导致模糊的输出，清晰的PRD则能让AI在正确的约束范围内生成可用代码。

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

这一步是新手最容易跳过的，也是项目烂尾的最根本原因。 AI不会读你的心思，你脑子里的想法不变成文字，它只能乱猜。

第二步：做Demo验证方向

PRD确认后，先不要急着开发功能，让AI做一个页面Demo，只要能看到样子就行。不满意就继续讨论，直到符合预期。

「先做Demo验证方向」对应软件工程中的「快速原型法」（Rapid Prototyping）和精益创业中的「最小可行产品」（MVP）理念。其核心逻辑是：人类对抽象描述的理解存在严重偏差，但对视觉呈现的判断几乎是即时的。在AI编程场景中，AI倾向于「完成任务」而非「验证方向」，如果跳过Demo直接进入全功能开发，一旦方向偏差，推倒重来的成本极高。用最小代价锁定视觉方向，再投入完整开发资源，是控制AI协作风险的关键杠杆点。

你也可以用其他AI工具（比如Gemini）生成页面参考图，放到Assets/Design里，AI能照着样式去做，不会跑偏。

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

Demo通过后，让AI做两件事：

• 根据PRD补全产品功能逻辑：你在构思PRD时可能只想到主线流程，但分支流程（增删改查、页面跳转逻辑等）需要AI帮你补全，避免开发时遗漏
• 制定开发计划：拆成一步一步，每一步干什么、产出什么，清清楚楚

第四步：开发+测试+学习沉淀

AI逐步推进开发，遇到不懂的技术问题让AI解释，搞懂之后把所有东西总结放到Nodes文件夹里。

以KaiTalk为例，iOS打包、上架、审核，每一个踩过的坑都记录在Nodes里。解决一个问题就沉淀一份知识，踩过的坑不会再踩第二次。这些笔记就是项目中积累的知识资产，也是你日后高效工作的核心壁垒。

持续循环，螺旋上升

走完一圈后，继续开发、继续循环：创建PRD 2.0，指挥AI做新Demo，在开发过程中学习新东西，沉淀知识，上架新版本——不断螺旋上升，这才是Vibe Coding的正确姿势。

市面上有一些好用的Vibe Coding技巧（比如Superpowers），它们可以帮助加速开发。但技巧只是加速器，讨论→写文档→开发→学习的循环才是根本。技巧让你跑得更快，但这套方法让你跑得更稳。

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

核心要点

• Vibe Coding不是凭感觉让AI写代码，而是需要一套步骤明确的工作方法——循环构建法
• 工作区规划是关键：DOCS（产品文档）、Assets（视觉素材）、Nodes（学习笔记）、代码文件夹、根目录配置文件五大模块缺一不可
• 循环构建法四步走：讨论写PRD→做Demo验证→补全逻辑制定计划→开发测试学习沉淀，每一圈推进项目一步
• VS Code + Claude Code组合门槛最低上限最高：插件全覆盖、可视化操作、Git命令零门槛
• 知识沉淀是核心壁垒：每个踩过的坑都记录在Nodes里，经验积累让后续开发越来越高效