不用懂代码，从需求梳理、PRD 撰写、设计 demo 到分步开发和上线部署，走完 Vibe Coding 完整闭环。
你是不是也遇到过这种情况——看了很多 Vibe Coding 教程，工具装了一大堆，却从头到尾没完整地走完一个闭环？
如何跟 AI 提出需求、如何撰写完整的产品文档、如何制作 demo、如何让 AI 有条理地进行开发、最终把项目上线，这些问题依然没解决。
本期教程以一个网页版番茄钟为例，带你从想法到上线，走一遍完整的 Vibe Coding 闭环。学会之后，你也能自己独立走完一个产品的全流程。
覆盖范围： 需求梳理 → PRD 文档 → 设计 demo → 分步开发 → 测试上线。
本期教程涉及以下工具与平台，建议提前准备：
| 工具 | 用途 | 链接 |
|---|---|---|
| VSCode | 代码编辑器 | code.visualstudio.com |
| Claude Code | AI 编程助手（VSCode 插件） | docs.anthropic.com |
| GitHub | 代码托管平台 | github.com |
| Vercel | 前端项目部署平台 | vercel.com |
网上的 Vibe Coding 工具五花八门，推荐通用性最强、上限最高的组合：
VSCode + Claude Code 插件
具体安装步骤可以参考《Vibe Coding 必备工具集》教程，这里不展开。安装过程完全免费，给 Claude Code 接入模型之后，咱们就正式开始 AI 编程。
开始编程的第一步，不是直接告诉 AI 我要做什么，而是先自己梳理清楚需求。
很多新手在这一步就卡住了——不是不会写，而是不知道自己到底想要什么。
梳理需求从以下四个关键点入手：
你要实现什么功能？把核心功能一条一条列出来。
番茄钟示例：
谁在什么情况下用这个产品来解决什么问题？
番茄钟示例： 需要专注工作或学习的人，打开浏览器就能用，不需要下载安装。
这个产品有哪几个主要页面，分别承载什么功能？
番茄钟示例：
数据存在哪里？给谁用？要不要备份？
番茄钟示例： 配置数据保存在浏览器本地，个人使用，无需备份。
规矩越精，AI 越听话。 需求梳理得越清楚，后面 AI 的理解就越准确。
需求梳理清楚后，把需求发给 AI，让它在 PRDs/ 文件夹内创建一份产品文档。
对 AI 说：
请帮我在 PRDs 文件夹内创建一份产品文档 PRD.md，包含以下内容：
第一，产品概述：一句话说明产品是什么、解决什么问题。
第二，目标用户：谁会使用这个产品。
第三，核心功能清单：按优先级排列，标出 P0 / P1 / P2。
第四，页面结构：列出所有主要页面及其功能。
第五，页面框架图：用 Markdown 画出每个页面的布局框架，标注各区域的功能。
请基于我之前提供的需求梳理来撰写。另外，所有主要页面先用 Markdown 画一个框架图。
文档生成后，最重要的是看框架图。你能直接从图上判断产品布局是否符合预期，有不符合的地方直接反馈。
反馈技巧： 直接告诉 AI「第 X 行到第 Y 行的描述需要修改，具体问题是什么」，AI 能根据行数快速定位。
整个 Vibe Coding 过程中，token 消耗最大的部分是编程。前期的 PRD 根本用不了多少 token，在这一步反复修改完全没问题。但如果开发完才发现设计有问题，再改同样的东西，token 消耗可能是现在的几十倍。
所以一定要在 PRD 阶段仔细识别问题，在这个阶段及时修正。
PRD 搞定了，下一步并不是直接写代码。
PRD 只是文字描述，真正使用时需要一个图形界面。所以接下来要做两件事：找设计参考 + 做静态 Demo。
去一些设计网站找符合自己审美的风格，比如 Dribbble、Mobbin 或 Page Collective。看到合适的风格直接截图，或者复制网址。
把截图或参考网址发给 AI，然后说：
对 AI 说：
请根据我提供的截图和参考网页，帮我做两件事：
第一，整理一份设计规范文档，包括配色方案（主色 + 辅色 + 背景色）、字体规范（字号层级 + 字重）、间距规则、圆角、组件样式（按钮、卡片、输入框等）。
第二，写一份 UI 设计文档，列出每个主要页面的布局描述和交互说明。参考的风格方向我已经发给你了，请基于这些来整理。
设计规范整理完后，再发这段提示词让 AI 做静态页面：
对 AI 说：
请根据设计规范文档和 UI 设计文档，帮我创建一个静态 HTML 前端 demo，要求：
第一，包含所有主要页面，每个页面用独立的区域展示。
第二，展示所有核心状态，如计时中、暂停、完成等不同状态。
第三，纯静态，不包含任何功能逻辑和数据交互。
第四，所有样式内联或写在 style 标签内，单文件即可运行。
第五，使用设计规范中的配色和字体风格。
因为只是静态 demo、不包含功能，所以做起来非常快，也很省资源。几分钟后一个能直接看的页面就出来了。
打开页面后，看布局是否符合预期，同时也能验证 AI 理解的产品和你脑海中的产品是否对齐。
有问题直接截图，用框选工具标出问题区域，然后发：
对 AI 说：
我现在在 [某个页面]，[某种状态] 下，发现了以下问题。附上截图，框选了有问题的地方。
具体问题是：[描述预期效果和实际效果的差异]
请根据设计规范修改这个部分。
几轮修改后 demo 基本符合预期。注意：这只是一个没有功能的 demo，所有反馈只针对布局和设计，不包括功能，功能实现在下一步。
进入开发阶段后，千万不要让 AI 马上开始写代码。
开发阶段上下文消耗非常快，很容易占满窗口。最稳妥的做法是先建立开发计划，每完成一部分就总结一次。
对 AI 说：
请根据 PRD 文档和静态 demo，帮我制定一份详细的开发计划，要求：
第一，把整个开发任务拆分成独立步骤，每一步完成一个可验证的功能模块。
第二，每一步标注要实现的功能、涉及的文件和完成标准（怎么判断这一步做完了）。
第三，按依赖关系排列顺序，先基础功能再高级功能。
第四，每一步描述要足够完整，让新的 AI 会话能独立理解（因为每步会新开会话）。
第五，最后附一个项目技术栈总览：用了什么框架/库/部署方式。
动作一：生成项目文档
开发计划完成后，新开一个对话窗口，在 Claude Code 中输入：
/init
这个命令会让 AI 扫描项目中的所有文档，生成 CLAUDE.md。它的作用是让后续参与开发的 AI 更快更完整地了解整个项目。
动作二：确认项目理解
等 CLAUDE.md 完成后，再新开一个对话窗口，输入：
@开发计划.md
告诉 AI：「看一遍开发计划，然后告诉我你对项目的理解，我们准备开始开发。」
AI 确认理解后，建议不要让 AI 一次性写完所有功能，而是逐步推进。每完成一步，就新开一个对话窗口继续下一步——这样反而最高效。
每完成一个功能模块，让 AI 继续推进下一步。等所有功能开发完成后，告诉 AI：
对 AI 说：
帮我写一个快速启动脚本，并且告诉我如何启动项目。
拿到启动指令后，根据提示输入相应命令启动项目。
到这一步，产出的内容和预期基本不会有太大差别——因为前期已经做了多次对齐（需求 → PRD → Demo → 开发计划），在这里基本上不会翻车。
启动后测试一下番茄钟的核心功能：倒计时是否正常、暂停/重置是否可用、提示音是否播放、设置是否生效。确认所有功能完好，就可以进入下一步了。
以上就是 Vibe Coding 的完整闭环流程。最后快速回顾一下：
| 阶段 | 核心动作 | 关键产出 |
|---|---|---|
| 需求梳理 | 自己想清楚四个关键点 | 功能清单 + 用户场景 |
| PRD 文档 | 让 AI 按模板写产品文档 | PRD.md + 框架图 |
| 设计 Demo | 找参考 → 设计规范 → 静态页面 | HTML demo（无功能） |
| 开发计划 | 拆分任务 + 生成 CLAUDE.md | 开发计划.md |
| 分步开发 | 逐步推进，每步新开会话 | 可运行的完整项目 |
| 测试上线 | 本地启动 → GitHub → Vercel | 公开访问的产品 |
核心 takeaway： Vibe Coding 虽然名字里有 "Vibe"，但千万不要被名字骗了。它非常需要你和 AI 进行高效沟通，千万不要相信所谓「一句话就能做一个软件」——你和 AI 之间巨大的信息差，注定了它不可能直接做出满足你心意的产品。只有大量的输入和反馈，才能满足自己的特殊要求。