代码辅助工具 GPT / Cursor

文章说明

现在的GPT已经蛮成熟的了，在进行一些代码提示，代码续写，代码示例创建的效果方面表现的都很不错；我采用《JSON在线工具》这个简单的小示例，来比对 GPT和Cursor的辅助效果

GPT辅助效果

我采用了大概1小时（50来分钟）的时间书写到下面的效果

我采用的是阿里的通义千问模型，我对它的表现的打分是8分，它的优点是理解能力较强，可以给出一些代码灵感，以及部分简单的示例都可以较好的完成；它的缺点是，生成代码的速度较慢，这也是GPT对话模式的局限性，每分钟生成的字数受到限制，估计消耗的资源也不少。

第一次提问效果

在这个示例下，它第一次就可以给出比较正确是一个示例，尽管在样式上会不太好看

第二次提问效果

在我的要求下，它第二次将央视进行了部分美化，得到了如下的效果

可以看出，它的效果并不是很精致，在一些细节处还是有一些缺陷的，如对齐、居中等

第三第四次提问效果

在后续我继续向它提问，要求更改宽度、高度、outline、文字修改、布局等，它都有做出一些改进，但其中宽高的改变，以及对齐方面，它没有主动修正的很好，但这也不算很大的问题

手动微调布局和宽高的效果

其中，这一版是我自己稍微改了一下布局结构和宽度、高度占比呈现的效果，感觉已经还不错了

第五次要求添加主题切换效果

我继续提问，让它给我添加一个主题切换效果，它给出的示例还是不错的，代码基本也是正确的，采用CSS变量来实现，代码蛮清晰的，注释啥的也都有

第六次提问–继续让它优化主题切换的效果

我继续让它微调暗色主题下的文字颜色和边框颜色，也都没问题

第七次提问–修改主题切换的按钮位置并添加动画

后续我让它参考vue官网的主题切换制作一个主题切换效果，它出现了一些偏差，应该是描述的问题理解上有歧义，导致它走向了修改vue官网的示例效果了；后续我暂停了提问，然后让它继续为本次示例项目优化，得到最终效果

提问词

第一次提问词

我想采用vue3来书写一个在线JSON格式化工具，其中包含以下三个主要功能，JSON格式化、JSON属性排序、JSON压缩，你可以给我书写一个示例代码吗

我希望是采用vue3的setup的语法实现的

第二次提问词

是的，目前代码的功能没问题，你是否能够将它的样式设置的更精美一些呢

第三四次提问词

目前确实好了一些，但是我希望字体方面可以更加精美一些，然后我希望它是左右布局的形式，同时我觉得输入区域的outline的原生效果不好看，你可以再优化一下吗

目前效果确实很不错了，但是我觉得输入区域未免还是小了一些，而且它的滚动条样式我也不喜欢，是否可以再优化一下呢，同时我希望按钮的文字是中文，这样对我来说更直观一些

目前的输入区域和展示区域的宽度都太小了，而且我希望输入区域是不能调整大小的，大小设置为屏幕大小小一些就挺好的，不然可利用的地方太少了

你不觉得你每次都重新生成一个新的文件，这样的速度有点慢吗，是否可以在原有的基础上调整，然后再一次性把文件给我呢，目前的速度我感觉太慢了；同时，我希望你只对你调整的地方进行说明，并不用每个地方都说明

这是你的代码目前的效果，可以看出左右两边的展示并不对称，而且高度也被写死为400px了，不能这样，需要改为根据父元素来调整高度，同时最大宽度的限制也不需要了

第五次提问词

我希望再加上主题切换的功能

第六次提问词

我感觉深色模式的白色有些不协调，太亮了，而且蓝色的边框我感觉也不协调，你可以再优化一下吗，这次不用生成整个文件，只需要指明要修改的地方即可

第七次提问词

我希望它的切换按钮在右上角，然后有一个切换动画，同时有一个按钮切换的效果，可以再优化一下吗

不，你的回答有问题，我指的是为我当前的这个JSON格式化工具的主题切换进行调整，将按钮调整到右上角，然后效果参考给出的这张图片

这次你的回答没问题，你可以将完整的组件代码给我展示一下吗，这次的调整似乎还不少

Cursor辅助效果

为了公平起见，也为了方便，我直接采用上述GPT一样的对话词，在不同的步骤中进行微调

通过我的体验感受，cursor，我给它打分9分，比简单的GPT对话高级一些，方便一些；它不用每次都生成全部的文件，而是生成部分变化的地方，然后你选择apply即可；但它有时会出现卡顿，即apply之后刷新不及时；这个问题估计是类似git管理部分变更时需要一些时间处理，瑕不掩瑜。

第一次对话

我直接让它生成一个JSON在线工具，它的效果很不错了，样式就蛮精美的了，功能也没问题

第二次对话–优化部分页面细节

这次我让它优化部分细节，包括滚动条、编辑区域不可调整大小，以及宽高的调整，它做得很好

第三次对话–添加主题切换效果

我让它添加上主题切换的功能，它成功的加上了，虽然有一些地方还需要调整，但是它做的效果很不错，也是采用css变量来实现，还加上了localStorage的方式来保存当前主题

第四次对话–优化页面整体高度过大导致的滚动条以及暗色主题下的区域不完全问题

这次，我直接输入描述，让它优化，它实现的也没问题

提示词

第一次对话

我想采用vue3来书写一个在线JSON格式化工具，其中包含以下三个主要功能，JSON格式化、JSON属性排序、JSON压缩，你可以给我书写一个示例代码吗

第二次对话

是的，目前代码的功能没问题，你是否能够将它的样式设置的更精美一些呢；包括滚动条，输入区域设为不可调整大小，然后输入区域设置的宽高更大一些

第三次对话

我希望再加上主题切换的功能

第四次对话

优化页面整体高度过大导致的滚动条以及暗色主题下的区域不完全问题

结论

通过这次的体验，我感觉cursor这个工具已经很强大了，结合对话功能，较为方便的实现效果，同时是在原有的代码的基础上进行变更，方便对比两次的文件改变情况；而且它的表述也很清晰，很适合作为一个代码辅助工具；当然工具虽好，也需要在使用的过程中不断学习，我在使用中发现，它是采用类似git的代码版本管理来实现文件比对的，不排除远程有代码备份的情况，如果是安全性要求比较高的代码，可以详细查询官方使用说明。

参考资料

GPT–通义千问

Cursor