Vibe Coding 最容易让新手踩坑的就是页面能玩就以为产品已经做完可以上线了。

真正准备上线至少还要处理：登录、数据权限、支付、密钥、安全、版本管理。

今天我就直接按一条真实的流程梳理一遍：Plan → Build → Auth → Payment → Security → GitHub → Codex → Publish

01｜先 Plan，别上来就让 AI 开写

Vibe Coding 这个词由 Andrej Karpathy 在 2025 年提出。

最原始的意思甚至包括：几乎不看 AI 写出的代码，只描述需求、运行、发现问题、继续让 AI 改。

这种玩法很适合原型，但正式产品不能一直靠“感觉验收”。

如果用 Base44，第一步建议打开：

Plan Mode

输入：

我要做一个电影收藏 App。用户可以注册、评分、收藏电影。第一版只做 MVP，不做社区、聊天和复杂推荐。先规划页面、数据表、用户流程和权限，不要直接生成。

Base44 当前 Plan Mode 会继续询问受众、流程、功能和设计，并整理成结构化计划。

而且：Plan Mode 当前不消耗 Credits，点击 Start Building 后才开始消耗。

注意：Plan Mode 主要用于创建新 App 的第一步，不是做完以后随时重新开启的模式。

02｜第一版只做核心闭环

别因为 AI 加功能很容易，就一次塞十几个需求。

电影 App 第一版只做：

先证明：用户真的能完整走完流程。

Base44 本身提供托管数据库、用户认证、权限和 Hosting，不需要你先手动搭一套后端。

03｜最重要的不是“能登录”，而是数据隔离

假设有：

User Movie Rating Favorite

真正该检查的是：

用户 A 能不能看到用户 B 的 Favorite？

Base44 当前每张数据表都能分别配置：

Create Read Update Delete

例如用户私有数据可以设置：Creator only

让创建者只能访问自己的记录。

所以直接检查：

Dashboard → Data → Favorite → Permissions

然后建两个测试账号：

账号 A 创建收藏 ↓ 账号 B 登录 ↓ 尝试读取 / 修改 A 的收藏

正确结果：B 不应该成功。

04｜准备收费先跑 Stripe Test，不要直接收真钱

如果要做 Pro 会员，可以告诉 Base44：

增加 Free / Pro 两档。使用 Stripe Checkout。先只使用测试支付。

Base44 当前 Stripe 集成会先进入 Test Environment，不会直接产生真实扣款。

而且有两个实际限制：Stripe 集成当前需要 Builder Plan 或以上。

测试 Checkout 需要在已 Publish 的 App 上运行，Editor Preview 里不能完成完整支付测试。

至少测：

付款成功付款失败重复付款页面刷新升级后权限是否真的变化

尤其是 Credits / Membership：一定保证同一笔支付不能因为刷新页面被重复加权益。

Base44 官方自己的支付示例也专门要求验证付款并避免重复发放 Credits。

05｜API Key 用 Secrets，不要放进前端代码

如果接：

OpenAI、TMDB、Resend、Stripe 等服务，

敏感 Key 不要写进 React 前端。

正确结构：

浏览器 ↓ Backend Function ↓ Secret ↓ 第三方 API

Base44 的 Backend Functions 可以在服务端读取 Secrets，而不会把密钥暴露给浏览器。

这里纠正一个容易说过头的观点：Base44 官方确实允许你在平台专门要求凭证时通过 AI Chat 输入 API Key，平台会负责保存。

但如果你想最清楚地控制密钥，直接去：

Dashboard → Secrets → Add Secret

更直观。

06｜上线前一定跑 Security Scan

Base44 当前：

Dashboard → Security → Run Security Scan

所有套餐，包括 Free，都可以使用。

目前主要检查：

数据权限缺口暴露的 Credentials 登录验证缺口 Package 漏洞 Security Headers

但官方自己也明确写着：最终安全责任仍然在开发者。

所以 Scan 完以后，再手动做：

账号 A 能不能读 B 的数据？ A 能不能修改 B？普通用户能不能做管理员操作？未登录能不能进私人页面？价格 / 权限能不能从前端篡改？

07｜遇到 Base44 反复修不好的问题再上 GitHub + Codex

不是第一天就需要 Claude Code / Codex。

出现这些问题时再用：

复杂 Bug 第三方 API 复杂业务逻辑大型重构测试

Base44 当前支持 GitHub 2-Way Sync，需要 Builder Plan 或以上。

连接：

Dashboard → GitHub → Connect to GitHub

然后本地：

git clone

https://github.com/YOUR-NAME/YOUR-REPO.git

cd YOUR-REPO npm install

Base44 官方本地开发流程还要求配置 .env.local，再运行：

npm run dev

这时再把项目交给 Codex。

不要说：

帮我把项目优化一下。

而是：

先阅读仓库，不修改代码。找出电影海报无法加载的根因。给出涉及文件、原因、最小修改方案。确认后修改。增加测试，不做无关重构。

Codex 当前官方定位本身就是完成 Feature、Refactor、Migration、Testing 等完整工程任务，而不仅是生成代码片段。

修改完后怎么回 Base44

本地完成并测试后：

git add . git commit -m “fix: movie poster loading” git push origin main

Base44 当前要求用于同步的主分支名为：

main

Merge / Push 到 main 后，修改会同步回 Base44。

但注意：同步代码 ≠ 自动正式发布。

还要回 Base44：

检查页面 ↓ 重新测试 ↓ Security Scan ↓ Publish

GitHub 文档明确要求最后点击 Publish，修改才会真正对用户生效。

这个人工确认点建议永远保留。

域名放到最后

验证阶段直接用：

xxx.base44.app

免费内置域名就够了。

真有人开始使用以后，再绑定自己的域名。

Base44 当前 Custom Domain 需要：

Builder / Pro / Elite

外部 DNS 配置正确以后，SSL 由 Base44 自动签发和续期。

没有用户之前，Logo、域名、字体都不是最重要的。

新手最终只需要记住这条链路

① Plan ↓ ② Build MVP ↓ ③ 双账号测权限 ↓ ④ Stripe Test ↓ ⑤ Security Scan ↓ ⑥ 找真实用户 ↓ ⑦ 真遇到复杂工程问题再接 GitHub + Codex ↓ ⑧ Verify ↓ ⑨ Publish

Vibe Coding 真正厉害的地方不是：“不会编程也能一键做 SaaS”。

而是：以前验证一个产品想法可能要几周，现在可以非常快做出一个真实可操作的版本。

但进入生产以后数据、权限、支付、安全和最终发布，仍然需要你自己验收。

所以我更推荐的 Vibe Coding 工作流不是：Prompt → Accept All → 上线

而是：Plan → Build → Test → Security → Agent → Verify → Publish。

AI 负责把东西快速做出来，人负责证明它真的能用、不会乱收费、不会存在明显安全问题然后再上线。