从需求到上线：AI 辅助全栈开发实战复盘

项目背景

2026 年 1 月，一个朋友找我帮忙：他经营一家小型教育机构，需要一个在线课程展示网站，可以展示课程、收集报名信息、展示学员评价。

预算：0（朋友嘛）。时间：一周。需求：专业、好看、能用。

我决定用这个机会做一次 AI 辅助全栈开发的完整实验。

技术栈选择

技术	用途
Next.js 15	全栈框架
TypeScript	类型安全
Tailwind CSS	样式
Supabase	数据库 + 认证
Vercel	部署

AI 工具：ChatGPT + Cursor + v0 + Claude Code

Day 1：需求分析 + 设计

用 ChatGPT 做需求分析

输入朋友的模糊需求，让 ChatGPT 输出结构化的 PRD（产品需求文档）。

用 v0 做 UI 设计

用 v0 生成了 5 个核心页面的 UI：首页、课程列表、课程详情、关于我们、联系我们。

一天完成了通常需要一周的设计工作。

Day 2-3：核心开发

用 Cursor 搭建项目

Composer 指令：
"创建一个教育机构网站，使用 Next.js 15 + Supabase。
包含课程展示、报名表单、学员评价功能。
数据从 Supabase 获取。"

Cursor 的 Composer 模式一次性生成了项目骨架、数据库 Schema、API 路由。

逐步完善功能

用 Cursor 的 Agent 模式逐个完善：

课程列表页的筛选和排序
报名表单的验证和提交
学员评价的展示
响应式适配

Day 4：数据库 + 后端

Supabase 配置

数据库设计是最考验"真实开发能力"的环节。我先让 ChatGPT 根据需求文档生成了初始的 SQL 建表语句，包括课程表、报名表、学员评价表。

但直接用 AI 生成的表结构有一个问题——它不了解具体的业务约束。比如课程有"人数上限"，报名表需要和课程表关联并检查是否满员。这些逻辑我需要手动补充。

API 对接

让 Cursor 生成 Supabase 客户端代码和数据获取逻辑。这里我遇到了一个典型的坑：Cursor 生成的代码默认没有做权限控制，任何人都可以直接读写数据库。我花了半小时在 Supabase 里配置了 Row Level Security（RLS）策略，确保只有管理员能增删改数据，普通用户只能读取公开信息。

提醒：AI 生成的后端代码一定要检查权限和安全性，这是 AI 最容易忽略的地方。

Day 5：优化 + SEO

用 Claude Code 做代码审查

> 请审查整个项目的代码质量，关注：
> 1. 安全隐患
> 2. 性能优化空间
> 3. TypeScript 类型完整性

Claude Code 发现了 3 个潜在问题：一个是图片没有做懒加载导致首屏加载慢，一个是表单提交没有做防抖（用户连续点击会重复提交），还有一个是某个接口返回了不必要的敏感字段。三个问题都被自动修复了。

这个体验让我意识到：AI 代码审查应该成为开发流程的标准环节，就像人工 Code Review 一样。

SEO 优化

用 Cursor 添加了 sitemap、Open Graph 标签、结构化数据。同时还做了以下优化：

所有页面添加了 meta description
图片都添加了 alt 属性
课程详情页用了 JSON-LD 结构化数据
配置了 robots.txt

Day 6：测试 + 部署

测试

用 Claude Code 自动生成了关键路径的测试用例，覆盖了课程列表加载、报名表单提交、搜索筛选等核心功能。虽然 AI 生成的测试不能覆盖所有边缘情况，但它帮我快速建立了一个基础的测试框架，之后有新功能就可以在上面扩展。

部署

推送到 GitHub，Vercel 自动部署。绑定自定义域名。Vercel 的部署体验确实一流——git push 之后大约 30 秒就能看到新版本上线。我还配置了预览部署，每个 PR 都会自动生成一个预览链接，方便朋友提前看效果。

Day 7：交付 + 内容填充

最后一天主要是"人力活"——帮朋友录入课程数据、上传课程封面图、调整文案细节。这些工作 AI 帮不了太多，因为涉及到真实的业务内容和朋友的个人偏好。

不过我还是用 ChatGPT 帮忙润色了课程描述的文案，效果比朋友自己写的好不少。

项目上线！ 朋友很满意，最重要的是整个项目没花一分钱（域名费除外）。

效率对比

环节	传统方式	AI 辅助
需求分析	2-3 天	2 小时
UI 设计	3-5 天	半天
前端开发	5-7 天	2 天
后端开发	3-5 天	1 天
测试部署	2-3 天	1 天
总计	15-23 天	7 天

效率提升约 3 倍。

踩过的坑

坑 1：AI 生成的代码不理解业务逻辑

AI 可以生成通用代码，但不了解你的具体业务。比如"报名人数限制"这种业务规则，需要你明确告诉 AI。更麻烦的是，AI 有时候会"自作聪明"地添加一些你没要求的功能，结果反而引入了 bug。

教训：给 AI 的需求描述要尽量具体和完整，不要假设它能"理解"你的意图。

坑 2：太依赖 AI 导致理解不深

有些代码是 AI 写的，我没有完全理解。后来需要修改时就卡住了。最典型的例子是 Supabase 的实时订阅功能——AI 帮我写了一段 WebSocket 连接的代码，当时能用就没细看。结果上线后出现了连接断开不重连的问题，我花了大半天才弄清楚代码逻辑并修复。

教训：每一段 AI 生成的代码，都要花时间理解。看不懂的就让 AI 解释，或者让它加注释。 这个时间投入是必要的，否则后面维护的时候会加倍偿还。

坑 3：样式不一致

用 v0 生成的 UI 和 Cursor 生成的组件风格不统一——按钮圆角不同、间距不一样、颜色有微妙偏差。这个问题我花了大半天手动调整。

教训：项目开始前就定好设计规范。创建一个统一的 Tailwind 主题配置，所有组件都引用同一套颜色、间距和字体变量。这样不管是 v0 还是 Cursor 生成的代码，只需要替换成你的变量就能保持一致。

坑 4：AI 的"幻觉"问题

Cursor 有时会引用不存在的库或 API。有一次它生成了一段调用 Supabase 方法的代码，但那个方法在当前版本已经不存在了。这是 AI 代码生成最危险的地方——代码看起来很合理，但实际上跑不通。

教训：不要盲目信任 AI 生成的代码，特别是涉及第三方库 API 的部分。一定要对照官方文档确认。

给想尝试 AI 辅助开发的人的建议

从小项目开始。不要一上来就用 AI 做核心业务系统。先做个人项目或帮朋友做网站，积累 AI 协作的经验
学会"分而治之"。不要让 AI 一次性生成整个项目，而是把需求拆成小块，一块一块地让 AI 处理
选对工具组合。我的经验是：ChatGPT 做规划和文案，v0 做 UI，Cursor 做编码，Claude Code 做审查和重构，各司其职
保持学习。AI 工具在快速进化，每个月的体验都不一样。关注工具更新，定期优化你的工作流

总结

AI 辅助开发不是"按一下按钮就完成"，更像是"一个超级实习生帮你做了 70% 的工作，你做剩下的 30%"。

但那 30% 才是最重要的：需求理解、架构决策、质量把控、用户体验。这些"软技能"在 AI 时代不但没有贬值，反而更加珍贵了——因为执行层面的工作越来越容易被 AI 替代，而判断力和审美是 AI 目前还无法替代的。

AI 让你更快，但不能让你更好。"更好"需要你自己的判断力和审美。