夜雨聆风Vibe Coding 时代，写代码不再是必修课，描述需求才是。
SEE OPC|AI 实战手记
你脑子里那个憋了很久的App想法——可能是一个领养宠物的小工具、一个给社群用的活动签到系统，或者一个只服务于自己一个人的"今日心情记账本"。它一直没有落地，原因往往不是缺创意，而是"我不会写代码"。
过去这是一个真问题。但在2026年的今天，AI 已经把"写代码"这件事，从一项专业技能压缩成了一种沟通能力。我们正在从 Code 走向 Vibe Coding——你描述意图，AI 生成系统；你做产品总监，AI 做研发团队。
这篇文章，我会用一个完整的实战案例，带你走通这套流程：从一个"在线领养宠物的App"想法出发，使用 5 款完全免费的 AI 工具，从 UI 设计、前端交互、后端接口、数据库、版本管理到云端部署，全程几乎不写一行代码。整套流程跑下来不到一个下午，最终产出的是一个公开网址、任何人都能访问的真实产品。
⏱ 阅读建议 本文约 4500 字，建议先收藏。如果你打算照做，建议预留 2–3 小时实操，文中每一步都可以对照执行。
· · ·
一、工具全家桶：零成本的 AI 全栈链路
先把今天会用到的"五件套"摆出来。这套组合不是我拍脑袋拼的，而是反复对比测试后，目前个人开发者免费方案中体验最完整、衔接最顺畅的一条路径：
1.Google Stitch —— 用一句话生成 App 的 UI 设计稿，支持 Gemini 3 模型，每日有可观的免费积分。
2.Google AI Studio —— 把静态设计稿转换成"能点能跳"的前端交互代码。
3.Antigravity —— 根据前端代码反向生成后端接口、业务逻辑与数据库结构。
4.GitHub —— 给项目做版本管理，全过程可以让 AI 教你执行命令。
5.Vercel —— 把代码一键部署到云端，分配公开网址，自带 HTTPS。
数据存储部分，我们再额外用一个 Supabase——一个免费的在线 PostgreSQL 数据库。它不算"主角"，但是把整条链路真正打通的关键齿轮。
关于"免费" 上述工具都提供了对个人开发者非常友好的免费额度。本文走通的完整 Demo 全程没有产生任何费用。当你的产品真正跑起来、需要更高吞吐时，再考虑付费升级也来得及。
· · ·
二、Step 1｜Stitch：用一句话"画"出整个 App
打开 Google Stitch，选择"移动端 App"，模型切到最新的 Gemini 3。
我在输入框里只写了一句话：
Prompt "我想做一个在线领养宠物的 App。"
Stitch 直接生成了 5 个核心页面：欢迎页、宠物列表、宠物详情、领养申请、个人中心，并且自动填充了一套占位数据。注意，这一步不是"模板"，而是基于你这一句描述完全推理出来的。
把界面整体改成中文
默认生成的是英文版。我全选所有页面，告诉 Stitch：
Prompt "把所有文字改成简体中文，字体使用思源黑体。"
它会立即生成一套中文 UI。把原来的英文版本删掉，只保留中文版即可。
精修：用 Annotate 做局部调整
如果对某个细节不满意，不需要重新生成整套页面。Stitch 自带的 Annotate（标注编辑）功能，可以让你框选页面上任意一块区域，单独下达指令。
举例：原本的列表里有"猫、狗、兔子、鸟、鱼"五个分类，我只想保留"猫"和"狗"。直接框选分类区域，输入"只保留猫和狗，其它分类删除"，几秒钟内 Stitch 就只改这一处，其它部分原样不动。
你还可以：
•一键把主题色改成橙黄色，让品牌调性更暖；
•一次生成多个设计变体，并排比较风格；
•打开"热度预测图"，看哪些区域最容易吸引用户视线——这是过去只在专业 UX 工具里才有的能力。
设计定稿后，你既可以导出为代码，也可以直接复制粘贴到 Figma 里继续微调。如果你团队里有专业设计师，这一步反而成了你和设计师协作的"沟通底稿"。
· · ·
三、Step 2｜AI Studio：让设计"动起来"
UI 有了，但此刻它只是几张静态图。点击宠物卡片不会跳转，点"提交申请"不会有反馈——它还不是一个"应用"。
把它变成可交互前端的关键，是 Google AI Studio。
回到 Stitch，全选所有页面，点击 Export → Build with AI Studio。Stitch 会把设计稿和对应的 HTML 一并打包推送到 AI Studio。AI Studio 接收后，会自动生成一个跑得通的前端工程：点击列表跳详情页、表单可以填写、页面间有完整的导航逻辑。
用对话调试细节
第一次跑下来，难免有些细节不到位。比如某个按钮点了没反应、缺一个"下一步"、文案太长溢出……不要慌，全部交给对话：
•"详情页底部的「立即领养」按钮没有响应，请补上跳转到领养申请页的逻辑。"
•"把分类筛选改成横向滚动条样式，去掉兔子分类。"
•"地图模式下只显示城市级别，不要显示街道。"
如果指令需要更精准，AI Studio 提供了"画笔圈选"功能：你直接在画面上圈住要改的元素，再描述要怎么改。这种交互方式比一连串文字描述要清晰得多——尤其是涉及视觉布局的时候。
几轮对话之后，你就拥有了一个体验流畅的前端 App。但点击 Code 面板查看源码你会发现：所有数据其实还是写死在前端代码里的。点击"提交申请"看似有反馈，其实根本没存到任何地方。
下一步，我们让它"活起来"。
· · ·
四、Step 3｜Antigravity：自动配齐后端与数据库
一个真正的应用，必须有"后端 + 数据库"这两条腿。这通常是非技术背景创业者的最大门槛——但 Antigravity 就是为这一步而生的。
把上一步从 AI Studio 下载下来的前端代码导入 Antigravity，然后给它一段需求：
Prompt "分析这段前端代码，生成对应的后端服务，实现前后端一体的完整 App。数据存储使用 Supabase 在线数据库。"
Antigravity 不会立刻动手，而是先给你一份执行计划——技术选型、数据库表设计、需要哪些 API 接口、文件结构是什么样的。这份计划是它的"思考过程"，也是你做最后把关的入口：你可以追加要求，比如"加一个收藏功能"、"用户注册需要邮箱验证"，让它先把方案修齐。
方案 OK 之后点执行，它会一次性生成完整的项目代码：前端、后端、配置文件、数据库建表 SQL、本地启动说明，全套到位。
配上 Supabase 数据库
这一步是最容易劝退新手的环节，但实际上比想象中简单：
1.到 Supabase 注册账号，新建一个项目（免费）；
2.在项目设置里复制数据库连接 URL 和 API Key，填入项目 .env 环境变量；
3.打开 Supabase 自带的 SQL Editor，把 Antigravity 生成的建表 SQL 整段粘贴进去执行；
4.一切顺利的话，你会看到 pets、adoptions、users 等表自动建好，甚至预填了几条测试数据。
最后在终端跑一行 npm run dev，本地服务就起来了。打开浏览器，从注册、登录、浏览宠物到提交领养申请，整套核心功能你都能真实跑通。提交的申请会落到数据库里，状态是 pending；如果你设了通知逻辑，消息也会自动触发。
到这一步，前后端打通的 App 已经成型——只是它还只能在你自己的电脑上跑。
· · ·
五、Step 4｜GitHub：让 AI 顺便教你做版本管理
把代码推到 GitHub 有两个目的：
•版本管理：每一次改动都可追溯、可回滚；
•为部署做准备：Vercel 是直接读 GitHub 仓库部署的。
如果你熟悉 git，三句命令——git init、git commit -m "initial"、git push——就能搞定。
如果你完全不熟悉也没关系。把"我要把这个项目推到 GitHub，请告诉我具体要执行哪些命令"丢给 Antigravity 或者任何 AI 助手，它会一步步写出来；你只需要复制到终端粘贴执行。在 GitHub 上手动建好仓库后，把仓库的 SSH 地址再发给 AI，它会帮你完成 remote 关联和首次推送。
顺便学点东西 整个过程里，你不只是在"完成任务"，也在被动地学会 git 的基本工作流。这是 AI 助手相对于"代写代码"更长期的价值——它在每一次具体协作里悄悄把你培养成一个能独立做事的人。
· · ·
六、Step 5｜Vercel：一键上线，全世界都能访问
最后一步，让你的 App 走出本地。
登录 Vercel，点 Import Project，选刚刚推到 GitHub 的那个仓库。Vercel 会自动识别项目类型，绝大多数情况下保持默认即可，只需确认几个关键参数：
•Build Command：npm run build
•Output Directory：dist
•Install Command：npm install
最后一步——也是新手最容易忽略的一步——把之前在本地 .env 里配置的 Supabase 数据库连接参数，作为环境变量原样填到 Vercel 的 Environment Variables 里。否则部署出来的 App 会因为连不上数据库而白屏。
点 Deploy，几分钟后 Vercel 会给你一个公开的 .vercel.app 网址。打开它，注册一个账号，浏览宠物列表，提交一份领养申请——整个流程会和你本地完全一致。
如果你愿意，还可以绑定自己的域名。一个真正的"线上产品"，就这样诞生了。
· · ·
七、进阶｜管理后台，也交给 AI
一个真正能跑起来的产品，仅有用户端是不够的——你还需要一个管理后台，用来录入宠物信息、审批领养申请、查看运营数据。
好消息是：复用同一套流程就能搞定。
回到 Antigravity，告诉它"基于现有数据库结构，再生成一个管理后台"，它会输出一套完整的页面：仪表盘、宠物列表与编辑、领养审批流、用户管理。这个后台你甚至可以选择"只在自己电脑上运行"，不部署到公网，安全性反而更好。
到这里，你已经搭出了一个"前台 + 后台 + 数据库"完整闭环的产品，技术栈和小型 SaaS 创业公司在用的没有本质差别。
· · ·
八、走完这一遍，你的角色到底是什么？
如果让我用一句话总结这次实操的体感：
关键洞察 你不是在"用 AI 写代码"，你是在"用 AI 做产品"。你的角色是产品导演——负责描述需求、判断方向、把关质量；具体的编码、配置、部署，全部由 AI 协同完成。
过去要打造一个 MVP（最小可用产品），一个非技术创始人通常要花费：
•2 周找设计师；
•4–8 周找前端、后端工程师；
•1–2 周做联调、上线；
•初期至少十几万的人力成本。
现在，这件事被压缩成了一个两小时左右的对话。
这并不意味着工程师不重要——恰恰相反，复杂系统的稳定性、性能、安全性，仍然需要专业团队。但对于"先把想法跑通、看看市场反应"这件事，AI 已经把门槛降到了几乎为零。
· · ·
九、免费，并不意味着简陋
回顾这套流程，我认为它真正的价值有三层：
1. 极低的认知门槛
全程通过自然语言交互，不需要懂编程语言、不需要理解框架原理。它真正做到了"会描述需求 = 会做产品"。
2. 惊人的迭代效率
从一个想法到一个能上线的产品，过去需要数周，现在以小时为单位。这意味着你可以同时尝试 5 个 idea，找到最有反馈的那个再深做。试错成本，决定了创新密度。
3. 完全免费的工具链
Stitch 每日 400 积分、Supabase 免费数据库、Vercel 免费部署额度——对于个人开发者和早期创业者，这套组合的免费额度足以支撑你跑通验证、积累第一批用户。
AI 正在重塑"创造"这件事本身。过去能不能写代码，决定了你能不能把想法做出来；现在能不能清楚表达自己的想法，才是分水岭。
我们这一代人，正站在这场变化的最前沿。
如果你看完这篇文章，心里冒出过哪怕一个"我也想试试看"的念头，那就别等了。打开 Stitch，从一句话开始，跑一遍这五个步骤。你会发现：从想法到产品之间，原来真的只隔着一个行动。
· · ·
如果这篇文章对你有启发，欢迎点赞、转发给同样有创意的朋友。
如果你已经动手做了自己的第一个 Vibe Coding 项目，欢迎在评论区贴出你的链接——我会挑选其中有意思的项目，在下一期文章里专题分享，也有机会入选AI产品访谈录制。
我们下一篇见。
—— SEE OPC · AI 实战手记
聚焦科技、资本与共创精神，记录这个时代的真实创造者。
报名访谈共创：这不是一次传统的“采访”，我更希望它是一次同行间的切磋。
也欢迎报名线下产品demo灵感分享沙龙：
