用 AI 从 0 做一个 SaaS：MVP 实战完整路径
- 知道一个最小可用 SaaS 由哪几块组成，不再被"技术选型"这道门槛卡死
- 学会用 AI 编程工具把 spec 变成能跑的脚手架，而不是从零开始硬敲
- 掌握"对 AI 提需求"的真实写法，能产出可部署代码而不只是思路
- 知道 MVP 阶段哪些东西绝对不能碰，砍掉哪些不影响验证
很多人想做一个 SaaS，脑子里有个想法，手里有 AI 工具，但就是迟迟开不了工。卡住的原因往往不是技术不够硬，而是不知道从哪一步开始——技术栈要选什么？先做后端还是前端？登录要怎么搞？支付要自己写吗？
其实有一条最省力的路。这篇把它拆开来说，带你从 idea 走到能给人用的 MVP。
至于 MVP 上线之后的增长、SEO、用户运营——那是后面 L7、L8 的内容，这里先不碰。
一个最小可用 SaaS 由哪几块组成
别被"做一个产品"吓到。抛掉所有多余的东西，一个能给人用的 SaaS 只需要这五块：
前端界面
↓ 请求
后端 API（含业务逻辑）
↓ 读写
数据库
↑
鉴权（谁能用、用多少）
↑
支付占位（不需要上线，但要留口）
注意支付这里写的是"占位"。MVP 阶段不需要真的接支付，你只要在关键位置留好钩子就够了——等你验证了有人想用，再花精力接。
这五块在 AI 时代有非常成熟的组合方案，不需要你从头造。
技术选型：给具体，但以你熟的为准
先说明：以下是一套经过验证的最小栈，不是唯一答案。如果你熟悉别的，AI 工具也能帮你搭，换一套就行。
推荐最小栈（适合从 0 开始）：
| 层 | 推荐选型 | 理由 |
|---|---|---|
| 前端 + 路由 | Next.js（App Router） | 前后端一体，部署方便，AI 训练数据多 |
| 后端 API | Next.js API Routes 或 Hono | 不需要单独维护一个服务 |
| 数据库 | Supabase（托管 PostgreSQL） | 有免费额度，自带 REST/SDK，省掉运维 |
| 鉴权 | Supabase Auth 或 NextAuth | 不要自己造，现成的方案成熟太多 |
| 部署 | Vercel | 和 Next.js 天然集成，推代码就自动部署 |
| 支付占位 | 先不接，按钮指向 mailto 或表单 | MVP 阶段验证需求比跑通支付更重要 |
如果你更熟悉 React + Express + MySQL 这套，或者 Vue + Fastify + PlanetScale，这些 AI 工具也都能驾驭，换掉没问题。以你熟的、AI 擅长的为准，不要为了用"最新"的而引入你完全不懂的黑盒。
关于数据库和后端如何与 AI 工具配合接入，这篇写得很具体：数据库+后端怎么接——Supabase/Serverless 实战。
一步步搭：每步怎么跟 AI 说
这是这篇最核心的部分。很多人对 AI 工具的印象是"能给建议"，但实际上，你提需求的方式决定了它给你的是"思路"还是"能跑的代码"。下面每一步都给出真实的提法。
用 Cursor 或 Claude Code 都可以，两者在这个流程里的用法基本一致。
第一步：写 spec（花 20 分钟，省掉 20 小时）
在动手之前，先把你要做什么写成一段话。不需要长，但要具体。
我要做一个「写作辅助 SaaS」，用户登录后可以：
1. 输入一段草稿，AI 帮他润色
2. 看历史润色记录
3. 每个账号每天有 10 次免费额度，超了提示升级
核心不需要：团队协作、自定义风格、API 开放
这段话就是你的 spec。它的作用是帮 AI 理解边界——什么要做，什么不做。没有这个，AI 会往"完整的企业级产品"方向走，生成一堆你不需要的代码。
第二步：脚手架
把 spec 交给 AI，让它搭骨架：
真实提法示例：
我要做一个 SaaS 产品，功能如下： [把你的 spec 贴进来] 请帮我用 Next.js（App Router）+ Supabase 搭一个最小可运行的项目脚手架： - 目录结构 - 必要的依赖（package.json） - Supabase 客户端初始化 - 一个 app/page.tsx 首页占位 - 一个 app/dashboard/page.tsx 登录后的主界面占位 不要加测试、不要加文档生成，只要能跑通的最小骨架。
注意"不要加测试、不要加文档生成"这种限制词——AI 如果没有约束，会默认帮你加很多你现在用不上的东西，反而增加理解负担。
跑通的标志：npm run dev 之后能在浏览器里看到两个页面不报错。
第三步：核心功能
脚手架跑通后，开始做你产品最核心的那一个功能。注意是一个，不是所有的。
以"AI 润色"功能为例：
真实提法示例：
在 app/dashboard/page.tsx 里，帮我做一个"文本润色"功能： - 一个文本框，用户粘贴草稿 - 一个"润色"按钮，点击后调用 /api/polish 接口 - 接口里调用 Anthropic API（claude-haiku-3 模型）， system prompt 是"你是一个文字润色助手，保留原意，让表达更流畅" - 返回结果显示在文本框下方 - 加一个 loading 状态，按钮点击后 disable，显示"润色中..." API Key 从环境变量 ANTHROPIC_API_KEY 读，不要硬编码。
这个提法的关键点：
- 指定文件路径，不然 AI 可能建一个新文件
- 说清楚接口名和参数，不然 AI 会自己命名，后面联调麻烦
- 环境变量的处理方式要说明，不然 AI 经常直接把 key 写在代码里
第四步：数据库接入
功能有了，要存数据。以"存润色历史"为例：
真实提法示例：
帮我在 Supabase 里建一个 polish_records 表： - id（uuid，主键，默认 gen_random_uuid()） - user_id（uuid，外键关联 auth.users） - original_text（text） - polished_text（text） - created_at（timestamptz，默认 now()） 给我两样东西： 1. 在 Supabase SQL Editor 里运行的建表 SQL 2. 在 /api/polish 接口里，成功润色后把记录插入这张表的代码 使用 Supabase 服务端 SDK（@supabase/supabase-js）， client 从 utils/supabase/server.ts 创建
Supabase 的 SQL Editor 是最直接操作数据库的方式，不需要你在本地装 PostgreSQL。生成的 SQL 直接粘贴过去跑就好。
第五步：登录
Supabase Auth 的 Email Magic Link（无密码登录）是 MVP 最快的选择，不需要处理密码哈希、找回密码之类的麻烦事：
真实提法示例：
帮我在 app/login/page.tsx 里做一个邮箱登录页： - 一个邮箱输入框 + "发送登录链接"按钮 - 用 Supabase Auth 的 signInWithOtp 方法发送 magic link - 发送成功后显示"登录链接已发送到你的邮箱，请查收" - 用户点击邮件里的链接后自动跳转到 /dashboard 保护 /dashboard 路由：未登录跳转到 /login， 用 middleware.ts 实现，不要在每个页面单独加判断。
中间件保护路由比在每个页面里单独判断干净得多，而且以后加新页面不会漏保护。
第六步：部署占位
到这里，你有了一个功能可以跑、数据能存、登录能用的 MVP。下一步是让别人也能访问。
Vercel + Netlify + Cloudflare 部署上线详细流程 这篇有完整步骤，这里不重复。
只强调一点：先部署，再优化。很多人想等产品"再完善一点"再部署，这个心态会无限延后上线时间。一个能用的 MVP 比一个完美但没上线的产品价值高得多。
也可以用 v0 快速出原型界面，它生成的 Next.js 组件可以直接拷到你的项目里用。
MVP 阶段砍什么
能做的功能太多，但 MVP 阶段最关键的决策是主动砍掉不必要的东西：
坚决不做的：
- 邮件通知系统（用 Supabase 自带的 auth 邮件够了）
- 管理后台（直接在 Supabase Dashboard 看数据）
- 多语言支持
- 完整的用户设置页（头像、昵称、密码修改）
- 自己写的支付系统（危险，留占位就够了）
MVP 阶段要保留的：
- 核心功能跑通（哪怕只有一个）
- 登录/注册
- 数据能存、能读
- 错误提示（至少让用户知道哪里出错了，别白屏）
- 能部署到外网访问
判断标准很简单：如果去掉这个功能，目标用户没法体验你产品的核心价值，就留；否则砍。
故障排查表
| 症状 | 可能原因 | 排查方向 |
|---|---|---|
| Supabase 接口 401 | anon key 用在了服务端，或 RLS 规则没配 |
服务端用 service_role key；检查 Supabase 里该表的 Row Level Security 设置 |
| 登录后跳转到 /login 死循环 | middleware 的 matcher 配置把 callback 路由也拦了 | 在 middleware 的 matcher 里排除 /auth/callback 路径 |
| AI 接口调用成功但前端一直 loading | API Route 返回了数据但没有正确 res.json() |
检查接口是否有 return NextResponse.json(...) 而不是直接 return |
| Vercel 部署后环境变量不生效 | 环境变量只在本地 .env.local 里，没有加到 Vercel 项目设置 |
进 Vercel Dashboard → Settings → Environment Variables 补上 |
| 数据库写入成功但查不到 | RLS 策略限制了读取权限 | Supabase 里检查对应表的 SELECT Policy，确认当前用户身份能命中 |
常见问题
Q：一定要用 Next.js 吗？我熟 Vue/Nuxt。
完全不用。用你熟悉的框架，AI 工具（Cursor / Claude Code）对主流框架的支持都很好。上面的流程换成 Nuxt + Supabase 逻辑一样，提法稍微改一下框架名称即可。
Q：不用 Supabase 行吗？我想自己部署 PostgreSQL。
可以，但 MVP 阶段不推荐。自己维护数据库会把你的时间吸走，而 Supabase 的免费额度对早期产品足够用了。等你有了稳定的付费用户，再考虑迁移也不迟。
Q：登录为什么用 Magic Link 而不是用户名密码？
Magic Link 不需要处理密码存储、哈希、找回密码这一套，实现成本低得多，用户也不用记密码。MVP 阶段能用就够了。如果后面发现用户强烈要求密码登录，再加上去两个小时的事。
Q：AI 生成的代码有时候跑不通，怎么办？
很正常。两个处理方式：一是把报错原文贴给它，不要只说"跑不通"，它需要看到具体错误；二是缩小范围，把问题拆成更小的步骤再问。大多数"AI 生成但跑不通"的问题，根源是需求描述不够具体，或者一次问了太多东西。
Q：这套流程适合独立开发者吗？还是需要团队？
就是为独立开发者设计的。一个人配合 AI 工具，走完这套流程到能用的 MVP，一周内是可以做到的。团队多了反而增加协调成本，MVP 阶段不需要。
下一步
这一节覆盖的是 idea → 能跑的 MVP 这段路。
MVP 做出来之后，你面对的问题会变：怎么让真实用户找到它？怎么转化？怎么定价？这些是 L7 上线推广和 L8 变现的内容，按体系走下去就到了。
如果你做的是一个有后台管理、数据可视化需求的 SaaS，下一篇 用 AI 做后台 Dashboard 会专门讲这块。
相关延伸：
👉 看看我们的 AI 编程实战体系课，或逛 AI 编程教程大全 把基本功打扎实。