Vibe Coding 项目开发流程

简单分为5个步骤：

  1. 需求研究（Research）
  2. 产品需求文档（PRD）
  3. 技术设计文档（Tech Design）
  4. AI代理指令（AGENTS.md）
  5. 实现和迭代（Build）

步骤1：需求研究（Research）

在动手让AI实现前，需要先想明白，弄清楚：我们要做什么？为什么要做？

  1. 明确目标

先问自己，我想解决什么问题？这个问题值得解决吗？我希望做出来是什么样的？做出来的东西用户群体是怎样的？自己用还是给别人用？核心功能有哪些？

  1. 调研类似产品

去看看市面上类似的产品，进行对比，看看别人是怎样做的，有哪些优缺点，这个也可以交给AI分析总结。

  1. 记录

把想法和调研的结果以文档的形式记录下来，比如 Research.md

步骤2：产品需求文档（PRD）

昨晚需求研究后，需要把想法整理成一份正式的文档，明确要做哪些内容，哪些是不需要实现的，哪些是核心功能要优先保证和实现。

这是流程中最重要的一步，准确详细的PRD可以让AI清晰地理解你的意图，生成更准确和高质量的代码。

如何产出一份高质量的PRD？

可以先将简单的需求或者需求研究和想法告诉AI，然后让AI来帮你扩展成为更详细完整的PRD。

比如你将想法问AI：

1
我想要做一个个人博客网站，能发布文章，游客可以在文章下发布留言。

再加上：

1
2
3
4
5
6
7
8
请帮我把这个需求扩展成为一份完整的产品需求文档（PRD），
要包含以下内容：
1. 产品概述和目标用户
2. 详细的功能列表
3. 功能的优先级
4. 界面的设计要求
5. 技术栈建议
6. 非功能性需求（性能、安全等）

AI会帮你生成一份结构化的产品需求文档，然后你在根据你自己具体的需求更改和完善。

PRD应该包含哪些内容？

一份完整的PRD通常包含：

  • 产品概述（简单介绍这个产品是什么）
  • 目标用户（谁用这个产品）
  • 核心功能（列出要做的功能清单）
  • 功能优先级（哪些是必须的，哪些是可以后续迭代添加的）
  • 界面设计（简单描述界面的样子）
  • 技术栈建议
  • 代码风格和架构模式
  • 限制条件和边界场景

举个例子，以下内容由AI生成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# 个人博客网站产品需求文档 (PRD)

## 产品概述与目标用户
产品背景与愿景
本产品旨在打造一个轻量级、极简且高度可定制的个人博客平台。核心愿景是为内容创作者提供一个纯粹的写作空间，通过高质量的文章沉淀个人知识体系，并通过留言互动功能建立与读者之间的深度连接。平台将摒弃复杂的社交网络属性，专注于“阅读”与“交流”的本质体验。

## 目标用户画像
核心用户（博主）：具备一定技术基础或热爱写作的个人创作者、行业专家、学生及自由职业者。他们需要一个无广告干扰、排版美观、支持Markdown编辑的发布环境，并希望对自己的数据拥有绝对控制权。
次要用户（访客/读者）：对特定领域（如技术教程、生活感悟、行业分析）感兴趣的人群。他们追求流畅的阅读体验，并期望能够便捷地留下评论或与博主进行互动。

## 详细功能列表
### 前台展示端（面向游客与博主）
首页/文章列表：支持按发布时间倒序排列，提供分页加载；支持按标签（Tags）和分类（Categories）筛选文章。
文章详情页：完整渲染文章内容，支持代码高亮、图片懒加载；侧边栏显示目录导航（TOC）、相关文章推荐及博主简介。
留言互动系统：
游客可在文章底部发表评论。
支持多级回复（盖楼模式），形成对话流。
支持输入昵称、邮箱（用于接收回复通知）及评论内容。
全局搜索：支持根据标题、正文关键词模糊搜索文章。
响应式布局：完美适配桌面端、平板及移动端设备。

### 后台管理端（仅面向博主）
仪表盘：展示关键数据概览（如文章总数、今日访问量、待审核留言数）。
文章管理：
集成富文本编辑器或Markdown编辑器，支持实时预览。
支持文章的创建、编辑、删除、置顶及草稿箱保存。
支持设置封面图、SEO标题、描述及关键词。
留言管理：
查看所有留言列表，支持按文章、时间筛选。
具备垃圾评论过滤机制，支持手动审核、通过、隐藏或删除留言。
系统设置：
站点基础信息配置（站点名称、Logo、Favicon）。
个人信息及社交链接配置。
安全设置（修改管理员密码、绑定两步验证）。

## 功能优先级划分
为了确保项目快速落地并持续迭代，采用MoSCoW法则进行优先级排序：
P0 - 必须有 (Must have)：
前台文章列表与详情页展示。
后台Markdown编辑器及文章增删改查。
前台基础留言提交与后台留言查看/删除。
基础的响应式页面布局。
P1 - 应该有 (Should have)：
留言的多级回复功能。
文章分类与标签筛选系统。
全文检索功能。
留言的防垃圾过滤机制（如接入Akismet或简单的敏感词屏蔽）。
P2 - 可以有 (Could have)：
文章阅读次数统计与热度排行。
回复留言时的邮件通知功能。
自定义主题配色与夜间模式切换。
P3 - 以后再做 (Won't have for now)：
第三方账号登录（GitHub/微信等）。
文章打赏/赞助功能。
RSS订阅源输出。

## 界面设计要求 (UI/UX)
设计风格：遵循“内容为王”的极简主义设计原则。大量留白，降低视觉噪音，确保文字的可读性是第一要务。
色彩规范：主色调建议使用低饱和度的深灰或黑色搭配一种强调色（如静谧蓝或活力橙），避免使用高对比度的刺眼颜色。背景色推荐使用米白或纯白，减少长时间阅读的视觉疲劳。
排版规范：正文字号建议不小于16px，行间距控制在1.6至1.8倍之间。代码块需配备清晰的语法高亮配色方案，并带有“一键复制”按钮。
交互体验：所有点击操作需提供明确的反馈状态（如Hover效果、Loading动画）。留言提交成功后应给予即时Toast提示，并在页面无刷新状态下动态追加新评论。

## 技术栈建议
- 前端：React + TypeScript + Vite
- 样式：Tailwind CSS
- 数据存储：LocalStorage
- 部署：Vercel

## 非功能性需求
性能要求：
首屏加载时间（FCP）在标准4G网络下应控制在1.5秒以内。
文章详情页的核心网页指标（LCP）需达到绿色优良标准。
静态资源（图片、CSS、JS）必须启用CDN加速及浏览器长期缓存策略。
安全性要求：
防XSS攻击：前端渲染留言内容时，必须对HTML标签进行严格的转义或使用DOMPurify等库进行清洗，防止恶意脚本注入。
防SQL注入：后端所有数据库查询必须使用参数化查询或ORM框架，严禁拼接字符串。
身份认证：后台管理接口必须实施JWT Token鉴权，密码存储需加盐并使用bcrypt等强哈希算法加密。
频率限制：对留言提交接口和登录接口实施IP限流（Rate Limiting），防止暴力破解和恶意刷屏。
可扩展性与维护性：
代码结构需遵循模块化设计，前后端接口定义清晰（如遵循RESTful规范或GraphQL）。
预留Webhook接口，方便未来扩展自动化工作流（如发布文章后自动推送到社交媒体）。

步骤3：技术设计文档（Tech Design）

有了清晰的PRD后，知道要做些什么了，接下来就是设计如何做，确定用什么技术来实现这些功能以及架构。

创建一个 TECH_DESIGN.md 文件，包含：

  • 技术栈选择（前端用什么，后端用什么，数据库用什么）
  • 项目结构（代码如何组织）
  • 数据模型（需要存储哪些数据）
  • 关键技术点（有哪些技术难度需要注意）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 技术设计

## 技术栈
- React + TypeScript + Vite
- Tailwind CSS
- React Router（如果需要多页面）
- Framer Motion（动画效果）

## 项目结构
src/
  components/
    Header.tsx
    Hero.tsx
    About.tsx
    Projects.tsx
    Contact.tsx
    Footer.tsx
  data/
    projects.ts
    skills.ts
  App.tsx
  main.tsx

## 数据管理
- 项目数据和技能数据存储在 TypeScript 文件中
- 使用数组存储，方便后续添加和修改

步骤4：AI代理指令（AGENTS.md）

PRD和技术设计文档都准备好了，接下来该准备创建一个专门给 AI 看的指令文件，告诉 AI 在这个项目中应该遵循什么规则。

AGENTS.md 是一个标准化的文件格式，用来指导 AI 编程工具如何工作。就像是给 AI 的一个”工作手册“。这个标准是由 OpenAI、Anthropic、Google 等公司共同推动，目前已经有上万个开源项目在使用。主流的 AI 编程工具，比如 Cursor、Windsurf、Claude Code、Gemini CLI、GitHub Copilot 等都支持自动读取 AGENTS.md 文件。

AGENTS.md 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 个人作品集网站开发指令

## 项目概述
使用 React + TypeScript + Tailwind CSS 开发的个人作品集网站。

## 开发规范
- 使用函数式组件 + Hooks
- 使用 Tailwind CSS 编写样式
- 组件要可复用
- 代码要有注释

## 设计要求
- 深色主题（背景 #0a0a0a，文字 #ffffff）
- 使用渐变色作为强调色
- 添加平滑的滚动动画
- 确保移动端适配

## 注意事项
- 保持设计简洁，不要过度设计
- 性能优化：图片使用懒加载
- 确保所有链接可点击

步骤5：实现和迭代（build）

前4步都是准备工作，现在正式开始写代码。但不是一口写完，而是分步迭代。

分步迭代

对于复杂的项目，想一步到位是不现实的，得有策略的慢慢迭代。

1.先搭好基础的框架

先让 AI 生成基础项目框架，功能和外观先放一边，确保项目能够运行启动。

2.逐步实现核心功能

架子搭好后，开始实现具体功能。优先跑通核心业务流程、实现核心功能。而不是一开始就追求完美。建议把项目拆分成多个小功能来一一实现。

3.优化实现细节

核心功能都实现了，就可以慢慢打磨细节。在保证不影响功能的前提下，优化性能，改善用户体验、美化界面等。后续还可更加想法扩展更难多功能。