Vibe session · Learning mode阅读、尝试、提问都留在同一个工作区
Course Map
练习进度 0/55
Learning Guide
Build session

Vibe Coding 全流程 SOP

applied · 20-30 min · 步骤 1/4

恭喜你走到了最后一站

如果你是按顺序学到这里的——从最开始的"Vibe Coding 是什么",经过思维模型、工具精通、Context Engineering、全栈实战、求职实战——你已经走过了一段相当长的路。你学了 MVP 思维、需求拆解、PRD 写作、Cursor 和 Claude Code 的使用、CLAUDE.md 和 .cursorrules 的设计、前后端开发、数据库、认证安全、调试、Git 工作流、部署、测试、Code Review、作品集规划、技术博客、开源贡献、面试展示、团队协作……

一堆东西。

但如果我现在问你:"从零开始做一个项目,你的第一步是什么?第二步呢?第三步呢?"——你能不能不假思索地回答出来?

如果你觉得需要想一想,那这一节就是为你准备的。我要把你前面学过的所有东西,整理成一份标准操作流程(SOP)。以后不管你做什么项目——个人工具、创业 MVP、面试作品——你都可以拿这个 SOP 当 checklist 用。

好,我们开始。

Vibe Coding 方法论全景——从想法到产品的完整路径

Phase 1:想法 → MVP 定义 → PRD

时间预算:30 分钟到 2 小时

每个项目都从一个想法开始。但想法本身是不值钱的——世界上每天都有几百万人冒出各种"要不做个 XXX"的念头。让想法变得有价值的,是你把它变成一个清晰的、可执行的、有边界的计划。

Step 1.1:一句话定义你的项目

这一步听起来简单,但其实是最难的一步。你需要用一句话回答:这个项目是给谁用的、解决什么问题。 注意,一句话,不是一段话。

好的例子:

  • "一个帮通勤族用间隔重复法记单词的微信小程序"
  • "一个让自由设计师管理客户报价和发票的 Web 工具"
  • "一个每天自动汇总 Hacker News 热帖并发到 Slack 的机器人"
坏的例子:
  • "一个学英语的 App"(太模糊——给谁用?解决什么具体问题?)
  • "一个全功能项目管理平台"(太大——你一个人做不了 Jira)
  • "一个很酷的 AI 工具"(啥意思?)
如果你连一句话都写不出来,说明你的想法还不够具体,需要继续想。别急着打开 Cursor——这一步想不清楚,后面全白搭。

Step 1.2:确定 MVP 功能清单

一句话定义完之后,列出这个项目最少需要哪些功能才算"能用"。这里的关键词是"最少"——不是你想要什么功能,而是没有哪些功能这个项目就完全没有存在的意义。

一般来说,一个 MVP 的核心功能不应该超过 3-5 个。如果你列了 10 个,那你不是在做 MVP,你是在做一个完整产品——然后大概率做不完。

Step 1.3:写一份简单的 PRD

PRD 不需要是一份 20 页的正式文档。对于个人项目来说,一个 Markdown 文件就够了,包含以下内容:

  • 项目名称和一句话描述
  • 目标用户和核心问题
  • MVP 功能清单(3-5 个)
  • 技术选型(前端、后端、数据库、部署方案)
  • 每个功能的简要描述(各 2-3 句话就行)
  • 不做的事情(明确列出你故意不做的功能)
这份 PRD 不仅是给你自己看的,更重要的是——它是给 AI 看的。后面你把这份 PRD 放到 CLAUDE.md 或 .cursorrules 里,AI 就能始终理解你这个项目的全貌和边界。

Vibe Coding 核心循环——描述、生成、测试、迭代的闭环

Phase 2:环境搭建 → 技术选型 → 项目配置

时间预算:15-30 分钟

PRD 写好之后,下一步是搭环境。这一步很多人觉得"没什么好说的",但实际上环境搭不好是新手卡壳的第一大原因。

Step 2.1:技术选型

对于常见的 Vibe Coding 个人项目,可以先从以下最小组合开始,再按真实需求增加服务:

  • 纯前端:Next.js + Tailwind CSS + Vercel 部署
  • 全栈:Next.js + Supabase(自带数据库和认证) + Vercel
  • 快速原型:Bolt.new 或 v0.dev(零配置,浏览器里直接做)
如果你不确定选什么,就选 Next.js + Tailwind + Vercel。不是因为它是"最好"的,而是因为它的社区最大、教程最多、AI 最熟悉——AI 训练数据里有海量的 Next.js 代码,所以它给你生成 Next.js 代码的质量一般是最高的。

Step 2.2:创建项目并配置 AI 规则文件

项目创建好之后,第一件事不是开始写功能,而是配置你的 AI 规则文件

如果你用 Cursor → 创建 .cursorrules 文件 如果你用 Claude Code → 创建 CLAUDE.md 文件 两个都用 → 两个都创建

这些文件里应该包含什么?回忆一下你在 Context Engineering 章节学到的:

  • 项目背景和目标
  • 技术栈和版本号
  • 代码风格偏好(Tab vs Space、命名规范等)
  • 文件结构约定
  • 你的 PRD 核心要点(或者直接引用 PRD 文件)
  • 任何特殊规则(比如"不要用 any 类型"、"所有组件用 TypeScript")
为什么要先做这一步?因为 AI 是"无状态"的——每次对话它都不记得之前聊了什么。但如果你有一份好的规则文件,AI 每次开始工作的时候都会先读这份文件,就等于给它植入了项目记忆。

Step 2.3:初始化 Git

创建项目后,立刻初始化 Git 并做第一次 commit。很多新手觉得"等做完再提交",这是一个非常危险的习惯。用 Vibe Coding 的时候,AI 可能会一次改好几个文件,如果改坏了你又没有 commit 记录,你就完全回不去了。

规则很简单:每完成一个小功能,就 commit 一次。 如果你用 Claude Code,它甚至可以帮你自动 commit。

完整工作流——从环境搭建到部署上线的全流程
Vibe Workspace
Live build context

Phase 1 & 2:从想法到蓝图

一个项目的前半段——想法、MVP、PRD、环境搭建

自动保存在此设备
掌握从想法到上线的完整 Vibe Coding SOP理解每个阶段应该用什么工具、什么思维、产出什么能独立走完"想法 → MVP → PRD → 实现 → 部署 → 迭代"的全流程
Home| Vibe Lab
草稿自动保存