Cursor 2.0：Agent 驱动下的 Vibe Coding 新范式实战

🚀 Cursor 2.0：Agent 驱动下的 Vibe Coding 新范式实战

www.youtube.com/watch?v=H-w…

🎯 一、Cursor 2.0 的核心变革与项目目标

Cursor 2.0 带来了全新的 Agent 布局，这不仅是 UI 上的变化，更是对 Web Coding 思维的转变。之前的模式更多是代码优先，而新的布局则以 Agent 驱动为核心，将上下文切换转变为 Agent 管理。

1. Cursor 2.0 核心更新

• 全新 Agent 布局： 布局与传统的代码编辑器 IDE 截然不同。
• 多智能体支持： 可使用不同的模型运行同一条提示词。
• Composer 模型： 引入自家 Composer 模型，速度非常快，是 GPT-5.X 速度的 5 到 10 倍。
• 内置浏览器： 具备完整的 Chrome 浏览器功能，支持控制台和 DevTools。
• 代码审查： 全新的代码 Review 方式。

2. 项目目标

本次实战开发的是一个 AI 产品分析和解析工具：输入初创公司的产品落地文本，AI 将以风险投资机构的视角生成一份结构化分析报告，包含核心功能、产品卖点、市场评估和各维度评分。

💻 二、Cursor 2.0 全流程实战步骤分解

本次开发串联了 Cursor 2.0 更新的绝大多数功能，实现从前端 PRD 编写到后端 API 集成的完整开发流程。

第一步：项目初始化与布局切换

1. 初始化 Next.js 项目： 使用 npx create-next-app 命令，通过 Terminal（终端）初始化一个新的 Next.js 项目，并进入项目目录。
2. 切换 Agent 布局： 打开项目后，发现 Cursor 的布局已经改变。通过左上角切换或 Setting 中调整，将默认布局切换到 Agent 模式。新布局的最左边是 Agent 列表，中间是与 Agent 对话的对话框，最右边是文件。

第二步：项目启动与 Agent 管理

1. 创建“项目启动”Agent： 新开一个 Agent，命名为“项目启动”，专门用于管理项目的启动和编译。
2. 启动项目： 使用 Composer 模型，让“项目启动”Agent 运行项目。通过 Terminal 可看到项目已在本地（例如 localhost:3001）跑起来。

第三步：产品经理 Agent 编写需求文档 (PRD)

1. 创建“产品经理”Agent： 新开一个 Agent，将它当做产品经理对待。
2. 编写 PRD： 将需求描述输入，使用 GPT-5.X 等顶级模型（不建议使用 Composer 模型）来编写需求文档。
3. 确认与提交： 确认 PRD 文档内容，并使用 Git 提交本次修改，养成每次修改后提交代码的好习惯。

第四步：前端开发与 Composer 模型应用

1. 创建“前端开发”Agent： 新开一个 Agent，专门用于管理和开发前端项目。
2. 执行开发任务： 复制提示词，指令 Agent 根据 PRD 文件完成前端开发。
3. 使用 Composer 1： 采用 Composer 1 模型执行前端代码编写。该模型速度极快，完成基础前端开发大约只用了一分多钟。

第五步：内置浏览器调试与 UI 交互

1. 打开内置浏览器： 点击 Browser Tab 图标，输入 localhost:3001 访问项目。
2. 调试功能： 可使用快捷键 Command+Option+I 或点击图标打开 Togle Chrome DevTools，进行完整的控制台调试。
3. 元素选中交互： 使用选择按钮选中页面上的元素（例如“开始分析”按钮），然后通过对话框直接指令 AI 修改该元素（例如：“修改按钮的颜色背景为黑色”或“默认显示八行文本”），无需描述页面上的具体位置。

第六步：代码审查（Review）与 UI 优化

1. 使用 Review 页面： 点击 Review 页面，可以直接看到当前所有的代码修改文件及其修改内容。开发者可以通过滑动的方式进行代码审查。如果觉得没有问题，可以直接 Keep All 应用所有更改。
2. 多模型 UI 优化（非推荐）： 创建新的 Agent，输入 UI 优化需求（如希望使用 NEB 风格）。同时启用多个模型（GPT5.X, Cloud 4.5, Composer 1）来执行同一条提示词。
3. 应用修改： 多个模型完成后，需手动点击 Apply 按钮，才能应用对应的代码修改。但需注意，此功能目前不推荐使用，因为它可能导致冲突和 Token 浪费。最终选择最满意的 GPT5.X 样式并提交.

第七步：后端 API 集成与 Plan 模式应用

1. 获取 API Key： 从阿里云百炼等平台获取 API Key，并创建 .env.local 文件存储环境变。注意： Cursor 出于安全考虑，不会读取环境变量文件，开发者需在代码中确保 key 的调用正确。
2. Plan Mode 规划： 启用 Plan 模式，输入后端集成需求（使用 AI 模型对产品文案进行分析并返回结构化报告）。
3. 提供上下文： 向 AI 提供 Node.js 示例代码，作为如何调用阿里云百炼 API 的参考上下文，这对于 AI 理解如何使用 API 至关重要。
4. 回答 AI 提问： 在 Plan 过程中，如果 AI 提出问题（例如数据接口是一次性返回还是流式返回），必须认真回答以完善规划。
5. 执行计划： 规划完成后，可选择用顶级模型进行规划（Plan） ，然后使用 Composer 1 模型进行代码执行（Build） 。AI 自动引入 SDK，并编写后端接口代码，定义了专业的系统提示词（如“你是一个专业的风险投资分析师”）。
6. 最终调试与验证： 运行项目并测试。若出现 cannot resolve open AI 报错，可直接指令 Agent 在 Terminal 中执行 pnpm install 安装依赖。测试成功后，可在 Network 标签页查看 AI 返回的结构化分析报告。

🔑 总结与思维转变

Cursor 2.0 的最大变革在于其全新的 Agent 驱动布局，将开发过程由传统的“代码修改”转变为 “Agent 驱动” 的工作流。通过不同的 Agent（项目启动、产品经理、前端开发）来管理不同的任务和上下文，这使得 Vibe Coding 更加合理和高效。同时，Composer 1 的引入，使得基础的前端和执行任务的速度得到了极大的提升。