企业官网建设流程全解析

easy-vibe第一个SaaS项目实战：带登录、生成和计费的AI文案网站

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe

想做出自己的第一个SaaS 产品？easy-vibe 的第二阶段大作业，带你从零实战一个AI 文案网站：用户注册登录、AI 生成营销文案、Stripe 付费订阅、后台运营管理，一条完整的商业化链路全部跑通。🚀

这个项目不是"调一次模型出结果"的 Demo，而是一个带登录、生成、计费、后台的完整 SaaS 雏形。适合第一次做商业化网站的新手，跟着 PRD 一步步做，交付一个能演示、能上线的产品。

项目是什么：三套子系统，10 个核心页面

你要构建的是一个面向独立开发者和内容团队的AI 营销文案 SaaS，包含三个入口：

技术选型建议：Next.js前端 +Supabase（鉴权 + 数据库）+Stripe支付 + 第三方大模型 API 生成文案。

完整需求见课程自带的 PRD：PRD.md，它是本项目开发的"唯一事实来源"。

第一步：需求分析——先读 PRD，再动代码

课程强调一个原则：需求理解不清楚，是返工的最常见原因。

打开 PRD 后，先回答 5 个问题：

1. 系统有几个入口？各自覆盖哪些页面？
2. 每个页面的核心功能是什么？
3. 后端包含哪些模块和数据表？（profiles、generation_records、billing_records）
4. 套餐定价、支付流程、免费额度如何设计？
5. MVP 范围：第一版哪些做、哪些不做？

PRD 已给出 MVP 边界——第一版不做团队协作、多语言翻译、模板市场。记住：先保证"能跑通"，再去追求"做漂亮"。

第二步：AI 生成前端骨架，三套页面一次搭好

把提示词交给 AI，一次性生成三个入口的页面骨架：

请基于当前 PRD，帮我生成一个 AI 营销文案 SaaS 的前端骨架。分成 www（首页/定价/FAQ）、app（登录/注册/工作台/历史/套餐）、admin（首页/用户/记录/订单）三个入口，先生成页面结构和假数据，风格要像现代 SaaS，不像课堂 demo。

骨架搭好后，重点完善生成工作台（Dashboard）页面：

• 左侧表单：产品名、一句话介绍、目标用户、3 个卖点、投放渠道（官网/朋友圈/小红书/抖音/邮件）
• 右侧结果区：主标题、副标题、CTA、3 版短文案、长文案
• 交互要求：点击生成有 loading 状态、结果区有空状态、宽窄屏都能正常显示

第三步：接入 Supabase 登录与数据库

登录是整个 SaaS 的地基。提示词里直接让 AI "把我当成 0 基础"，完成 7 件事：

1. 项目接入 Supabase
2. 实现注册、登录、退出
3. 登录成功跳转/dashboard
4. 未登录访问受保护页面时自动跳转/login
5. 创建profiles表（email、role、plan 字段）
6. 注册成功后自动写入用户记录
7. 密钥不硬编码，Supabase 后台操作明确标注

这条链路可以直接复用课程《从数据库到 Supabase》的完整内容。

第四步：核心功能——文案生成并入库

这是产品的"心脏"。目标效果：

• 用户在工作台填表单，点击"生成文案"
• 后端/api/generations接收输入，调用大模型生成
• 输入和输出都写入generation_records表（渠道、语气、状态、时间戳）
• 用户下次进入可查看历史记录

体验细节同样重要：按钮 loading、生成失败的错误提示、无历史记录时的空状态。PRD 里给出了完整的接口草案（/api/auth、/api/generations、/api/billing、/api/admin四组接口），照着实现即可。

第五步：接入 Stripe 计费，跑通商业化闭环

支付链路的最小版本只需要 6 步：

1. /billing页面展示Free和Pro两个套餐
2. 用户点击升级后跳转 Stripe Checkout
3. 支付成功后返回网站
4. 支付结果写入billing_records表
5. 同步更新profile.plan字段
6. Free 用户每日限 3 次生成，Pro 不限

⚠️ 新手最容易踩的三个坑（来自课程《如何集成 Stripe 等收费系统》）：

• ❌价格不能由前端决定——前端传来的金额不可信，必须后端定价
• ❌不能只看 success 页面——真正让权限生效的是 Webhook
• ❌不能只依赖 Stripe 后台——自己的数据库必须保存支付状态

一句话记住：前端负责跳转，后端负责定价和确认。

第六步：管理后台 + 部署上线

后台只需 3 个 Tab：用户列表（email/plan/创建时间）、生成记录（用户/产品/渠道）、订阅状态（用户/套餐/支付状态），且仅限role = admin访问。

端到端自测两条链路：

• 注册 → 登录 → 生成文案 → 查看历史 → 升级套餐 ✅
• 管理员登录 → 查用户 → 查生成记录 → 查支付状态 ✅

最后部署到公网。如果需要在本地学习，可以克隆课程仓库：

git clone https://gitcode.com/GitHub_Trending/ea/easy-vibe

部署教程参考《发布你的产品原型》，支持 Zeabur、Vercel 等平台：

交付物清单：做完你就有了一份完整作品集

写在最后

这个项目教会你的不是某个框架，而是现代 SaaS 的完整主链路：登录、生成、数据库、支付、管理后台。把它做完，你的简历里就多了一个"可注册、可生成、可付费、可管理"的全栈作品。💪

课程完整入口：大作业 1：第一个 SaaS 全栈应用——文案生成网站

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe