cursor 让程序员体验当甲方爸爸的快乐

2,451 阅读7分钟

最近刷屏的 cursor 大家都用了吗?

有人说,cursor 与 copilot 最大的区别是,copilot 是给程序员用的,cursor 是给产品经理用的。

然而,我要说的是,用 cursor 的程序员也能当甲方爸爸了。我们程序员不应该排斥这么好用的工具。😊

安装与使用

cursor 安装比较简单,官网下载安装即可。

因为 cursor 其实 fork 了 VS Code 的代码做的修改,所以,它支持了 VS Code 所有的功能,安装的时候,会问你是否复制 VS Code 的配置项,选择“是”即可。这个操作,会把你在 VS Code 的设置、插件等都迁移过来。

如果你之前没有使用 VS Code,那可以在插件市场下载“Chinese ...” 语言包,安装后重启,界面就是中文了。比较遗憾的是,还有很多地方还是没有翻译成中文的。只不过,这都不影响你用中文给 cursor 提需求。

截屏2024-09-25 10.17.55.png

插件排列跟 VSCode 略有不同,只能在下拉菜单中显示,略有不便。

截屏2024-09-25 10.24.36.png

安装完成之后,会有 Welcome 的任务,跟着做一遍,就能立马用上它的 ai 功能了。

截屏2024-09-25 10.25.28.png

  • tab 接受 ai 自动填充的内容
  • 选中内容,ctrl + K 可以让 ai 编辑内容
  • 选中内容,ctrl + L 可以与 ai 对话
  • 对话可以针对整个代码仓库进行

动动嘴就能完成需求

以上都是其他插件都有的功能,但是 cursor 最有特色的是它的 composer 功能。也就是我们能成为甲方爸爸的利器。

ctrl + I,即可调起 composer。如果发现没有响应,需要在 cursor 设置项中,将 composer 开启。

截屏2024-09-25 10.27.18.png

模型选择,使用推荐的 claude 3.5-sonnet 即可,目前来看,国内使用也没有任何问题。

一切准备就绪,现在你就可以穿上正装,打上领带,好好享受甲方爸爸的身份了。

假设现在要开发一个“浪码科技” 的公司网站,甚至作为甲方爸爸,你一点思路都没有。这个时候,你就跟它说,“不要写代码,先给我一点思路。”

于是它哼哧哼哧地给你把思路整理出来了。这思路的确十分完整,可用性也高。但是作为甲方爸爸,也不能动不动就夸它,给它来一句“还行吧。要不你先开始,有问题我们再沟通。”

截屏2024-09-30 11.49.14.png

它毫无怨言,又一顿操作,代码也给你写出来了。对比其他编程助手,cursor 能生成文件、文件夹,而且在做这些之前,它会给你生成项目架构,然后按架构实现你的功能。

截屏2024-09-30 11.48.11.png

代码写完,作为甲方爸爸,在你什么都不懂的时候,你直接叫它跑起来,cursor 会一步步指引你完成依赖包安装、检查文件、命令行操作。真够细心的。

截屏2024-09-30 11.43.08.png

甚至,你懒得多次 npm init/npm install ,也可以让它把依赖包 package.json 写好,自己再操作都行。(就差它自己操作命令行了~)

就跟现实生活一样,项目肯定不可能一次就生成好。所以,多轮对话功能还是很重要的,cursor 的多轮对话体验真的太好了。

cursor 写完代码后,整个项目极大可能第一次运行不起来。程序员看代码的习惯就要来了。但是,稍等,你现在是甲方爸爸,直接跟它说“请修复”

它就会给你道歉/道谢,然后开始排查问题,排查问题之后,再将代码修改。全过程不需要你动一次手。

截屏2024-09-30 11.42.25.png

修改完代码,像 git 提交时一样,把代码前后的不同列出来,让你 review,让你再体验一把在甲方爸爸当架构师的感觉。

确定了可以点击 Accept / Accept all。生成得不对,可以 reject 。

截屏2024-09-30 11.55.28.png

当然,我们是甲方爸爸,也不一定要出动架构师,无脑 accept all,出了问题再告诉它也是很好的选择。甚至控制台显示的问题,你都不用复制,它也能排查出问题。

最后,发现公司 logo 还没做,这一时半会的也找不到人设计,那怎么办?作为甲方爸爸,当然是有困难提出困难,没有困难,也要制造困难。那,就让这个代码仔给你画出来吧。

截屏2024-09-30 11.57.24.png

文案你也不会写,还是一样,让这个代码仔给你写 1000 字的公司介绍内容。

截屏2024-09-30 11.59.34.png

再让 cursor 调整一下样式,帮你换上从其他 ai 那里做的 背景图。

大功告成!

看看最后的页面,还真不赖。

浪码科技主页 浪码科技,关于我们页面

从此,世界上又多了一位和蔼可亲的甲方爸爸,少了一个备受折磨的代码仔。

功能测试

甲方爸爸做完,是不是很爽。但是这几天的深度使用下来,还是有不太好的地方。

以下是我个人做的不太正规、不太客观的一些测试及评分。

新建简单静态站点 🌟🌟🌟🌟🌟

因为现代框架 react、vue 等,都有组件化、模块化的思想,代码要做拆分;但是拆分之后,对 AI 来说,就要做跨文件来阅读了。所以在不使用框架来创建页面的情况下,得到的代码般来说都很好。

新建项目 demo 🌟🌟🌟🌟

同样,在使用了现代框架 react、vue 的情况下,一开始整体项目的开发体验,还是很不错的。

但随着 cursor 的 composer 里面引用的内容越多,复杂度越高,相应的得到的结果成功率就会低很多。

新建复杂项目 🌟🌟🌟

demo 做完之后,再基于这个 demo 做复杂项目,出现的问题就多了。

比如,我需要将tab 页从页面上方移到页面下方,样式需要做调整。对于普通程序员来说,这是一个很简单的效果,结果跟 AI 对话了三次,才正确做出来。

还有就是有一些逻辑,死活调试不正常。多次提问也没有很正确的回答。

另外,使用第三方插件,代码不一定准确。即使我提供了网址,最后也可能需要多次问答才能有较正确的回答。而且,还有可能本来好好的,改坏了,在一些不应该修改的地方做了修改。换而言之,即是说 AI 提供的答案依然不稳定。

老项目改造 🌟🌟

我尝试将老项目使用原声 js 写的内容,替换成一个插件,结果出错。出错之后,多次对话,仍未解决。最后不得不放弃了。所以这一块分数较低。

打包工具改造 🌟🌟🌟🌟

我尝试将一个 gulp 的打包的项目,更新为 vite 打包,三句话就搞定了,还是很顺畅的。所以给四颗星。

不过这个项目比较简单,也许后续可以使用更复杂的项目做尝试。

总结

经过这番操作,说说我理解的 cursor composer 原理。

composer 应该是一个智能体(AI Agent),其实由一个主 AI 和 多个子 AI 来进行开发:

  • 主 AI 负责需求理解,分配任务,相当于产品经理、架构师;
  • 子 AI 负责写代码,就是我们一个个具体的开发人员了。

截屏2024-09-30 12.08.25.png

由于 cursor 需要对多个 AI 进行控制,所以整体的费用是远高于 copilot 的。

如我之前所言,代码助手还需要一定的时间成熟。

cursor 这个交互让大家都非常兴奋,目前做出来的成品也不错。但是对于真正的复杂项目而言,依然有些鸡肋。一旦涉及到跨多个组件的就会有问题。而且是越到项目后期,可能越难得到想要的代码。

总之,还有不少进步空间,期待 cursor 的下一次大更新。