VibeCoding零基础教程（二）：技术栈、PRD实操
一、前置准备
在进入案例之前，有几件事需要提前准备好。
1.1 注册 GitHub
GitHub 是代码托管平台，可以理解成”代码的网盘”。你不需要精通 Git 命令，但需要有一个 GitHub 账号，用来：
•
Fork（复制）别人的开源项目到自己的账号下，不用担心改坏原项目
•
保存你的修改，每次改动都有记录，随时可以回退
•
部署上线，很多部署平台可以直接读取 GitHub 仓库
1.2 Fork 项目
Fork 就是把别人的项目复制一份到你自己的账号下。之后的任何修改都是在你的副本上操作，不会影响原项目。
操作方式：打开项目页面 → 右上角点击 Fork → 确认即可。
1.3 下载项目到本地
最简单的方式：在项目页面点击绿色的 Code 按钮，选择 Download ZIP，解压到你想要的目录。
如果你熟悉 Git，也可以用命令行：
代码块
Plain Text
git clone https://github.com/你的用户名/rico-md.git
cd rico-md
1.4 本地启动项目
rico-md 是纯前端项目，不需要安装任何依赖。三种启动方式任选：
方式一：让 AI 帮你启动
如果你用的是 TRAE / Qcoder 等 IDE，直接打开项目文件夹，然后对 AI 说”帮我把这个项目跑起来”，AI 会自动检测环境并启动。
方式二：用 IDE 插件 “Go Live”
在 IDE 插件面板找到 “Go Live”，安装后点击右下角启动即可。
方式三：命令行启动
代码块
Plain Text
./start.sh
或用 Python：
代码块
Plain Text
python -m http.server 8080
然后浏览器打开 http://localhost:8080。（Mac 自带 Python，Windows 去 python.org 下载安装）
1.5 选择 AI 编程工具
这一篇的操作演示中，使用的是 VS Code + Codex/Claude Code 插件 的使用方式，但你可以选择任意 AI 工具——Cursor、Claude Code、TRAE、Kimi 都可以。
💡核心流程是一样的：打开项目 → 描述需求 → AI 修改代码 → 查看效果。
二、从案例认识技术栈
在正式动手之前，先用两个案例帮你建立对”技术栈”的直觉——从最简单的静态网页，到本篇的主线实战项目，感受一下不同复杂度的项目分别对应什么技术方案。
2.1 最简单的起点：一个静态网页
先看一个最简单的例子。
HTML+CSS+JS。你发给豆包、Gemini、Kimi 等生成网页，大部分输出的就是这样的 HTML 页面，直接放到浏览器就可以打开。
这个单页是我用 Blender 做了一套开源图标，为了方便预览就顺带做了个网页，功能和目标很简单：展示和下载资产库。
🚀
一个小经验： 如果你的需求只是一个好看的展示页面——无论视觉多复杂、交互多有意思，只要不涉及权限、内容管理、登录注册等数据处理——那么
2.2 本篇主线案例：rico-md 公众号排版编辑器
rico-md 是一个面向微信公众号写作与排版的纯前端 Markdown 编辑器。
我们可以对比一下优化前后的设计和功能
🚀
当前开发完成的 rico-md 的核心功能：
•
编辑与预览：左侧 Markdown 编辑，右侧实时预览；支持桌面/iPad/手机预览模式切换
•
文档管理：多文档创建、切换、复制、删除；文档搜索；自动保存与状态显示
•
主题系统：20 套公众号正文主题（按风格分类）+ 16 套独立代码块主题
技术栈：Vue 3（CDN）+ markdown-it + highlight.js + IndexedDB + 原生 CSS
关键概念：IndexedDB（浏览器端本地数据库，存储大文件如图片）、img://（自定义图片协议，映射 IndexedDB 中的图片）、KaTeX / MathJax（公式渲染库，前者轻量适合预览，后者兼容公众号）
三、实战改造：从 PRD 到功能开发
3.1 项目文档：PRD.md
🚀
rico-md 项目的PRD、DESIGN、CLAUDE 等文档都放在了 docs 文件夹中。在 Vibe Coding 里，文档的作用不是“写给自己看的说明书”，而是让 AI 快速理解项目状态、目标和边界。对新手来说，最重要的一份文档是 PRD.md。
如果你刚开始做项目，不需要一上来就准备很多文档。先写好 PRD.md 就够了。
随着项目变复杂，再补充其他文档：
🚀
•
使用 Claude Code，可以维护 CLAUDE.md
•
使用 Codex 等 Agent 工具，可以维护 AGENTS.md
•
做 UI 优化时，再补充 DESIGN.md
💡 这些文档真正的价值在于：记录项目的真实状态。 当你开启新的 AI 对话时，它可以通过这些文档快速知道当前项目是什么、哪些地方不能乱改。
3.2 项目结构理顺
项目很简单，主要是一个 index.html 加一个 app.js（超过3500行代码）。
你可以直接这样说：
遵循工程化最佳实践，对当前项目进行代码解耦重构。不要改变现有功能，只整理结构，让后续功能更容易维护。
重构后的重点不是“文件夹看起来更专业”，而是让每一类功能有自己的位置。
重构之后，我们得到现有项目优化后的结构：
代码块
Plain Text
├── index.html # 主页面（编辑器）
├── README.md
├── start.sh # 一键启动脚本
├── ../assets/
└── js/
├── core/
│ ├── config.js
这一步做完后，AI 再修改功能时就更容易定位。比如要改图片上传，它会去找图片处理模块；要改主题面板，它会去看 UI 和样式文件，而不是每次都在一个大文件里乱翻。
而下面是我们最终开发完成的文件结构：
代码块
Plain Text
rico-md/
├── index.html # 主页面（编辑器）
├── about.html # 关于页面
├── README.md
├── start.sh # 一键启动脚本
├── ../assets/
这其实就是拆分组件的思维，不要觉得复杂，拆分和梳理是 AI 做的事，你只需要给明确的命令。
3.3 建立 PRD 文档
PRD 不需要写得像公司里的正式需求文档。对 Vibe Coding 来说，它的作用很直接：让 AI 知道这个项目是什么、现在做到哪一步、哪些地方不能乱改。
一份够用的 PRD，可以先包含这几个部分：
💡
1. 产品定位
2. 核心能力
3. 技术实现说明
4. 产品约束
5. 关键体验要求
6. 实现边界
7. 验收标准
8. 迭代记录
9. Todo 与后续规划
下面用 rico-md 的真实 PRD 拆开讲。你不用照抄格式，重点是理解每一部分解决什么问题。
第一步：产品定位——一句话说清楚”这个东西是什么”
💡
1. 产品定位
核心目标有三件事：
1. 让用户能高效完成长文写作与排版。
2. 让预览结果尽量接近最终粘贴到公众号后台后的效果。
3. 在不依赖后端和构建系统的前提下，保证本地可用、可保存、可导出。
💡 关键技巧：产品定位里要包含”不做什么”的信息，这和”做什么”一样重要。
第二步：核心能力——列出当前已经有的功能
代码块
YAML
2. 当前核心能力
### 编辑与预览
- 左侧 Markdown 编辑，右侧实时预览
- 支持桌面 / 手机预览模式切换
- 支持常用工具栏操作：标题、加粗/斜体/下划线、链接、代码等
### 文档管理
- 多文档创建、切换、复制、删除
- 文档搜索、独立文档标题输入
- 自动保存与保存状态显示
- 本地持久化恢复
### 主题与排版
💡 关键技巧：核心能力按模块分组，让 AI 能快速定位”这个功能属于哪个模块”。
第三步：产品约束——告诉 AI “哪些东西不能动”
代码块
Markdown
💡 关键技巧：约束要写得具体，不要只说”保持简洁”，要说”不引入 Vite / Webpack / npm”。AI 需要的是明确的边界，不是模糊的原则。
第四步：实现边界——明确”现在不做”
代码块
Markdown
💡 关键技巧：把”暂不做”列出来，能有效防止项目在 Vibe Coding 过程中越做越大。
第五步：验收标准——做到什么程度才算完成
代码块
Markdown
## 5. 验收标准
### 编辑与保存
- 文档创建、切换、删除、复制可正常工作
- 自动保存状态能正确显示 saving / saved / error
- 刷新页面后文档与当前状态能恢复
### 公式
- 复杂块级公式在预览中正常显示
- 复制到公众号后不出现重复 TeX / MathML 文本
- 长公式能横向滚动查看完整内容
验收标准的核心原则：每一条都应该是可以测试的。
💡 关键技巧：验收标准按模块分组，每条用”能 + 具体动作”的句式，让 AI 知道该测什么。
第六步：后续方向——给未来留个路标
代码块
YAML
## 6. 后续方向
后续优先级建议：
1. 文档备份 / 恢复能力
2. 图片管理面板
3. 更稳定的公众号复制验证与回归测试
4. 自定义代码主题 / 自定义正文主题
3.4 用 PRD 控制 AI
很多 Vibe Coding 项目失控，不是因为 AI 不会写代码，而是因为我们一开始没有把边界讲清楚。
我的习惯是：每次准备做一个功能，先更新 PRD，再让 AI 动手。
比如我要优化图片处理，不会直接说：
帮我优化图片功能。
我会先在 PRD 里补清楚：
🚀
•
这次要优化什么：粘贴、拖拽、上传、复制到公众号
•
哪些东西不能破坏：img:// 协议、IndexedDB 存储、已有文档里的图片
•
怎么判断做完：上传后能预览，刷新后不丢失，复制到公众号时图片能带出
然后再对 AI 说：
阅读 PRD.md，按照图片处理相关要求执行。修改前先列 TODO，完成后按验收标准自测。
这样 AI 的工作会稳定很多。它不是只看你当前这一句话，而是会把 PRD 当成项目边界来参考。
四、用 DESIGN.md 进行设计优化
功能层面的问题在上面通过 PRD 解决了。
制作可以交互UI分两步：
第一步是搭好布局结构。先自己规划布局。
比如左右侧栏放置各种功能，导航放顶部，底部是状态信息，把框架搭好。当然你也可以完全利用设计 SKILLS 来做。
第二步才是视觉和交互。
你跟 AI 说”好看一点”或者”设计感强一点”，它可能完全不知道你在说什么。但如果你给它一份结构化的设计文档——定义了配色方案、排版规范、组件样式、交互模式——它就能按你的要求精确执行。这就是 DESIGN.md 的作用。
4.1 什么是 DESIGN.md
DESIGN.md 是一份用设计语言（而非产品语言）写成的指导文档。它和 PRD 的区别很简单：
🚀
•
PRD 管”做什么”——功能、流程、边界
•
DESIGN.md 管”做成什么样”——视觉风格、配色、排版、交互
你可以把它理解为：把 Figma 里的设计系统，翻译成 AI 能理解的语言。
一份完整的 DESIGN.md 通常包含这些内容：
4.2 怎么生成 DESIGN.md
可以输入任意网站自动生成完整的设计系统文档，也可以在不同设计令牌格式之间转换（DESIGN.md、tokens.json、variables.css、theme.css）。
把 DESIGN.md 放到项目根目录，然后对 AI 说：
使用 DESIGN.md 优化设计
执行后查看设计优化效果，再针对细节自己调整。完成后记得让 AI 生成项目最终的 DESIGN.md，保持文档和实际代码一致。
下面是我使用 DESIGN.md 执行后优化后的页面，效果我觉得是不错的。
4.3 为什么推荐在 Vibe Coding 中使用 DESIGN.md
三个原因：
第一，AI 对结构化设计指令的理解远优于模糊描述。 “按钮要有悬停效果”不如”按钮 hover 时背景色从 #2d6dc3 变为 #0066ff，过渡时间 150ms”。
第二，设计师写的 DESIGN.md = 把 Figma 的设计系统翻译成 AI 能理解的语言。 你在 Figma 里做组件化、定义 Variables、整理设计系统时积累的能力，在这里直接有用武之地。
第三，一次写好，每次迭代都能复用。 DESIGN.md 不需要每次都重写。项目初期花时间定义好设计规范，后续所有的 AI 修改都会自动遵守，保持风格一致性。
设计师在 Vibe Coding 中的独特优势就是：你比 AI 更懂什么是好的体验。DESIGN.md 是你把这个优势转化为实际效果的工具。
4.4 验收检查清单
最后再执行下面这些检查，就已经完成了一次完整的 Vibe Coding 项目改造。 从选技术栈、写 PRD、用 PRD 控制 AI、到设计优化和验收，整个流程都走了一遍。
代码块
Markdown
**功能验证：**
- [ ] 所有 PRD 中列出的核心功能可以正常使用
- [ ] 文档创建、切换、保存、删除流程正常
- [ ] 主题切换即时生效
- [ ] 图片粘贴/拖拽/上传后能正常预览和复制
- [ ] 复制到公众号的结果与预览基本一致
五、部署上线、域名与成本
到这里，项目已经能在本地跑起来了。下一步就是部署上线，让别人也能通过一个网址访问。
5.1 什么叫部署上线
本地启动时，你访问的是 http://localhost:8080，这个地址只有你自己的电脑能打开。部署上线，就是把项目放到一个公开服务器上，让它变成类似这样的地址：
代码块
Plain Text
或者绑定自己的域名：
代码块
Plain Text
对纯前端项目来说，部署并不复杂。它本质上就是把 index.html、CSS、JS、图片这些静态文件上传到一个平台，平台帮你生成一个可以公开访问的网址。
5.2 选哪个部署平台
常见选择可以先这样判断：
5.3 用 Netlify 部署 rico-md
假设你已经把项目 Fork 到自己的 GitHub 账号下，可以按这个流程走：
🚀
打开 netlify.com，用 GitHub 账号登录。
点击 Add New Project。
选择你的 rico-md 仓库，点击 Import。
如果是 rico-md 这种零构建项目，重点是确认入口文件 index.html 在项目根目录，或者平台能正确找到它。部署成功后，把生成的网址发给别人，对方就能直接打开。
后面你每次把修改 push 到 GitHub，Netlify 通常会自动重新部署。
5.4 绑定自己的域名
如果你已经有域名，可以在 Netlify 项目里这样做：
🚀
进入项目的 Settings。
找到 Domains。
输入你的域名，比如 md.yourname.com。
这里不要被 A 记录、CNAME 这些词吓到。你只需要知道：
🚀
•
顶级域名，比如 yourname.com，通常按平台提示配置 A 记录
•
子域名，比如 md.yourname.com，通常配置 CNAME
具体填什么，以部署平台当时显示的提示为准。域名解析有时几分钟生效，有时要等久一点，别急着反复改。
5.5 上线前检查清单
部署成功不代表完全没问题。上线前自己走一遍，尤其是纯前端项目，很容易在路径和资源上出小问题。
首页能正常打开，不是 404
CSS、JS、图片都能加载
页面刷新后不会白屏
移动端布局没有明显错位
图片上传、复制、导出等核心功能还能用
README、PRD、DESIGN.md 里记录的使用方式是最新的
如果绑定了域名，https:// 能正常访问
如果某些图片在本地能显示，上线后显示不了，优先检查路径。比如本地随手写的绝对路径、中文文件名、大小写不一致，都可能在线上出问题。
六、核心心得
在结束之前，分享几个在实际 Vibe Coding 过程中总结的关键心得：
PRD 是控制 AI 方向的最有效工具。
写一份清楚的 PRD。PRD 让 AI 知道项目的全貌，而不是只盯着你当前这一句话，这是需要练习的能力。
文档体系（PRD + DESIGN.md + CLAUDE.md）让 AI 更可控。
PRD 管”做什么”，DESIGN.md 管”做成什么样”，CLAUDE.md 告诉 AI “当前代码是什么样的”。三份文档配合使用，AI 几乎不会做出意料之外的修改。如果项目复杂，就进一步按照渐进式披露的思路来做。
从简单项目开始，搭积木一样推进。
rico-md 从一个单文件项目开始，逐步模块化、逐步完善。每一个功能完成，检查通过，git 做好备份，再继续下一个功能的开发。
让 AI 定期总结当前状态。
在长对话中，AI 的记忆会逐渐模糊。每隔几轮对话，让 AI “总结一下当前项目的状态和最近的改动”，能帮它重新对齐上下文。
附录：几个可以直接复制的 Prompt
下面这些提示词可以直接复制使用。你不需要一次性全用，按当前阶段挑一个就行。
代码块
Markdown
// 明确身份和解释深度
我是一个没有开发基础的新手，请用适合设计师理解的方式解释。
如果涉及技术概念，请先用一句话解释它是什么，再告诉我为什么现在需要知道它。
遇到关键选择时，请给我 2-3 个方案，并说明推荐哪一个、为什么推荐。
// 选择技术栈
我想做一个项目，需求是：
- [写你的项目目标]