Vibe Coding 实战系列 · 第二篇

全文 6000 字，阅读约 12 分钟，核心就三句话：

1. vibe coding 不是让 AI 写代码，是你一个人扮演一个团队
2. 9 个工位 = 产品+设计+前端+DBA+后端+运营+移动端+测试+运维
3. 90% 的 vibe coding 教程只讲"怎么写代码"，本地demo打开浏览器演示，不讲最后一公里"怎么上线"。

一个月前，我只有一个想法。

今天，微信里能搜到「观简国学」小程序了。

中间没有团队，没有排期，没有评审会。

只有我，和 AI，和 8 个编号从 001 到 008 的目录。

朋友看完说：你这一个人，就是一个团队啊。

我说：不，我一个人，干了八个工位的活。

这篇就是这个项目的全流程实录——每个工位我在想什么、做了什么决策、踩了什么坑。

上图：「观简国学」首页——每日 5 句速刷、印章打卡、写心得，新中式米白宣纸底 + 朱砂红强调色。

本文首发于我的个人博客「山外云」：https://www.shanwaiyun.top 博客排版更清爽，还有更多 AI 开发 + 运维实战文章

先看这张图：8 个目录 = 8 个角色

001.产品PRD
002.产品UI
003.前端代码
004.数据库
005.后端代码
006.后台管理系统
007.跨端APP应用
008.项目测试
009.项目上线

很多人以为 vibe coding 就是"让 AI 写代码"。

错了。

vibe coding 的本质，是你一个人扮演一整个团队。

下面我按工位顺序，聊聊每个角色的视角、决策和踩坑。

🟢 001 号工位：产品经理

第一个角色，产品经理。

打开 001 目录，写 PRD。

很多人写 PRD 一上来就列功能。我不。

先写场景，再写功能。

场景 
1：通勤地铁 30 分钟，想读两句国学，手机单手操作场景 
2：读到有感触的句子，想写几句心得，不用开笔记 App场景 
3：想分享一句经典给朋友，不要复制粘贴的土味截图场景 
4：想坚持每天读一点，但总是忘，需要一个轻量的打卡机制

用户画像画了三个：

核心功能列了 6 个：每日日课、印章打卡、心得笔记、典籍库、收藏分享、成就勋章。

然后我做了一件事：写"不要做的"清单。

• 不做社交广场（用户群体不爱晒）
• 不做付费内容（违背"安静读点书"的定位）
• 不做完整古籍检索（用户不是研究者）
• 不做推送轰炸（一天最多一条）

这个清单比功能清单还重要。

做产品最容易犯的错不是"少做了什么"，是"什么都想做"。

写 PRD 花了我整整一天——比写代码花的时间多。

老张反常识：AI 时代，产品能力比编码能力值钱 10 倍。因为代码 AI 能写，但"做什么、不做什么"，AI 替你决定不了。

写完 C 端 PRD，我又切换了一下视角：如果我是运营，我需要什么后台？

UGC 内容怎么审核？用户数据怎么看？心得违规了怎么删？

于是又补了一份《后台管理系统 PRD V1.0》。

这就是 vibe coding 的好处：你可以随时换个身份，发现上一个身份的盲区。

🔵 002 号工位：UI 设计师

第二个角色，UI 设计师。

还是那个原则：UI 阶段花的时间 > 编码阶段。

设计理念定了四个字：新中式美学。

我给自己定了 3 个不可妥协的设计原则：

1. 米白宣纸底，不用纯白——纯白刺眼，不够"读"
2. 朱砂红强调色，全篇不超过 3 处——多就俗
3. 印章风格打卡，不用普通按钮——打卡要有仪式感

13 个页面原型，从首页日课、典籍库、章节阅读、收藏、搜索、分享卡、个人中心、设置……

上图：首页设计——米白宣纸底、朱砂红打卡按钮、今日经句 + 换一句，整个产品的视觉基调就定在这一页。

做设计的时候还反哺了产品——

比如「印章打卡」，PRD 里本来就是个普通按钮。做设计时越看越觉得：打卡这个动作，应该有仪式感。 古人读书要钤印，为什么我们不可以？

于是加了印章下落 + 朱砂印泥的动效。后来这个功能成了整个产品最有记忆点的地方。

产品和设计不是线性的，是来回拉扯的。一个人干活，拉扯起来特别快。

老张反常识：AI 能帮你出 100 张图，但决定哪张好看的审美，AI 没有。审美，是未来最值钱的能力之一。

🟠 003 号工位：前端工程师

第三个角色，前端工程师。

9 个页面，13 部典籍(还在陆续增加)、759 章的章节数据，5 个状态管理模块。

上图：经典库——经史子集四部分类，13 部典籍全部带译文注释，卡片式设计像翻开一本本线装书。

写前端的时候，最爽的是「内容工程」——

13 部典籍的章节数据，不是手敲的，是用脚本生成 + 校验的。项目里有数据清理脚本，还有内容审校报告（论语、道德经、孟子、世说新语各一份）。

因为我既是前端又是内容运营，我知道数据结构怎么设计对两边都友好。

这里还发生了一个小插曲——

PRD 里说"生僻字显示拼音"，但做着做着发现：如果每个字头顶都标拼音，页面会很丑，像小学课本。

最后方案是：生僻字不标在正文里，放在注释区，词条式展示——既解决了读音问题，又不破坏正文的阅读节奏。

这种决策，如果要跨角色沟通，至少要开一个会。我一个人，想了 30 秒，改了。

🟡 004 号工位：DBA 数据库管理员

第四个角色，DBA。

16 张业务表。8 个 SQL 脚本按顺序执行：建库 → 扩展 → 建表 → 索引 → 注释 → 种子数据 → 迁移说明 → 内容导入。

做 DBA 的时候，我又发现了前端的一个坑——

前端存的「阅读进度」是本地的，换设备就丢。那后端要不要做同步？当然要。

于是在 004 里加了阅读进度表，然后回到 003 前端加了同步逻辑，再去 005 后端补接口。

跨角色的信息差，是项目延期的最大原因。一个人干，信息差为零。

老张反常识：很多人学 AI 编程只学写代码，不学数据库。但一个产品能不能跑稳，80% 看数据层设计。

🟣 005 号工位：后端工程师

第五个角色，后端工程师。

十多个路由模块：认证、打卡、收藏、笔记、进度、典籍、搜索、成就……

后端这块，最有意思的是「成就系统」。

连续打卡 7 天、21 天、100 天、365 天——听起来简单，实现起来有一堆边界情况：

• 跨月连续天数怎么算？
• 时区问题怎么处理？
• 补签功能虽然 V1 不做，但表结构要不要预留？

写着写着，我又切回 DBA 视角补索引和约束；切回产品视角确认 V1 范围；切回测试视角给自己写测试用例。

一个人的项目，上下文是完整的。你不用写文档告诉另一个人怎么想的，你自己就是那个人。

🟤 006 号工位：运营专员

第六个角色，运营专员。

十多个功能模块：数据看板、用户管理、内容管理、打卡统计、收藏统计、数据导出……

做运营后台的时候，我第一次真切感受到「自己给自己提需求」的效率——

作为运营，我需要：搜索用户、看打卡记录、导出数据、审核违规心得、软删除 + 恢复。

作为后端，我知道：哪些接口要分页、哪些要脱敏、哪些只能读不能写。

作为 DBA，我知道：哪些查询要加索引、大数据量导出要用游标。

三面镜子互相对照，出来的东西既够用又不冗余。

而且后台还加了 MFA 二次验证——毕竟是管理入口，安全第一。运维人的职业病，到哪个岗位都改不了 😂

🔴 007 号工位：移动端开发工程师

第七个角色，移动端开发。

和 H5 功能同构，但有一堆微信特有的坑。这部分是整个项目踩坑最多的。

坑 1：隐私授权弹窗

微信新规：调用头像选择、保存相册这些隐私接口前，必须先弹隐私指引，用户同意了才能调。

改了三版才稳：

• 第一版：用 JS 事件 + 自定义弹窗 → 不行，报 buttonId is wrong
• 第二版：给同意按钮加 id → 还是不行，组件内的 button id 微信不认
• 第三版：直接用微信原生授权按钮 → 终于稳了

坑 2：头像临时路径

微信头像选择返回的是临时路径，过几天就失效。用户换个手机、清个缓存，头像就没了。

这个坑上线前没彻底解决（先靠加载失败自动回退默认图标兜底），留到下个版本做上传持久化。

真实项目就是这样，永远有取舍，永远有下版本。

上图：心得页——每条心得都可以关联当日经句，点击引用块直接跳转原文。这是这次迭代新加的功能，也是朋友反馈里最想要的一点。

⚫ 008 号工位：测试工程师

第八个角色，测试工程师。

按照我上篇说的 4 层测试法：

第 1 层：功能测试（每功能单独跑）  ↓
第 2 层：流程测试（用户真实路径走一遍）  ↓
第 3 层：异常测试（断网/慢网/极端输入）  ↓
第 4 层：设备测试（iOS / Android / 微信不同版本）

三份测试计划、三份测试报告，单元测试 + E2E + 接口测试全覆盖。

做测试的时候我又发现了一个好玩的现象——

自己写的代码，自己测，bug 率其实不低。 因为你写代码时的思维定势，测试时也带着。

怎么办？切换角色测。

• 用「产品经理」的身份测：这个功能对用户有价值吗？
• 用「小白用户」的身份测：第一次打开，看得懂吗？
• 用「恶意用户」的身份测：乱输入、狂点按钮、断网……

换个身份，bug 自己就冒出来了。

🚀 上线那天：第 9 个工位，运维工程师

还记得开头我说的吗？90% 的 vibe coding 教程只讲"怎么写代码"，不讲"怎么上线"。

但上线，才是普通人最大的坎。

代码写完了，然后呢？服务器怎么买？域名怎么解析？证书怎么弄？反向代理怎么配？数据库怎么迁到生产环境？小程序怎么备案？审核要注意什么？

这些东西，AI 能帮你写配置，但它不知道你会踩哪个坑。

我把上线拆成了 5 件事，一件一件说。

第一件：服务器 + 数据库

买云服务器、装环境、建库、导数据。

听起来简单，做起来全是细节：

• Python 版本不对，依赖装不上
• 数据库编码没设对，中文乱码
• 生产环境和开发环境的配置怎么隔离（绝对不能把开发配置带上线）
• 数据库账号权限怎么分配（后台只读、C 端读写、管理账号单独）

这些我在上一篇「运维老哥的 10 步实战流」里详细写过，这里不展开。只说一句：环境问题，永远比代码问题更磨人。

第二件：HTTPS 证书

小程序要求所有接口必须 HTTPS，HTTP 直接拦截。

证书这个东西，说简单也简单——现在免费证书一大把。说坑也坑：

• 证书链不完整，Android 正常 iOS 报错
• 证书到期忘了续，线上直接挂
• 多域名证书怎么配，通配符和单域名怎么选

我的做法是：子域名单独配证书，不和主站混用——出问题好排查，互不影响。

第三件：反向代理 + 多服务共存

这台服务器上本来就跑着我的博客（www.shanwaiyun.top），现在要加一个国学后端，还要加一个运营后台

三个服务，一台机器，一个 nginx。

怎么配？

• 不同 server_name 走不同的反代
• 同一个域名下，/api/ 走 C 端，/xxx/ 走后台
• 静态资源直接 nginx 吐，动态请求反代到后端
• 端口号错开，别打架

说起来就几句话，配起来能调一下午——路径匹配优先级、斜杠加不加、重定向循环、静态资源 404……

这就是运维人的日常：看起来什么都没做，其实什么都理顺了。

第四件：小程序备案 + 审核

这是最容易被忽略、但最能卡你上线的环节。

很多人做小程序，代码写得飞快，写完才发现——要备案。

观简国学走的是小程序备案通道，备案号是 赣ICP备20260xx，前后等了一周左右。

而且备案只是第一步，提审还有一堆事：

• 用户隐私保护指引：你用了哪些用户信息（头像昵称、相册写入），必须一条条声明，措辞不对就打回
• 隐私弹窗：调用隐私接口前必须弹指引，用户同意了才能调——这个我踩了三版才稳，前面 007 工位说过
• UGC 声明：有用户生成内容（心得笔记），必须声明并具备审核删除能力
• 服务内容声明：后台要能审核、能删除，审核员可能会抽查

建议：域名一注册、小程序一注册就开始走备案流程，别等代码写完了才想起来。 能省你至少半个月。

第五件：全流程验证

全部部署完，我跑了一遍完整链路：

小程序静默登录 → 拿到 openid → 生成用户  → 打卡 → 连续天数 +1 → 印章动效  → 写心得 → 保存 → 后台能看到 → 可删除可恢复  → 分享卡 → 保存相册 → 隐私弹窗 → 同意 → 成功  → 后台登录 → 账密 → MFA 动态码 → 进入看板

全绿。

那天晚上，我在手机上打开小程序，看到「博学之，审问之，慎思之，明辨之，笃行之」安安静静地在屏幕上。

突然有点感动。

不是因为做了个多厉害的东西，而是——一个想法，从 001 号工位的一个文档，走到了 007 号工位的一个真实可用的产品。

中间没有会议，没有排期，没有对齐，没有评审。

只有我，和 AI，和 8 个目录。

还有一个运维人的深夜，和一堆配置文件。

老张反常识：AI 编程时代，最值钱的能力不是写代码，是把东西上线的能力。因为 AI 写的代码跑不起来，等于零。

🏁 老张总结：vibe coding 的本质

很多人问我，AI 编程是不是就是「让 AI 写代码」？

不是的。

vibe coding 是「你有一个愿景，AI 帮你把它具象化」。

你是产品经理，AI 帮你写 PRD； 你是设计师，AI 帮你出原型； 你是前端，AI 帮你写组件； 你是 DBA，AI 帮你建表； 你是后端，AI 帮你写接口； 你是测试，AI 帮你写用例； 你是运维，AI 帮你部署。

你不是在「用 AI 干活」，你是在「扮演一个团队」。

这个团队里的每个人，都共享同一个大脑，同一个上下文，同一个愿景。

他们之间没有沟通成本，没有信息差，没有部门墙。

他们只有一个目标：把东西做出来。

最后

「观简国学」上线了。

它不完美。还有很多想做的功能没做，还有很多细节可以打磨。

但它真实地存在着。

微信搜索「观简国学」，你就能找到它。

扫码直接体验「观简国学」——每日 5 句经典，印章打卡，写心得。

如果你也有一个「想做但觉得缺人」的想法——

别等团队了。

你自己，就是一个团队。

如果这篇对你有启发，点个赞、点个在看、转发给你那个总说"缺人做不了"的朋友——

告诉他：别等团队了，你自己就是一个团队。

观简国学 · 与经典同行，与日课为伴

💬 互动话题

评论区聊聊：

1. 如果让你一个人扮演一个团队，你最有信心的是哪个角色？ 产品？设计？还是运维？
2. 你做 AI 项目时，踩过最奇葩的坑是什么？ 是平台规则？还是兼容性？
3. 你觉得 AI 时代，人最不可替代的能力是什么？

🔗 相关阅读

• 《别再瞎写提示词了：一个运维老哥的 Vibe Coding 10 步实战流》（系列第一篇 · 方法论）
• 《我用 DeepSeek v4 Flash + Codex，10 小时写完博客国学板块》
• 《国学板块上线 48 小时，我修了 30 个 bug》
• 《一个运维老哥用 AI 造了个完整产品：写代码一文不值，难的是审美》

以上文章均可在我的个人博客「山外云」找到，排版更完整，阅读体验更好：https://www.shanwaiyun.top

山外云 | https://www.shanwaiyun.top

关注我，分享编程、运维、AI 工具实战，以及有意思的技术探索。