---

1 引言

Cursor的初步使用我们在之前已经学习过了，简单的使用可以参考【AI应用探索】-6- MCP&Cursor
这里我们就不赘述了，我们如今实战，来演示下如何创建一个完善的前后端项目。

2 Cursor模式

2.1 Ask模式

Ask模式简单来说就是对话模式，跟我们平常使用的大模型对话的功能类似，就是输入任务，他给出之后的代码。

使用和平常对话的大模型类似

2.2 Plan模式

plan模式类似于半自动，我们需要一步一步接受他的执行过程

点击build之后，我们就可以在左侧看到生成的代码，最后由我们决定是否留下

2.3 Agent模式

agent模式类似于全自动，我们可以从上面的图看到，Agent模式是默认的推荐模式，Agent即为在一次请求中，Cursor可以帮我们完成代码生成、安装组件库、运行代码一系列操作。这些类库组件是别人已经封装好的，我们可以直接使用的。

输入了之后直接就好了，我们只需要管接不接受就可以了。
这里注意

• save all ：可以反悔
• accept all：不可反悔，确认接受

2.4 @模式

这个在实习的时候，阿里内部的ideaTALK也同样提供此类功能

我们输入@提示符后，他会自动的为我们的会话添加对应的上下文。在一次对话的中，可以额外的添加更多的信息进来，让Cursor可以更好的理解我们想要去做什么事情。
可以添加文档、分支甚至网页，添加网页他会自动对网页进行分析。然后将网页的内容提取出来之后，来结合我们的实际需求来产生一个更好的效果。

2.5 CodeBase模式

只要是在工作目录里的文件，cursor都会自动为其生成索引以更好的理解上下文。

3 简单网站生成

3.1 生成设计示意图

我们添加一个文件

这是一个网站功能规划，网站里应该包含一些小程序
1. 文件转换
2. 图片压缩
3. 图片格式转换

右侧@文件后添加后，输入prompt

1、生成设计示意图
你能根据文件里的内容帮我生成一个网站UI设计图么。生成的示意图应该按功能拆分，每个功能应该有一个独立的页面，每个示意图单独写到一个文件里，文件名前缀：网站设计示意图-。

启动agent后，他自动在左侧生成三个文件

3.2 生成架构文件

针对刚刚生成的这三个文件

2、生成架构文档
请根据这些文件里的内容帮我生成一个项目代码架构设计文档，文件名：项目代码架构设计文档.txt。需求：
1、根据功能判断是否需要使用后端服务
2、只设计文档中存在的功能，不用增加其它功能
3、文档内容应简单易懂，无需进行复杂设计

我们可以在左侧看到已经生成了

3.3 生成文件转换功能

请根据这些文件的内容和要求，帮我生成文件转换功能，如果有后端服务，需要同时生成后端代码。页面风格要求好看。

我们可以看到，他前端和后端都生成好了，后端忘了让他用java了，他用的js。先不管了，先看看效果怎么样

npm install
npm start

直接在浏览器打开 frontend/pages/file-convert.html

我们直接打开http://localhost:3000/

看起来不错啊感觉

上传一个文件点击转换

显示转换完成

现在只能用稍微简单的转换方式，比如txt转html。复杂的就需要用到专业库了，使用java或者python了。
这个我们之后再修改。

4 配置高级语言

刚刚我们的demo已经要用一些python库or springboot，那么我们怎么配置呢？

4.1 配置python

插件市场下载这个

之后点击右下角就可以选择我们的conda环境了

4.2 配置java

Cursor继承了VS Code的插件生态，安装以下Java开发必备插件：

插件名称	功能描述
Extension Pack for Java	Java开发核心套件，包含语言支持、调试器等。
Spring Boot Extension Pack	Spring开发必备，支持自动配置、代码生成。
Maven for Java	Maven项目支持与依赖管理。

在环境变量里配置好JAVA_HOME，cursor会自动识别的

配置好后配置maven，和JAVA_HOME的配置原则一致。

5 开发一个Chrome浏览器插件

5.1 准备阶段

我们来为我们的Chrome浏览器生成一个插件，具备一些简单的功能

• 选词翻译
• 选段总结

先准备我们的插件需求说明，新建文件@Chrome插件需求.txt：

开发一个Chrome插件，具有以下两个功能：
1、选中页面的内容，然后右键点击出菜单栏找到插件的功能，可以翻译选中的内容
2、选中页面的内容，然后右键点击出菜单栏找到插件的功能，可以总结选中的内容
要求：
1、翻译功能和总结功能都是用qwen的api
2、打开在右键的侧边栏中
3、base-url已经准备好了：https://dashscope.aliyuncs.com/compatible-mode/v1
4、qwen的api-key也准备好了:sk-xxxx
5、模型名称为：qwen-plus

接下来准备Prompt：

@Chrome插件需求.txt 
帮我生成一个Chrome插件的UI示意图，要求美观简洁，生成的内容写到文件：Chrome插件UI示意图

可以看到Cursor已经为我们准备好了

5.2 代码生成

接下来准备Prompt：

@Chrome插件UI示意图.md @Chrome插件需求.txt 请根据需求和示意图生成Chrome插件的代码

接下来我们尝试在Chrome上安装以下

显示报错，我们回看代码，发现忘了引入三个图标文件了

重新添加三个图标

三个图标长这样

成功加载进来

拓展菜单栏也有我们的插件

5.3 使用测试

我们找段话翻一下

结果如下，说明还是很成功的=v=

这里我们的Cursor简单实战上篇已经结束，我们将在下篇对小程序orAPP进行开发。