Cursor纯对话 1小时开发浏览器翻译插件!完全零代码,你也可以!

大家好,我是星河。

在上一篇文章《从质疑到被啪啪打脸!Cursor全方位使用指南》中,星河使用Cursor一句话生成了一个网页版贪吃蛇。但是贪吃蛇这个游戏太过大众,大模型应该有很多语料可以学习,因此并不能真实说明Cursor编程功能的强大。星河当时也说接下来会进行一系列的深度测试,尝试完全使用自然语言交互的方式去完成一系列软件的开发,来验证Cursor 的工程能力,确认它是否真的可以代替程序员完成真正的开发工作。

今天便是星河的第一次尝试,完全以自然语言交互的方式,通过Cursor开发了一个浏览器的翻译总结插件。目前星河自己已经在日常浏览网页时开始使用,效果如下:

翻译总结插件使用2

接下来是完整的教程,星河按照“准备->需求整理->原型设计->功能开发->测试->调试->完善优化”的流程进行插件开发。整个过程星河进行了录制,放在文末,供大家查看。

1. 准备工作

(1)DeepSeek API文档准备

我们开发的翻译和总结插件,需要调用语言大模型来完成相关功能,这儿星河选择DeepSeek。为了让Cursor能够更好的使用DeepSeek的API,我们为Cursor配置DeepSeek的API文档,并在编程时进行引用。

1)在Cursor配置页面,Features配置下,在Docs选项卡里点击“Add new doc”,添加新的文档配置:

扫描二维码关注公众号,回复: 17598450 查看本文章

2)登录DeepSeek官网,确认DeepSeek API文档网络地址:https://api-docs.deepseek.com/zh-cn/

3)在Cursor里添加该网络地址,我们给这份文档取名“DeepSeek”,确认:

4)稍等片刻,就可以看到,Cursor已经完成对DeepSeek API文档的索引了。

(2)DeepSeek API Key准备

要在程序里调用DeepSeek的大模型功能,我们需要一个API Key。在DeepSeek上完成实名认证以后,登录https://platform.deepseek.com/api_keys页面,点击创建:

注意,一定要复制完API key之后再关闭这个页面,因为安全原因,这个Key之后就再也没法完整的显示了。另外使用DeepSeek的API功能是需要付费的,不过价格特别便宜,充个10块钱就够用很久了。

2. 原型设计

(1)功能需求

我们先来向Cursor说明一下我们的要求。创建一个“插件需求”文件,然后输入我们想要的功能说明。星河写的插件需求文件内容如下:

(2)原型设计

确定好功能需求之后,我们让Cursor 帮我们生成界面原型。这儿星河使用的模型是“Claude-3.7-sonnet”,模式选择的是editor模式(对应0.46以前版本的Composer-normal模式)。

稍等片刻,界面原型生成好了。我们来看一下:

感觉还不错,星河就直接接受了。如果大家感觉还有什么需要修改的,可以根据需求让Cursor对界面进行修改,也可以自己修改这个文件。

3. 功能开发

现在我们直接把我们的“插件需求”和“界面原型”文件丢给Cursor,让它帮我们开发这个插件:

注意,星河在这儿忘记引用DeepSeek的文档了。不过Cursor还是帮我们生成了程序文件,完成了插件的开发工作,并告诉我们安装步骤和注意事项:

但是在这儿星河看了一下images文件夹,没有Cursor要求的这几个文件,于是星河让他帮忙生成:

但是它在生成128*128的文件时失败了。只能再让他解决一下:

它帮我们修改了mannifest.json文件,这个问题应该是解决了。但是刚才星河忘记引用DeepSeek的文档,因此不确定它是否正确的使用了DeepSeek的API,保险起见,星河引用了DeepSeek的文档后,又让他检查了一下。

添加图片注释,不超过 140 字(可选)

然后Cursor告诉我们已经没有问题了!开发工作就算初步完成。

4. 调试优化

首先按照Cursor的提示,加载我们的工程文件夹,安装一下插件:

如果顺利的话,就可以看到我们的插件加载成功了。当然,开发一般来说都不会这么一帆风顺。那么这个时候我们只需要将出现的错误,复制给Cursor,然后让他帮我们解决就可以。查看错误的地方有两处:

(1)点击F12,打开浏览器控制台,在我们运行过程中的错误会在这里显示:

(2)插件管理页面,插件本身也会显示运行的错误:

如果感觉功能跟我们想象的不一致,或者有哪些地方需要调整,直接向Cursor描述问题就好。我们还可以对界面截图,辅助我们描述问题。Cursor是可以识别图片内容的。

整个调试优化过程就是以下步骤的反复循环:“加载插件->运行->发现问题->查看报错->复制给Cursor并对现象进行描述->Cursor进行修改->重新加载插件”。星河调试过程中遇到的问题如下,更详细的过程参见开发过程录屏:

至此,所有问题都已经解决完成,我们的翻译总结插件可以使用了!

5. 写在最后

星河是一个C++程序员,对于Web端的开发可以说是一窍不通。在没有Cursor 等AI辅助编程的时代,如果星河想编写这样一个插件的话,从学习、实验到开发调试,保守估计需要一个星期左右的时间。而现在,星河在完全不懂Web端代码的情况下,只用了1个小时,就完成了翻译总结插件的开发和测试,这放在以前绝对无法想象!而且整个过程几乎没有用到任何和编程相关的技能,从头到尾就是“提出需求->交给Cursor开发->提出问题->交给Cursor解决->…”,然后开发就完成了!

整个开发过程完整视频如下:

翻译总结插件开发过程

后面星河还会继续用Cursor挑战零代码去实现一些更复杂的软件,来进一步确认Cursor的能力,同时解放自己的生产力。大家使用Cursor做出过什么好玩的东西吗?或者有什么想要零代码实现的项目吗?欢迎在评论区留言分享~

猜你喜欢

转载自blog.csdn.net/lc19890709/article/details/146297230
今日推荐