请允许我用一下震惊体的标题,因为这次Cursor0.43版本的尝试真的让我有点震惊了。
前一篇Windsurf
的文章 Windsurf初体验,据说要超越Cursor - 掘金 登上了“人工智能7日榜”的第二,对我一个新人来说还是非常激励的。写那篇文章的时候Cursor使用的还是0.42版本的,当时留了个尾巴,要去尝试下Cursor0.43版本,说到做到,这就来了。
本文依然不会直接进行官方特性的列举、对比,而是通过真实场景的开发过程呈现Cursor0.43的能力。
前置准备
- 安装好Cursor0.43版本。
- 注册并登录。
- 保证自己有额度,全文我使用的模型都是
claude-3.5-sonnet
。
实战过程
场景
实现以下界面。
界面效果个人感觉还不错,应该能一定程度体现初级前端工程师的水平了。
这个页面是 天天工作台 – 高效办公,每天都用 的截图,软件有趣的,大家如果有需要可以去试用哈。
初始化项目
开始
打开一个空文件夹,Ctrl+I
调出Composer
面板。
创建干净项目
录入初始化项目的内容,记得选中上图中的agent
,选中后即可体会到Cursor0.43最重要的升级特性了。
代码解读复制代码使用vue-cli创建一个干净的vue2项目
交互性更强了,等我确认后才会运行终端命令。Composer内置终端执行,和Windsurf
的方式一致了。
虽然这一点改动不大,但是开发过程中的操作动线更加合理了,不需要各处切换录入。
启动项目
执行完成后,也可以直接在Composer中运行项目。
效果
运行后效果。
实现界面初版
实现界面
图片扔给Cursor,然后让其实现界面,不使用专门的提示词,只是普通的对话。
代码解读复制代码帮我实现这个页面,尤其是布局、风格、样式,尽量保持一致
错误修复
运行完成后,预览发现报错。
直接将错误截图扔给Cursor,复制好的截图直接在Composer对话框粘贴即可,不需要点击上传。
要求修复的回复。
从图中可以看到,
Windsurf
文中提到的每次改动文件的汇总说明,Cursor也加上了。
效果
此时预览效果如下,中间重要元素的效果其实已经出来了,但是布局和一些细节还有些问题。我们继续。
优化显示效果
为了让界面和预期更相近,我们需要告诉Cursor改进的点。
代码解读复制代码请仔细参考设计图,整体背景是一个图片,然后这些内容并不是撑满全屏,而是占据视野中间。
这种调整的命令,会出现修改多个地方的生成,此时可以通过下图位置确定是否有遗漏。
再次预览,效果是不是还可以,命令中多处问题都已经修复,甚至包括背景图片都通过unsplash
找了一个,关键,界面整体效果还比较一致。
好了,结束。
最终效果
原图:
生成:
总结
最近一直有一种声音,“大模型只能打榜,没什么实质性的落地”,我个人感觉有些片面了。就像今天这个场景,或许Cursor没有一步到位直接搞定客户,但是前端工程师实现某一个界面的时间确实大大缩短了。
这个案例整理成文章花了不少时间,但是整个尝试过程,从创建空白文件夹开始,到最终效果出来,不到30分钟
。甚至,我同时还使用另一个大模型在写项目方案,毕竟,等待生成的时间浪费也就浪费了。
最后,解释下题目。
我一直认为,大模型确确实实能够提升开发的效率,不论是前端还是后端,同时,我也认为,程序员的职业肯定不会消失。
- 一个是,复杂的需求,目前大模型还是解决不了,这是客观存在的。
- 另一个就是,很多程序员对大模型的理解要比非程序员深,同一个问题程序员生成的效果可能会好很多。
虽然程序员这一职业不会消失,但随着开发效率的提升,对初级程序员的需求肯定会有所调整。因此,建议大家尽快学习大模型,就像当年尝试使用机器的第一批工人,先吃螃蟹的人才有可能有收益,再不济,这也是增加一个竞争的技能嘛。
个人经验估算,原来3个初级程序员的工作,现在1个初级程序员,再加上一个大模型,估计就能完成了。甚至,我感觉自己有些保守了,毕竟大模型生成bug的几率比较小。
技术潮流的发展并不会因为个人喜恶而停止,希望大家工作越来越轻松,找工作,也越来越轻松。
评论记录:
回复评论: