skip to content
仙人掌主题

Cursor2.0 Agent大更新（加更）

1. 课程说明

Hello，本期教程是我们Cursor基础的加更课程。Cursor 2.0更新了很多东西，包括全新的Agent的一个布局，这个和之前的传统的代码编辑器IDE的布局会很不一样，甚至会带来Vibe Coding的思维的转变。

同时Cursor2.0也支持了多智能体，你可以使用不同的模型来运行同一条提示词。还更新了自家的Composer模型，内置浏览器（这个浏览器功能有很多的妙用，我们课程也会讲到）、全新的代码Review方式等等。

那为了避免新手对新的Cursor布局和之前课程不一致，产生困惑。同时也希望把一些这个版本更新的好用的功能介绍给大家我们就录制了这么一期课程。

我们会带着大家开发一个非常简单的应用，这是一个AI初创产品评分与解析工具。输入初创公司产品落地页文本，AI以风险投资机构视角生成结构化分析报告。

2. 初始化项目

2.1 初始化Next.js

到Nextjs的官网，复制对应的初始化空白Nextjs项目的命令，然后进入到终端中运行。

命令：

npx create-next-app@latest

取名： cursor2-test 。然后用Cursor打开刚才创建的项目。

然后场换到Composer1的模型，输入下面的提示词，运行起来这个项目。那目前这个项目会运行在 localhost:3000 端口。

提示词：

运行该项目

2.2 新布局：带来的思维转变

如上图所示，首先你会发现，目前的Cursor的布局变了。我们之前的Cursor的布局还是传统的IDE的方式，包括我们之前的课程，也都使用的Editor的方式。当然如果你不太喜欢目前的这个布局，还是喜欢之前的布局的话，你可以在设置中进行调整。

但是现在，我们的变成了Agent的方式。这本质是一个使用AI思维的转变。

之前的模式是代码优先。虽然右侧是AI区域，但是更多的这部分的Agent，我们其实是在和Agent对话的模式。我们切换不同的对话，这是在切换和这个Agent对话的上下文。

而现在我们切换到Agent优先的地步，左侧变成了Agent的管理，目前就不再是切换上下文了，这是这个布局带来最大的改变。

我们是在管理Agent，你的不同任务，可以通过管理不同的Agent，以及让不同的Agent 执行来实现。这是最大的不同。就这一点布局的调整，会让我们很大程度开始思考和重构我们之前Vibe Coding的方式

那我们刚才那个启动项目的Agent，我们可以修改一下名字，叫做项目启动，专门用来管理项目启动和编译相关的Agent。

2.3 产品需求描述

现在新开一个Agent，然后输入提示词。我们把这个Agent当做产品经理去对待。主要用来开发对应的需求文档

我现在希望开发一个能够用AI评估初创公司产品的评分和解析工具。请你帮我思考对应的产品需求文档


功能如下：
1. 我希望能够复制对应的网站落地页的所有文本给到AI
2. AI能够通过该帮我用中文分析出这个这个产品的名称、核心功能、产品卖点、应用领域、市场评估等方面的核心要点。给一个简要的分析报告
3. 报告顶部需要站在风险投资机构的角度，给出一个该项目的综合评分（满分100分），并给出简要理由




这个项目的UI逻辑如下：
1. 首页标题 + 文本对话框，默认5行。
2. 文本对话框中输入对应落地也文案，点击开始分析按钮，AI就开始分析。弹出一个从顶部弹出的抽屉，占屏幕高度95%
3. 抽屉在AI加载过程中，需要有一个骨架图，避免是一个空白
4. AI生成后渲染报告


对应的报告的部分的内容，请你给到一个示例的数据，我们以Cursor这款AI IDE为例。现在请你帮我构思对应的产品需求文档。并创建prd.md文件，在项目根目录下。

确认对应的需文档。如果有问题，可以和AI沟通或者自己修改。

最后我们把这个Agent修改成为产品经理

同时提交本次的修改

3. 开发项目

3.1 使用Composer1

新开一个Agent，然后输入以下提示词：

@prd.md 基于该需求文档实现对应的前端页面，目前报告数据使用mock的json数据，先不接入后端。能完成整个项目流程的查看。前端组件使用shadcn实现，黑白简约风格

3.2 原生浏览器

目前Cursor支持了内置浏览器功能，你可以直接底部，选择Brower Tab。

这样就能直接在Cursor里面预览了。

3.3 审核代码

目前可以直接点击Review按钮，查看代码的修改。现在会在一个Tab中显示多个文件的修改。很像Github上我们Review代码的方式。

3.4 多模型能力

现在Cursor 2.0支持了多模型能力，基于Git的WorkTree功能，现在Cursor支持同一个提示用不同的模型来执行。然后看效果，选择使用哪一个模型的。

说实话，我觉得这个功能目前很不好用，我是不推荐的。很多时候纯属浪费token。如果大家觉得这个功能有什么很好的应用场景，可以告诉我。

选择Composerl、Sonnet4.5和GPT-5 Codex的模型优化UI。输入下面的提示词：

  使用 Neobrutalism 风格优化该页面  @page.tsx  的UI样式。实现前端样式优化

注意：

1. 生成完成后，需要点击Apply，才能应用成功。

2. 如果想撤回，点击Undo Apply

3. 切换模型，需要Undo Apply后切换模型，然后再Apply。不然会有冲突

3.5 浏览器审核元素

如果UI上有想修改的，可以直接点击浏览器右上角的内容，让其实现修改。这样再对话框中就会直接将该元素加载到对话的上下文中。

修改前：

修改后：

3.6 Plan Mode

接下来我们使用Plan Mode开发后端AI能力，如果你有使用过Claude Code的切换 plan 模式，其实这一步很那个很像。

  1. 去到阿里云百炼获取自己的API Key
  1. 创建 .env. local, 输入对应的环境变量
DASHSCOPE_API_KEY=sk-your-api-key
  1. 复制对应的千问提供的示例代码
  1. 新打开Agent， 使用Plan Mode开发，输入下方提示词
参考下面的代码，实现产品后端AI功能的接入。用来实现用户输入产品落地页所有文案后，给出真实的报告解析。


```
import OpenAI from "openai";
const openai = new OpenAI(
    {
        // 若没有配置环境变量，请用百炼API Key将下行替换为：apiKey: "sk-xxx",
        apiKey: process.env.DASHSCOPE_API_KEY,
        baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
    }
);
const completion = await openai.chat.completions.create({
    model: "qwen3-max",
    messages: [
        { role: "system", content: "You are a helpful assistant." },
        { role: "user", content: "你是谁？" }
    ],
    stream: true
});
for await (const chunk of completion) {
    process.stdout.write(chunk.choices[0].delta.content);
}
```

有的时候AI会问你一些问题，你需要回复。

OK，这就完成了这个产品的开发。

3.7 音频输入

最后一个新功能是Cursor2.0 支持了语音输入的，大家可以尝试使用。

4.课程源码

下载链接