用 AI 做全栈开发（尤其是用 Cursor、Windsurf 或 Bolt.new 这类工具），**开发逻辑和传统手写代码是完全相反的**。

传统开发通常是“自底向上”：先设计数据库表（DB） -> 写后端 API -> 最后画前端界面。

但在 AI / Vibe Coding 的时代，最爽、最高效的做法是**“自顶向下（视觉优先）”：先写带假数据的前端（UI/UX） -> 提取数据结构（DB） -> 连通后端（API）**。

为什么？因为 AI 需要“视觉反馈（Vibe）”来和你对齐，你也需要看到东西来指导 AI。如果你一开始就让 AI 写一堆抽象的数据库表和接口，一旦后面发现和页面需求对不上，AI 很容易在来回修改中“精神分裂（丢失上下文）”。

下面我为你梳理一套**被无数 AI 全栈极客验证过的“黄金开局与开发计划”**：

---

### 🌟 Phase 0：开局准备 —— “给 AI 洗脑”（至关重要）

不要一上来就让 AI 写代码，AI 最怕没有方向。开局的第一步是写一个 PRD.md（产品需求文档）或配置 .cursorrules，把它当作整个项目的“宪法”。

* 做法：新建一个空白项目，创建一个 README.md 或 project_plan.md，用大白话写下这几点：

1. 项目一句话介绍（例：一个赛博朋克风的待办事项全栈应用）

2. 核心功能列表（MVP 阶段只列 3 个最核心的功能，多余的坚决不要）

3. 技术栈（明确告诉 AI，如：Next.js App Router + TailwindCSS + Drizzle ORM + Supabase）

* AI 话术：*“读取 project_plan.md，记住项目的全局设定，在接下来的开发中，所有的代码生成都要遵循这里的技术栈和业务逻辑。明白请回复 OK。”*

---

### 🎨 Phase 1：前端优先，假数据起手（Vibe 阶段）

这是最享受的阶段。忘掉数据库，把所有的精力放在打造极致的 UI 和交互上。

* 开发顺序：

1. 让 AI 生成页面的基础骨架（导航栏、侧边栏、主区域）。

2. 让 AI 使用 Hardcoded（硬编码）的 Mock JSON 数据 来渲染页面。

3. 不断通过自然语言调整 Vibe：“按钮加个发光效果”、“列表为空时加一个好看的插画”、“暗黑模式颜色再深一点”。

* 为什么这么做？

一旦页面长成了你想要的样子，*你的假数据 JSON 其实就是完美的数据库字段！** 此时前端的数据消费需求已经彻底明确了。

---

### 🗄️ Phase 2：数据建模（让 AI 逆向生成数据库）

当你的页面用假数据跑得非常完美时，就可以顺水推舟做数据库了。

* 做法：把前端的假数据甩给 AI，让它帮你生成数据库 Schema。

* AI 话术：*“目前前端列表使用的是这段 mock 数据（附上 JSON）。请根据这个数据结构，帮我设计数据库。使用 Prisma (或 Drizzle) 生成 Schema 模型文件，要求包含必要的 id、created_at 字段，并帮我写好初始化的迁移脚本。”*

* 爽点：因为是根据前端 UI 逆向推导的，数据库字段会 100% 契合前端需求，几乎零浪费、零返工。

---

### ⚙️ Phase 3：打通任督二脉（后端逻辑与 API）

现在你有漂亮的前端和建好的数据库，只需要让 AI 充当“连接线”。

* 开发顺序：

1. 让 AI 写基础的 CRUD API（增删改查）。

2. 让 AI 把前端代码里的 Mock JSON 替换成 Fetch/Axios 请求真实 API 的代码。

3. 处理加载状态（Loading）和报错提醒（Toast）。

* AI 话术：*“帮我实现 app/api/todos/route.ts 这个接口，连接刚才建好的数据库。然后修改 TodoList.tsx 组件，移除里面的 mockData，改为调用这个真实接口，并在请求等待时加上骨架屏加载动画（Skeleton）。”*

---

### 🔒 Phase 4：加入复杂机制（鉴权、支付、部署）

新手用 AI 最大的坑，就是第一天就做登录注册！

一旦加上了登录（Auth），你的页面就被锁起来了，后续让 AI 帮你改 UI、测功能时，每次都要先登录，AI 也无法直接预览，体验极其拉胯。

* 原则：将 Auth（如 Clerk / NextAuth）、支付（Stripe）等**阻断性功能**放在项目的**最后一步**做。

* 做法：在开发前期，先在全局塞一个假的用户 ID const userId = 'test_user_01'；等核心功能全跑通了，再让 AI 接入真实的登录系统替换掉这个 ID。

---

### 💡 总结：给 AI 监工的 3 条“保命法则”

1. Git Commit 是你的“后悔药”：

AI 很容易在一个复杂的 Bug 里越改越乱（俗称“幻觉螺旋”）。**每完成一个小功能（甚至一个好看的按钮），就让 AI 帮你提交一次 Git Commit**。一旦 AI 把代码写崩了，不要跟它扯皮，直接 git reset --hard 回滚到上一步，重新换个方式 Prompt。

2. 限制 AI 的修改范围（收敛上下文）：

不要说“帮我修一下首页的 Bug”，AI 会扫描几百个文件然后乱改。要说：“在 Header.tsx 组件里，点击按钮没有弹出菜单，请只修改这一个文件。”

3. 永远不要一次发太多指令：

* ❌ 错误范例：“帮我写一个带数据库连通的商城首页，并且有购物车动画，顺便加上登录接口。”（AI 必懵，代码必烂）

* ✅ 正确范例：“第一步，先用 Tailwind 帮我画一个商城的商品卡片，用假数据，不管别的逻辑。”（跑通后再做下一步）

开局建议：现在，你可以选定一个你想做的项目，用 Cursor 或 Bolt.new 打开，新建一个 README.md，告诉 AI：**“我是产品经理，你是全栈工程师，我们现在要开发一个 [你的项目]，请用前端优先的思路，先帮我搭一个好看的空壳页面。”**