最强大的 AI 编码助手 Cursor

官网

https://www.cursor.com/

功能介绍

Cursor 是一个 AI 代码编辑器，类似于 Intellij idea，其智能性更强，集成了多种 AI 模型，是当下最强大的编程助手，具有理解整个工程代码的能力（而非单文件）。

包含 Chat 模式和 Composer 模式。Chat 模式时开发者提问 AI 回答（不直接操作工程文件），之后需要我将答案拷贝到文件中，适用于让 AI 写一些代码小片段，又不想让 AI 去直接操作我们的文件；Composer 模式是我提问 AI 直接在工程中写代码（直接修改工程文件）。

安装 Cursor

进入 官网，官网会自动展示与操作系统匹配的安装包，进行下载，下载之后一路点击进行安装即可。

下面使用 Cursor 来开发一个 AI 模型管理器，演示 Cursor 在实际编码中的作用。

开发一个 AI 模型管理器

项目背景

在使用 ComfyUI 的过程中，下载了很多的 checkpoint / diffusion_model / lora 模型，随着时间的发展，已经无法分清每一个模型的效果和使用建议（比如触发词）了。于是需要这样一个东西，可以展示模型的三要素：

缩略图：直观的查看模型的作用和效果，这个图需要支持我自己选择 使用建议：包含触发词/推理参数/ 模型作者的一些生图建议（比如起手式） 下载链接：通过该链接可以看看本模型的一些最新进展，比如作者是否发布了更新的模型

网上搜索了 ComfyUI 模型管理的插件，要不就是功能冗余，要不就是功能残缺，均不能满足上述的小而美的需求，故开发了该项目。效果如下：

点击其中的一个模型，弹出浮层如下：

使用前后端分离的模式进行开发。

服务端工程：使用 SpringBoot，https://github.com/zhaojigang/model-preview

前端工程： 使用 Vue3 + ElementPlus，https://github.com/zhaojigang/model-preview-front

服务端工程

先去 SpringBoot 脚手架官网 创建一个脚手架项目，Java 是我擅长的语言，该项目也比较简单，故人工进行开发。

主要使用 Cursor 的 Chat 模式，进行了一些工具类的咨询。

前端工程

先去 Vue 官网 使用其脚手架创建一个前端工程结构，之后将整个工程引入 Cursor，开始表演。

一共与 Cursor 对话了 x 轮，分别如下：

第一轮：搭建主界面

服务端提供接口：
http://localhost:8080/modelPreviewInfos?modelFirstType=checkpoint
modelFirstType 包含 checkpoint/lora/diffusionModel 三个选项；返回：[{"name":"flux1-dev-fp8","pic":"D:\\ai\\self_use_package\\ComfyUI_windows_portable\\ComfyUI\\models\\checkpoints\\flux\\flux1-dev-fp8.png","useTips":"采样方法：dpm++\r\n采样步数：20\r\n触发词：test","link":"https://civitai.com/models/141592/pixelwave"}]

编写一个页面，包含两部分：第一部分是一个筛选条件：模型类型，key是modelFirstType；第二部分是一个瀑布流，展示上述接口返回的结果，展示的是模型缩略图（图片展示框控制在256*256），点击图片弹出浮层，浮层上半部分展示 使用说明 内容，下半部分展示一个点击按钮，点击跳转到 下载地址

前端界面可以自由设计，力求简洁美观即可。

这一轮 Cursor 开发了一个 ModelPreview.vue 组件，实现了上述能力，基础的页面就出来了。但是前端工程无法直接读取本地文件，导致图片无法展示。

第二轮：解决问题

打开浏览器 console 查看图片无法显示的报错，将报错贴给 Cursor 后，Cursor 给出解决方案（服务端提供一个接口，将本地文件读取为流传给前端；前端读取流），并给出了可运行的 Java 代码和前端代码。按照其解决方案，问题解决。

第三~N轮：交互优化

经过两轮的对话，整个界面就做出来了，关键是能运行！交互样式也不错。后续的 N 轮对话都是在让 Cursor 做交互样式优化。例如：

点击模型链接后关闭弹窗。

弹窗中的 useTips 字体不够漂亮。

瀑布流中的图片展示时进行长宽等比压缩，不要做裁切展示

瀑布流中的多个卡片间距太大，调整到合适间距

model-name 若一行展示不下，做折行处理

将筛选框中的直接平铺出来，同时注意筛选部分与瀑布流的融合美感

筛选项选中后呈现为黑金态

浮层内各元素样式请设计的高级与精致一些

在筛选区和瀑布流区之间增加一个搜索框，按照模型名称模糊搜索当前筛选项下的当前页面中的卡片

从上面的对话可以看出，Cursor 不仅可以直接执行明确的指令，当我们给一些模糊要求时（例如，“浮层内各元素样式请设计的高级与精致一些”），它还会做一些发散性的创造（比如，做一些交互设计），做这些交互设计的时候还会考虑与整体界面的融合度。

使用总结

本文仅使用了 Cursor 最基础的 Chat 模式和 Composer 模式，在开发一些个人项目的时候已经够了。个人用 Cursor 的流程：

1. 自己搭建工程脚手架，设计包结构，掌控整个工程结构
2. 最大限度的使用 Cursor 的 Composer 模式来加速开发，尤其是设计到前端页面 /css 样式 这些，Cursor 的开发效率出奇的高
3. Cursor 可以执行直接的命令，也可以执行一些模糊的要求
4. 给 Cursor 指令时，使用简单直接的原则
5. Cursor 可以做一些设计工作
6. ......