Cursor:前端不会消失,但前端的你会消失

767 阅读4分钟

请允许我用一下震惊体的标题,因为这次Cursor0.43版本的尝试真的让我有点震惊了。

前一篇Windsurf的文章 Windsurf初体验,据说要超越Cursor - 掘金 登上了“人工智能7日榜”的第二,对我一个新人来说还是非常激励的。写那篇文章的时候Cursor使用的还是0.42版本的,当时留了个尾巴,要去尝试下Cursor0.43版本,说到做到,这就来了。

本文依然不会直接进行官方特性的列举、对比,而是通过真实场景的开发过程呈现Cursor0.43的能力。

前置准备

  1. 安装好Cursor0.43版本。
  2. 注册并登录。
  3. 保证自己有额度,全文我使用的模型都是claude-3.5-sonnet

实战过程

场景

实现以下界面。

Snipaste_2024-12-05_17-00-13.jpg

界面效果个人感觉还不错,应该能一定程度体现初级前端工程师的水平了。

这个页面是 天天工作台 – 高效办公,每天都用 的截图,软件有趣的,大家如果有需要可以去试用哈。

初始化项目

开始

打开一个空文件夹,Ctrl+I调出Composer面板。

Snipaste_2024-12-05_21-33-12.jpg

创建干净项目

录入初始化项目的内容,记得选中上图中的agent,选中后即可体会到Cursor0.43最重要的升级特性了。

使用vue-cli创建一个干净的vue2项目

image.png

交互性更强了,等我确认后才会运行终端命令。Composer内置终端执行,和Windsurf的方式一致了。

虽然这一点改动不大,但是开发过程中的操作动线更加合理了,不需要各处切换录入。

启动项目

执行完成后,也可以直接在Composer中运行项目。

image.png

效果

运行后效果。

image.png

实现界面初版

实现界面

图片扔给Cursor,然后让其实现界面,不使用专门的提示词,只是普通的对话。

帮我实现这个页面,尤其是布局、风格、样式,尽量保持一致

image.png

错误修复

运行完成后,预览发现报错。

image.png

直接将错误截图扔给Cursor,复制好的截图直接在Composer对话框粘贴即可,不需要点击上传。

image.png

要求修复的回复。

image.png

从图中可以看到,Windsurf文中提到的每次改动文件的汇总说明,Cursor也加上了。

效果

此时预览效果如下,中间重要元素的效果其实已经出来了,但是布局和一些细节还有些问题。我们继续。

image.png

优化显示效果

为了让界面和预期更相近,我们需要告诉Cursor改进的点。

请仔细参考设计图,整体背景是一个图片,然后这些内容并不是撑满全屏,而是占据视野中间。

这种调整的命令,会出现修改多个地方的生成,此时可以通过下图位置确定是否有遗漏。

image.png

再次预览,效果是不是还可以,命令中多处问题都已经修复,甚至包括背景图片都通过unsplash找了一个,关键,界面整体效果还比较一致。

image.png

好了,结束。

最终效果

原图: Snipaste_2024-12-05_17-00-13.jpg

生成: image.png

总结

最近一直有一种声音,“大模型只能打榜,没什么实质性的落地”,我个人感觉有些片面了。就像今天这个场景,或许Cursor没有一步到位直接搞定客户,但是前端工程师实现某一个界面的时间确实大大缩短了。

这个案例整理成文章花了不少时间,但是整个尝试过程,从创建空白文件夹开始,到最终效果出来,不到30分钟。甚至,我同时还使用另一个大模型在写项目方案,毕竟,等待生成的时间浪费也就浪费了。

最后,解释下题目。

我一直认为,大模型确确实实能够提升开发的效率,不论是前端还是后端,同时,我也认为,程序员的职业肯定不会消失。

  • 一个是,复杂的需求,目前大模型还是解决不了,这是客观存在的。
  • 另一个就是,很多程序员对大模型的理解要比非程序员深,同一个问题程序员生成的效果可能会好很多。

虽然程序员这一职业不会消失,但随着开发效率的提升,对初级程序员的需求肯定会有所调整。因此,建议大家尽快学习大模型,就像当年尝试使用机器的第一批工人,先吃螃蟹的人才有可能有收益,再不济,这也是增加一个竞争的技能嘛。

个人经验估算,原来3个初级程序员的工作,现在1个初级程序员,再加上一个大模型,估计就能完成了。甚至,我感觉自己有些保守了,毕竟大模型生成bug的几率比较小。

技术潮流的发展并不会因为个人喜恶而停止,希望大家工作越来越轻松,找工作,也越来越轻松。