上篇文章我们讲了 Vibe Coding 是什么、为什么它能降低编程门槛。今天我们讲实战——用 Cursor + Claude Code 两天搭一个可上线运行的 SaaS 产品。

为什么是 SaaS?因为 SaaS 是 Vibe Coding 最合适的载体:

  • 边界清晰(用户、订阅、付费、续费这些都有成熟的模式)
  • 技术栈成熟(前后端 + 支付 + 部署)
  • 用 Vibe Coding 做出来后,马上能上线给真实用户用,验证”做出来”和”做好用”两个维度

今天我们从零搭一个”AI 周报生成器”——用户输入几个关键词,系统自动生成一份结构化的周报。这是个真实的痛点(很多人每周为写周报头疼),也能演示 Vibe Coding 全流程。

一、项目设定:从需求到代码只用一句话

传统开发,从需求到代码要 3 周:

  • PM 写需求 1 周
  • 设计画图 1 周
  • 开发实现 2-3 周
  • 测试上线 1 周

Vibe Coding 把这个流程压到 2 天:你只需要告诉 AI 你要什么,AI 直接生成代码。

我们这个项目:

  • 产品名:WeekNote(取个简单好记的名字)
  • 核心功能:用户输入”这周做了 X、Y、Z 三件事”,系统生成一份结构化周报
  • 用户群:大厂员工(他们周报义务重)、自由职业者(给客户发周报)
  • 付费模式:基础功能免费,Pro 月费 ¥29(无限次生成、可导出 PDF、可自定义模板)
  • 技术栈:Next.js + Supabase + Stripe + Vercel(全 Serverless,免运维)

整个项目只用这些技术,别引入额外复杂度。Vibe Coding 的精髓是”用最小技术栈,做最大价值”。

二、准备工作:装对工具是成功的一半

Vibe Coding 不是”用 AI 随便写”,而是”用对工具 + 给对指令”。先装这 4 个:

Cursor(主战场)

从 [cursor.com](https://cursor.com) 下载,装好后用邮箱登录。Pro 试用 14 天,够这个项目用完。

Cursor 里选 Claude 4.5 Sonnet 或 GPT-5 作为默认模型——这两个是 2026 年 Vibe Coding 最强的搭档。

Claude Code(辅助)

Cursor 在 IDE 里玩,Claude Code 在 Terminal 里玩。两者配合:

  • Cursor 用来”看效果改 UI”
  • Claude Code 用来”跑命令、查 git、写脚本”

从 [claude.com/code](https://claude.com/code) 装 Claude Code CLI。

Supabase(数据库 + 鉴权)

Supabase 是 Postgres 即服务,自带用户登录、API、文件存储。从 [supabase.com](https://supabase.com) 注册免费账号,新建一个项目,记下:

  • Project URL: https://xxx.supabase.co
  • Anon Key: eyJh...(长字符串)

这两个后面代码会用到。

Stripe(支付)

从 [stripe.com](https://stripe.com) 注册账号,激活测试模式。装 Stripe CLI(可选,本地测试用),记下:

  • Publishable key: pk_test_...
  • Secret key: sk_test_...

测试时这两个都是 fake 的,但流程跟生产一样。

四个工具就位,就可以开干了。

三、Day 1 上午:搭后端骨架

打开 Cursor,新建文件夹 weeknote,Cursor 打开它。按 Cmd I 进入 Agent 模式,输入第一句话:

帮我用 Next.js 14 App Router + TypeScript + Tailwind CSS 初始化一个项目,要求:
1. 项目名叫 weeknote
2. 用 pnpm 作为包管理器
3. 集成 Supabase 鉴权(用 @supabase/ssr)
4. 目录结构按 feature 划分,不要按文件类型
5. 加 .env.example,包含 NEXT_PUBLIC_SUPABASE_URL 和 NEXT_PUBLIC_SUPABASE_ANON_KEY
6. 加 .gitignore 涵盖 Next.js + Supabase + Node.js 标准规则
7. 跑起来能看见 "WeekNote" 首页

Agent 会一次性创建:

  • 项目骨架(package.json + tsconfig.json + next.config.js)
  • 目录结构(src/app, src/features, src/lib)
  • Supabase 集成代码(supabase client + middleware)
  • 环境变量示例
  • 首页 placeholder

确认能跑起来:pnpm dev,浏览器访问 localhost:3000,看见 WeekNote 字样。这一步大概 10 分钟。

接下来加核心功能。告诉 Agent:

加一个 /weekly-report 路由,功能:
– 用户登录后能访问
– 表单:输入 "本周做了 X、Y、Z 三件事"(用 textarea)
– 提交后调用 LLM API 生成结构化周报
– 输出分 4 段:本周成果、关键数据、下周计划、需要支持
– 周报保存到 supabase 的 weekly_reports 表
– 加 RLS 策略,确保用户只能看自己的周报
– 显示历史周报列表

Agent 会:

  • 创建 supabase migration(weekly_reports 表 + RLS)
  • 写 API route(/api/generate-report)
  • 写 LLM 调用逻辑(用 anthropic sdk)
  • 写周报列表组件

pnpm dev 跑起来,登录后能看到表单,提交后能生成周报。

这一步大概 20-30 分钟,但要反复迭代——AI 第一版的 prompt 不一定准,你要:

  • 让 Agent 改 prompt(“把输出格式改成更紧凑”)
  • 让 Agent 改 UI(“按钮换成主色突出”)
  • 让 Agent 修 bug(“点击提交后页面没刷新”)

每一轮迭代大概 5-10 分钟。

四、Day 1 下午:搭前端 + Stripe 支付

上午已经把核心功能跑通了。下午把前端体验做好,接入支付。

先做 UI 优化。

告诉 Agent:

优化 /weekly-report 页面:
1. 顶部 hero:大字标题"30 秒写完周报",副标题"输入关键词,AI 生成"
2. 表单区:大号 textarea,有 placeholder "本周我:做了 XX / 解决了 XX / 学到 XX"
3. 生成结果区:左输入右输出,响应式布局
4. 历史列表:卡片式,每条显示日期 + 摘要
5. 加 loading 状态、骨架屏、错误提示
6. 用 shadcn/ui 组件库,主题色用 #6366f1 (indigo)

Agent 会:

  • 重写页面布局
  • 安装 shadcn/ui(pnpm dlx shadcn-ui@latest init)
  • 重构组件(按钮、表单、卡片)
  • 加响应式(手机/电脑都好看)

这一步大概 30-40 分钟。AI 写的 UI 经常”土”,你可能要让它改好几轮颜色、间距、字体。

然后接入 Stripe。

告诉 Agent:

集成 Stripe 订阅:
1. 添加 "升级 Pro" 按钮(头部导航)
2. 写一个 /api/checkout route,创建 Stripe Checkout Session
3. 写一个 /api/webhook/stripe route,处理 Stripe webhook
4. 订阅成功后,把用户的 pro 字段在 supabase 设为 true
5. 写一个 /pricing 页面,显示基础版 vs Pro 的差异
6. 测试时用 Stripe CLI 的 stripe listen –forward-to localhost:3000/api/webhook/stripe
7. 真实部署时,把 webhook URL 改成 Vercel 域名

Agent 会:

  • 安装 Stripe SDK
  • 写 checkout route(createCheckoutSession)
  • 写 webhook route(handleSubscriptionChange)
  • 写 pricing 页面
  • 加 RLS 限制(pro 用户才能用某些 API)

这一步大概 30-40 分钟。Stripe 集成里”webhook 签名验证”经常出错,要反复调试。

到 Day 1 结束,你的产品应该有:

  • 完整的注册/登录
  • 周报生成 + 历史
  • 订阅页面 + webhook

这是个真正能用的 SaaS 雏形。

上线后第一周该做什么

产品上线不是终点,是真正起点。Vibe Coding 帮你越过”可制造产品”门槛,但产品上线后的第一周必须做的事:

  • 第 1 天:记录第一个 bug。用户最常用的 vs 你设计的场景几乎一定不同,要看”点过 3 次以上还是失败的”事件
  • 第 2 天:读前 10 个用户的完整行为日志。每个人都看,用铅笔记录他们”误以为你在想什么”的地方
  • 第 3-5 天:收集 3 个付费用户做 1v1 访谈。问 3 个问题:1) 你上周实际使用频率 2) 还没解决你哪些需求 3) 你愿意付多少
  • 第 6-7 天:决定下一版功能。拒绝”什么都加”的诱惑,专注做 1 个用户最多提出的需求

Vibe Coding 弄起来的产品,不能依赖 Vibe Coding 思维运营。用户访谈、增长实验、单价优化是一套独立的技能,但学起来比写代码快得多。

五、Day 2:打磨细节 + Vercel 部署

Day 2 上午花 3 小时打磨细节,下午花 1 小时上线。

上午的打磨项:

告诉 Agent:

打磨这块:
1. 加 SEO:
– 每个页面有合理的 title + meta description
– 加 /sitemap.xml 和 /robots.txt
– 首页 H1 要包含核心关键词
2. 加分析:
– 集成 Plausible 或 Google Analytics
– 跟踪关键事件:signup / generate_report / upgrade
3. 加错误监控:
– 集成 Sentry
– 关键 API 报错自动记录
4. 加用户反馈:
– 周报生成页底部加一个 "有用吗?👍 👎" 按钮
– 反馈数据写到 feedback 表
5. 加邮件通知:
– 用户订阅成功时发欢迎邮件
– 用 Resend(简单)

Agent 会并行处理这些,每一项大概 10-15 分钟。

下午:部署到 Vercel。

告诉 Agent:

帮我部署到 Vercel:
1. 把代码 push 到 GitHub
2. 在 Vercel 导入这个 GitHub 仓库
3. 配置环境变量(从 .env.example 复制)
4. 配置 supabase migrations 在 build 时自动跑
5. 配置 custom domain(可选)
6. 部署完输出 production URL

Agent 会引导你一步步完成部署。Vibe Coding 的好处:你不需要懂 Vercel 配置细节,Agent 帮你搞定。

部署完,你的产品就真正”上线”了——任何人都能访问,能用,能付钱。

六、Day 2 下午验收:测试 + 真实用户验证

上线后,做几件事验证产品真的能用:

内部测试

  • 用真实账号走一遍完整流程(注册 → 生成 → 升级)
  • 测试各种边界情况(空输入、特殊字符、超长文本)
  • 用 Lighthouse 测试性能(目标:90+ 分数)
  • 用 PageSpeed Insights 测试加载速度

小规模用户测试

找一个朋友试用,让他随便点,记录:

  • 哪里卡住了
  • 哪里感觉”不自然”
  • 他觉得”还需要什么功能”

这些反馈比你自己测有用 10 倍。

上线数据监控

Vercel 自带分析(请求数、错误率),Supabase 自带监控(数据库查询)。配置告警:

  • API 错误率 > 5% → 告警
  • 数据库查询超时 → 告警
  • Stripe webhook 失败 → 告警

到 Day 2 结束,你已经有了一个:

  • 真实的 SaaS 产品(不是 demo)
  • 用户能注册登录
  • 核心功能(AI 周报)能跑
  • 付费流程跑通(Stripe)
  • SEO + 分析 + 监控到位

这在传统开发需要 4-6 周,Vibe Coding 只用 2 天。

七、进阶优化:把 SaaS 变成真正能赚钱的产品

跑通 2 天 demo 后,接下来怎么优化?下面 5 个方向最值得做。

优化 1:加 AI 周报的 prompt 优化

当前 LLM 生成的周报”质量一般”。你可以:

  • 收集 100 篇高质量周报,让 Agent 分析共同模式
  • 优化 prompt,加入”避免口水话””突出数字””用动词开头”等指令
  • 引入 few-shot examples,让 LLM 学习”好周报长什么样”
  • 加 temperature=0,稳定输出

优化 2:加用户引导(Onboarding)

新用户进来不知道干嘛,流失率高。加一个 3 步引导:

  • Step 1:介绍核心价值(“30 秒写完周报”)
  • Step 2:立即试用(预填示例,让用户一键体验)
  • Step 3:引导升级 Pro(列出 Pro 权益)

优化后,新用户转化率能提升 30%+。

优化 3:加邮件营销

大部分 SaaS 70% 收入来自邮件:

  • 注册后 7 天没生成周报 → 发邮件”你的第一份周报”
  • 用了 5 次免费额度 → 发邮件”升级 Pro 无限用”
  • 月底 → 发邮件”本月你写了 X 份周报,继续加油”

这是周报类 SaaS 的核心增长引擎。

优化 4:加 API 文档

如果产品增长,会有开发者想基于你的 AI 周报 API 做集成。写一份简单的 API 文档:

  • 端点说明
  • 请求/响应示例
  • 认证机制
  • 错误码

这部分不难,但 90% 早期 SaaS 都不会做,做了就是差异化。

优化 5:加监控 + 自动化

业务跑到几百用户后,人工盯不过来:

  • 错误率监控(Sentry)
  • 性能监控(Vercel Analytics)
  • 业务监控(Supabase 视图)
  • 财务监控(Stripe dashboard)
  • 用户行为监控(Plausible + 自定义事件)

让所有监控都汇总到一个 Slack channel,有异常立即告警。

八、踩坑记录:Vibe Coding 两天最容易遇到的 5 个坑

坑 1:Agent 写的代码有 bug,但你不懂怎么看

症状:点提交按钮页面不动,但没有任何报错。

诊断:用浏览器开发者工具 Network 面板,看 API 请求是不是返回 500。

修复:把报错信息(或者 Network 截图)丢回给 Agent,让它自己改。”这段代码点击后没反应,Network 里看到 /api/generate 返回 500,报错是 [错误信息]”

坑 2:Auth 流程跟 UI 串了

症状:登录后,某些页面突然报错”User not found”。

修复:Auth 流程里有”server side”和”client side”两套,中间状态丢失很常见。让 Agent 加一个统一的 auth hook,所有需要 auth 的页面都用它。

坑 3:Stripe webhook 测试卡住

症状:本地 webhook 一直不触发。

修复:需要用 Stripe CLI 的 stripe listen --forward-to localhost:3000/api/webhook/stripe。这个步骤很多人漏,卡半天。

坑 4:LLM 输出不稳定

症状:同样输入,周报风格每次不一样。

修复:

  • temperature=0
  • prompt 里加”请用稳定一致的格式”
  • 收集失败 case,优化 prompt

坑 5:部署后页面 404

症状:本地跑得通,部署到 Vercel 404。

修复:Next.js App Router 的目录结构敏感,文件名要 app/page.tsx 这种格式。让 Agent 重新检查文件结构和 Next.js 文档。

这些坑都是常见的,不要慌,大部分问一下 Agent 就能解决。

九、成本计算:这个 SaaS 一个月能赚钱吗?

Vibe Coding 搭出来不难,真正难的是可持续运营。下面算一笔账。

月成本估算

  • Vercel:免费版够小项目;有流量后 Pro $20/月
  • Supabase:免费版够前 100 用户;Pro $25/月
  • OpenAI API(embedding + LLM):$0.10 / 1000 次生成,假设 1000 用户人均 30 次 → ~$300/月
  • Anthropic Claude API:~$50/月
  • Stripe 费用:每笔交易 2.9% + $0.30
  • 域名:$15/年
  • 邮件(Resend):免费版够用

总成本:第一年约 $50-100/月 + 用户越多成本越高

月收入估算

假设:

  • 1000 注册用户(3 个月可达)
  • 5% 付费转化率 → 50 Pro 用户
  • Pro 定价 ¥29/月 → $4/月
  • 毛利率 80%(考虑 Stripe 抽成)

月收入:50 × ¥29 = ¥1450(约 $200)
月成本:~$100-300(随用户增长)
净利:盈亏平衡到微利

1000 用户是个不小门槛,但 Vibe Coding 帮你省了开发成本(不需要雇工程师),所以前 6 个月你只需要专注”获客”,不需要花钱雇人。

到 5000 用户时,月收入能到 ¥7250,扣除成本净利 ~¥5000。到这个体量,你可以开始雇一个兼职帮你做运营了。

这就是 Vibe Coding 给独立开发者的机会——以前需要融几百万才能做 SaaS,现在几千块 + 2 天时间就能起步。

十、下一步

方向 1:继续打磨当前产品

你现在有一个跑得起来的 SaaS。继续打磨 1-2 个月,加更多功能,优化转化率,提升用户体验。这种”渐进式优化”是早期 SaaS 的核心。

方向 2:复制这种模式做新 SaaS

Vibe Coding 最强的优势是”快速试错”。你可以:

  • 一个月做一个新 SaaS
  • 上线后看数据
  • 不行就换下一个
  • 一个跑通了,继续优化

这就是”MicroSaaS”模式——用 Vibe Coding 做小型、专注、可付费的产品。

方向 3:加上 AI 加持

现在的 AI 周报生成器是基础款。下一步可以:

  • 让 AI 学习你的风格,生成更个性化的周报
  • 加 AI 追问(“你本周最有成就感的事是?”)让生成更精准
  • 加 AI 对周报的洞察(“你本周的关键词是效率提升,继续保持”)

这些差异化功能,让普通 SaaS 升维成”AI Native SaaS”。

方向 4:做 AI Agent 工具集

最近半年,Cursor / Claude Code 等 Vibe Coding 工具自身也在迭代。你可以基于它们搭:

  • 团队内部的 Vibe Coding 工具集(Code Review Agent、测试生成 Agent)
  • 用 Cursor SDK 构建你的 IDE 插件
  • 教其他人学 Vibe Coding(出教程、做培训)

这都是从”Vibe Coding 实战”延伸出来的更大机会。

推荐学习路径

  • 想搭自己的 SaaS:复制本文代码模式,2 天起步
  • 想优化当前 RAG/Agent 系统:看 MCP 实战系列
  • 想理解 Vibe Coding 底层:看 AI Agent 系列

最后一句话:Vibe Coding 不是”编程变简单了”,而是”造一个产品变简单了”。以前需要一个团队 3 个月做的事,现在 1 个人 2 天能搞定。这种变革,把”产品创造”的门槛压到 0——你唯一需要的,是想到一个好想法,然后动手做。

当你看到自己的产品被真实用户使用、为真实问题解决价值时,那种成就感会远远超出”会写代码”。这就是 Vibe Coding 给 2026 年每一个想动手做产品的人的礼物。

2 天前的你还在纠结”要不要开始做”,2 天后你已经有了个跑在公网的 SaaS。下一步,只是继续优化、继续想下一个 idea。这种循环,就是 Vibe Coding 时代独立开发者的常态。

(综合 Next.js 官方文档、Supabase 实战指南、Stripe 集成文档、Vibe Coding 社区案例整理)