从零构建一款可上线产品：Vibe Coding 实战全流程拆解

2026 年 1 月 12 日，WaytoAGI「Vibe Coding 实战训练营」第二课开讲，由 Enter 创始人龙龙主讲。这堂课没有讲一行代码，却完整演示了如何用 AI 编程工具，从痛点出发，完成 PRD 撰写、前端搭建、数据库连接、发布上线、SEO 优化与数据埋点的全链路。适合零代码基础的创业者、产品经理，以及想用 AI 独立做出产品的职场人。

先验证，再搭建：MVP 思维与团队规模

▶ 8:24 · 看这一节

课程从回顾上一讲的 MVP（最小可行性产品）概念开始。龙龙强调，做产品不需要一开始就搭建完整系统，而是先做出一个能对外发布、验证核心想法的简单产品。他以去年火爆的 AI 会议纪要产品为例：早期团队并没有直接开发 AI 模型，而是让成员假装机器人旁听客户会议，再人工整理纪要，用这种方式验证「AI 能否更好地记录会议内容」以及「应该记录什么信息」。这种人工模拟跑了几个月到一年，才孵化出合适的产品形态。

「MVP 不一定必须得做出一个完整的产品，完全不需要。你只需要想一个合适的方法，哪怕人工参加这个会议，哪怕用飞书、用微信群，任何方式都无所谓，只要这种方式能够让我们比较低的成本快速地验证思路，那么它就是很好的点。」

关于创业团队规模，龙龙分享了 Enter 团队的情况：目前约 10～12 人。他给出三点判断：第一，AI 让原先需要 20～30 人的工作量缩减到 10 人左右；第二，团队人数取决于业务阶段，早期可能四五个人就开始干；第三，不能忽略行业差异，比如切片业务 AI 就无法完全替代人工。

从痛点出发：PRD 怎么写

▶ 17:29 · 看这一节

龙龙以自己「想给学员充值但不知道邮箱」的真实痛点为案例，完整演示了 PRD 的思考过程。他先列出几种解决方案并逐一分析优劣：给所有新用户直接充值（无法体现学员特权）、分享注册链接（只能充一次）、在飞书群收集邮箱（跳转不高效）、做飞书问卷（缺乏品牌信息）。最终推导出需求：需要一个能收集账号、跟踪充值状态的页面，这就是最小 MVP。

PRD 的框架包括：背景（为什么做）、目标（达到什么效果）、所需页面与系统、详细流程（学员和管理员各自的操作路径）。龙龙特别强调流程图的必要性：「这个图我们不能省，我们一定要做，这样能够帮我们把整个链路给它串起来。」他分别画了学员视角（打开页面 → 填表单 → 提交 → 等待充值 → 查看状态）和管理员视角（登录后台 → 查看工单列表 → 验证信息 → 充值 → 更新状态）两条流程。

针对第一课作业中痛点挖掘较弱的问题，龙龙给出建议：描述问题时不要总结提炼，要原话指出；分析痛点时再做逻辑分析。同时要明确用户的具体场景、知识类型（文本、图片还是视频）、呈现方式等细节。

实操演示：从 Prompt 到前后端分离

▶ 40:44 · 看这一节

进入实操环节，龙龙先解决了产品的全英文界面问题：在 Chrome 应用商店安装「沉浸式翻译」插件，一键翻译，可选择 GLM 等不同模型。

随后他在 Enter 中新建项目，用一段简单直白的 Prompt 描述需求：「我要做一个学员可以在网站上提交申请跟查看结果的平台，以及我作为管理员，可以在网站上去看我所有的申请以及我去操作通过或驳回。」龙龙强调，第一版 Prompt 不需要写得很详细，目的是先验证流程是否跑得通。生成后，他模拟学员提交申请、管理员审核通过、学员查询结果，确认前端交互流程可行。

但纯前端页面存在致命问题：刷新后数据丢失。下一步是连接数据库。龙龙介绍了 Supabase 平台——它天然集成数据库，将建表流程简化，用户无需感知底层细节。他演示了在 Supabase 中创建项目、连接数据库、查看表结构的操作，并解释了「表」的概念：数据标准化或结构化沉淀的地方。

随后他演示了前后端分离：将 MVP 中杂糅的学员申请和管理员审核拆成两个独立系统，实现权限隔离。他还深入讲解了 Supabase 中的 RLS（行级安全策略）概念：「策略权限，策略就什么人能干什么事。」以申请表为例，需要配置三条策略：任何人可插入表单、任何人可通过申请 ID 获取结果、管理员可更新表单。

发布、SEO 与数据埋点

▶ 1:23:43 · 看这一节

产品开发完成后进入发布环节。龙龙强调版本意识：「我们可能在开发过程中会生成无数个版本，要记得哪一个版本代表什么样的功能，哪个版本是在线上的，哪个版本是我们交付给用户的。」发布操作会做两件事：把选中的版本设为正式版本，并分配一个唯一的、永不变的域名。预览链接用于测试，正式链接给终端用户。产品支持随时回滚到任意历史版本。

SEO（搜索引擎优化）是容易被忽视的环节。龙龙演示了按 F12 打开检查面板，发现页面标题还是默认的「Enter」，描述信息也不准确——这意味着搜索引擎无法理解页面内容。解决办法很简单：把链接和需求发给 AI，让它帮忙做 SEO 优化。「一些原先可能需要专业知识的你都不需要，你就直接让 AI 跟他说你要帮我去做 SEO 的话就搞定了。」

数据埋点部分，龙龙给出核心原则：「只要判断不了这件事情要不要埋，那就都埋。数据多了可以不看，但不能没有。」他演示了完整的 Google Analytics（GA）接入流程：注册账号、选择业务目标、填入网站链接、把 GA 代码片段发给 AI 让它插入网页、发布后测试数据上报。对于自定义事件（如统计用户点击「提交申请」按钮的次数），同样通过 Prompt 让 AI 实现，在 GA 后台按事件名称查看统计数据。

对于更专业的埋点需求，他介绍了 PostHog 平台：支持用户动线回放、热力图等高级功能。接入方式与 GA 相同——复制代码片段，发给 AI 配置即可。

移动端适配与产品迭代

▶ 2:06:32 · 看这一节

「世界的流量在手机，所以我们要做移动端适配。」龙龙演示了如何一句话让 AI 完成移动端适配：「学员很多都是用手机申请的，所以我们要做移动端。」AI 会自动调整响应式布局。他提醒，适配效果因产品而异，需要人工检查。

产品发布后进入持续迭代阶段：接外挂平台、优化功能、提升页面美观度。龙龙展示了自己做的产品页面，包含默认填充上次填写内容、可爱的 emoji 等细节。「做产品就是有很多的细节在这，什么时候填、什么时候不填什么东西，这都是细节，然后怎么样让用户更爽。」

现场问答

Plan 模式是不是相当于写 PRD？

是的。Plan 模式（或思考模式、Spec Coding）就是让 AI 先充当产品经理补充细节，生成方案后再实施。「以前是产品经理把它拆得很细，现在你用 plan 模式，AI 就会帮你去完善，并且这种方式会变得越来越好。」

前端和后端是什么意思？

前端就是普通用户看到的纯页面，不连数据库，刷新后数据就没了。后端是数据存储和处理的部分，需要把数据存到数据库里。

Supabase 是什么？和 Enter 是什么关系？

Supabase 是第三方数据库平台，天然集成建表流程。Enter 是写代码的工具，通过连接功能操作 Supabase。类似 Botnew 等产品底层用的也是 Supabase，只是包了一层自己的界面。

做 SEO 能赚钱吗？

通过 SEO 快速盈利难度较大。有人做几百甚至几万篇文章发到 Google 上赚广告费，但要让文章被 AI 和搜索引擎理解并收录非常困难，风险很高。

GA 和 PostHog 有什么区别？

GA 适合看宏观流量数据（PV/UV、来源、在线人数），PostHog 适合微观洞察（热力图、用户操作录屏回放）。GA 免费，PostHog 也有免费额度。

数据埋点会侵犯用户隐私吗？

涉及性别、姓名、身份证、手机号等敏感信息时需要特别注意。所有产品上线时都应该带上隐私协议（Privacy Policy），讲明白采集了什么数据。

Enter 和 Cursor 有什么区别？

Cursor 是 IDE 工具，Enter 是网页端工具。但 Enter 团队用 Enter 开发 Enter——「如果我们自己的产品都不能服务自己，那我们还做什么产品？」

要点回顾

• MVP 思维：先验证再搭建，用最低成本跑通核心价值闭环，不追求一步到位。
• PRD 撰写：讲清背景、目标、所需页面与系统、详细流程；描述问题时不总结提炼，原话指出。
• Prompt 技巧：第一版用简单直白的话描述需求即可，验证流程后再逐步补充细节。
• Plan 模式：让 AI 充当产品经理，先思考方案再实施，适合需求不清晰时使用。
• 数据库：Supabase 天然集成建表流程，RLS 策略决定谁能看什么数据。
• 版本管理：区分预览链接和正式链接，正式版本域名永不变，支持随时回滚。
• SEO：通过 F12 检查页面标题和描述，让 AI 帮忙优化，让搜索引擎理解页面。
• 数据埋点：不确定要不要埋的事件都埋；GA 看宏观流量，PostHog 看用户动线。
• 移动端适配：一句话告诉 AI 需要适配移动端，它会自动完成响应式调整。
• 课后作业：三选一写 PRD（痛点、个人主页、credits 申请系统），落地成接 Supabase 的网页，加上数据插件后思考用户下一步行动，目标是能自信地在朋友圈分享。