最近刷到一个很适合做笔记的视频：《APP 从 0 → 上线发布！免费 Vibe Coding 流程：Stitch + AI Studio + Antigravity！》。

它讲的不是“AI 生成一个页面 Demo”这种浅尝辄止的玩法，而是一套比较完整的 Vibe Coding 产品落地流程：从一个想法开始，先做 UI，再生成前端，再补后端和数据库，最后推到 GitHub 并部署到 Vercel。🚀

这篇文章就把视频内容整理成一份博客版实战笔记，方便以后自己照着做项目。

视频地址：YouTube 原视频
参考转录：LilysAI 视频笔记

一句话总结 🧠

这套流程的核心是：

用 AI 把“想法 → UI → 前端 → 后端 → 数据库 → 部署”串起来，让一个 App 从概念快速变成可访问的线上应用。

视频里用的案例是一个 在线宠物领养 App：用户可以浏览宠物、查看详情、提交领养申请；管理员可以录入宠物信息、审批申请；审批通过后，用户会收到消息，宠物也会从可领养列表中移除。🐶🐱

整体流程图 🗺️

1
2
3
4
5
6
7
8
9

flowchart LR
    A[想法] --> B[Stitch 生成 UI]
    B --> C[Figma 展示与微调]
    C --> D[AI Studio 生成前端]
    D --> E[Antigravity 补后端]
    E --> F[Supabase 数据库]
    E --> G[GitHub 托管代码]
    G --> H[Vercel 部署上线]
    H --> I[可访问的完整 App]

工具分工一览 🧰

第一步：用 Stitch 生成 UI 🎨

视频的第一步是打开 Google Stitch，用自然语言描述想做的 App。

比如这次案例的目标是：

做一个在线宠物领养 App，包含欢迎页、宠物列表页、宠物详情页、领养申请页、个人中心等页面。

Stitch 会直接生成多张 UI 页面，还会填入一些 mock 数据。它的价值在于：你不用一开始就纠结布局、配色、按钮、卡片这些细节，可以先让 AI 给出一个能看的初稿。

这里有几个小技巧 ✨

• 如果生成的是英文界面，可以让 Stitch 批量改成 简体中文。
• 可以要求使用无版权字体，比如 思源黑体。
• 可以通过自然语言修改页面，比如“只保留猫和狗分类”。
• 可以用标注功能框选具体区域，让 AI 精准修改。
• 可以生成不同 UI 变体，快速比较哪种风格更舒服。
• 可以查看热区预测，判断用户可能更关注哪里。

我觉得这个阶段最重要的不是“生成一次就完美”，而是 快速拿到一个可以讨论、可以修改、可以继续开发的设计稿。✅

第二步：导入 Figma 做展示和微调 🖼️

Stitch 生成的 UI 可以导入 Figma。

视频里提到几种方式：

如果只是自己看效果，直接复制粘贴也够用；如果要继续交付、评审、二次设计，我更推荐用插件导入。📌

第三步：用 AI Studio 生成前端 App ⚡

Stitch 生成的页面本质上还是一张张独立设计稿，它们之间没有真正的交互关系。

所以接下来要把这些页面导入 Google AI Studio，让它把 UI 组织成一个可以点击、可以跳转、可以填写表单的前端 App。

视频里的操作大概是：

1. 在 Stitch 中全选页面。
2. 选择导出到 AI Studio。
3. AI Studio 接收 UI 图和对应 HTML。
4. 选择模型并生成前端代码。
5. 测试交互，发现问题就继续让 AI 修改。

这里很像“边跑边改”的开发方式。比如：

• 领养申请页面没有下一步按钮，就让 AI 补上。
• 消息页面点击没反应，就让 AI 增加通知功能。
• 不想要兔子分类，就框选后让 AI 删除。
• 地理位置显示太复杂，就让它只保留城市。

这一步做完以后，前端看起来已经像一个 App 了。🎉

但要注意：这还不是完整应用。

因为 AI Studio 生成的前端通常会把宠物数据直接写在代码里，也就是所谓的“假数据”。真正上线的应用，需要数据库、接口、用户系统、权限和业务逻辑。🚧

第四步：用 Antigravity 补齐后端 🧩

这一步是整个视频里最关键的地方。

把 AI Studio 生成的前端代码下载下来，导入 Antigravity，然后让它分析项目并生成：

• 后端接口
• 数据处理逻辑
• Supabase 数据库表结构
• 环境变量配置说明
• 项目启动和部署文档

视频里 Antigravity 会先生成一个执行计划，里面包含技术架构、数据库表设计、需要配置的参数等。确认没问题后，再让它继续生成代码。

这点很值得学习：不要一上来就让 AI 闷头写完整项目，先让它出计划，再确认方向。 🧠

第五步：配置 Supabase 数据库 💾

在真实应用里，数据不能写死在前端。

视频里用 Supabase 来存这些内容：

• 用户信息
• 宠物信息
• 收容单位信息
• 收藏记录
• 领养申请记录
• 消息通知

配置流程大概是：

1. 在 Supabase 新建项目。
2. 复制 Data API URL 和 API Key。
3. 写入项目 .env 环境变量。
4. 打开 Antigravity 生成的 init.sql。
5. 到 Supabase SQL Editor 执行建表脚本。
6. 回到 App 测试注册、登录、提交申请等功能。

到这里，App 就从“看起来能用”升级成“数据真的会保存”的状态了。✅

第六步：推送到 GitHub 🔧

接下来就是工程化环节。

把代码提交到 GitHub，主要有三个好处：

• 可以做版本管理，后面改坏了也能回退。
• 可以持续迭代，不会丢代码。
• Vercel 可以直接从 GitHub 拉代码部署。

如果不熟悉 Git，也可以让 AI 帮你写命令，比如：

1
2
3
4
5

git init
git add .
git commit -m "init pet adoption app"
git remote add origin <你的仓库地址>
git push -u origin main

当然，真正做项目时，提交信息还是建议写清楚一点。以后回头看历史记录，会感谢现在的自己。😄

第七步：部署到 Vercel 🌍

视频里最后选择 Vercel 来部署。

这里有个重点：这个 App 已经不是纯静态页面了，因为它依赖后端逻辑和数据库，所以不适合直接丢到 GitHub Pages。

部署时通常需要配置：

• GitHub 仓库
• 构建命令，比如 npm run build
• 安装命令，比如 npm install
• 输出目录
• Supabase 相关环境变量

部署成功后，Vercel 会分配一个访问地址。你也可以后续绑定自己的域名。🎯

视频里的完整业务闭环 🔁

宠物领养 App 的闭环是这样的：

1. 管理员在后台录入新的宠物信息。
2. 用户在 App 端刷新后看到新宠物。
3. 用户查看详情并提交领养申请。
4. 后台收到申请并审批。
5. 审批通过后，用户收到消息通知。
6. 已被领养的宠物从可申请列表中移除，避免重复申请。

这个流程虽然不复杂，但已经包含了一个正式应用最重要的几个模块：用户、数据、后台、审批、通知、状态同步。👍

我自己的理解：Vibe Coding 不等于不用思考 📝

看完这个流程，我最大的感受是：

Vibe Coding 的价值不是让人完全不懂代码，而是把开发起步成本压低，让普通人更快验证想法。

但它依然需要你做判断：

• 需求有没有描述清楚？
• 页面之间的逻辑是否合理？
• 数据库表设计有没有遗漏？
• 环境变量有没有泄露风险？
• 注册、登录、审批这些流程有没有测完？
• 部署后真实用户访问会不会出问题？

AI 可以帮你生成很多东西，但产品是否靠谱，仍然要靠人来验收。🧐

适合照着做的小项目 💡

这套流程不只适合宠物领养 App，也可以换成很多自己的项目：

如果你是刚开始玩 AI 编程，我建议先做一个 小而完整 的项目，而不是一上来做“大而全”的平台。能闭环，比功能多更重要。🎯

最后总结 📌

这条视频给出的流程可以压缩成一句话：

Stitch 负责长相，AI Studio 负责交互，Antigravity 负责后端，Supabase 负责数据，GitHub 负责版本，Vercel 负责上线。

这已经是一条很清晰的 AI App 开发路线了。

对个人开发者来说，它最大的意义是：你可以用很低的成本，把一个想法快速做成能访问、能测试、能继续迭代的产品原型。🚀

不过真正上线前，还是建议补上这些检查：

• 🔐 登录和权限是否安全
• 🧪 核心流程是否完整测试
• 🗃️ 数据库表结构是否合理
• 🧯 错误提示是否友好
• 📱 手机端适配是否正常
• 🚀 部署环境变量是否配置正确
• 📜 API Key 是否没有暴露到前端

如果把这些补齐，Vibe Coding 就不只是“玩具 Demo”，而会更接近一个真正可持续迭代的小产品。✨