Cursor! 让我们意念合一!

继上一篇《8小时AI编程心得体会》之后,我针对发现的问题进行了一些改善,在使用 Cursor Rules 之后,Cursor 输出的结果会更加符合预期,大大提升的开发效率。其次,我将 Cursor 用在了我个人开源的博客项目上,从一些小的优化做起,到现在可以将独立的功能模块托管给 Cursor 去开发,效果经验,今天给大家分享一下我最近一个多月 Cursor 的实战技巧和心得体会。

项目

Github Repo: github.com/TOBE-TOGETH...

首先,简单介绍一下最近用 Cursor 实现了哪些功能:

  • 重构首页:用 Cursor 来设计一个绚烂多彩的首页效果,浮动的背景元素,整体效果我个人还是很满意的。
  • 重构后台管理页面:适用 Card 和无限下滑加载的方式替代原有的 Table 组件,获得更好的手机端浏览效果。
  • 新增邮件验证功能:重构注册流程,用户要在邮件认证后才能登录系统,邮件发送以及模版皆由 Cursor 设计实现。
  • 新增密码重置功能:Cursor 自行设计接口,邮件模版,以及密码重置的前端页面。
  • 新增评论模块:Cursor 自行设计接口,页面,数据库表结构,在细微调整下完成。
  • 优化前端代码打包:Cursor 自行分析前端打包过程,将 React, Mui 等较大的依赖单独打包,优化后项目最大的 chunk 也不到 300 kb,首屏打开提升30%。
  • 优化 SEO:增加 sitemap, 效果还需要继续观察。
  • 更新项目README:浏览并总结项目,文档之类的工作,Cursor 都能轻松处理。

从上面可以看到一个递进的过程:从一些简单的样式调整开始,接着重构前端页面布局和组件,再深入到后台接口,数据库表结构,再到独立设计完整的评论模块,到后面让 Cursor 来实现我所不擅长的 SEO 和打包的优化。在这个过程中,我明显感觉到自己在和 Cursor 一同成长,越发的默契,直到意念合一!

工具

  • Cursor(Pro) + claude-4-sonnet
  • MCP
    • sever-sequential-thinking
    • Brower-tools-mcp
    • server-memory

准备

由于这次是将 Cursor 用于已有项目,并不是从零开始,所以我认为很重要的一点就是要让 Cursor 能更好的理解项目结构和实现,这是能够输出正确代码的前提,为此我优先做了些准备:

  • 项目的前端和后端项目放在同一个 workspace 下,同时,将数据库的 DDL 全部导出,也放在项目中。这样Cursor能够看到从前端页面到数据库结构的全貌。
  • 在 Cursor Settings 下面有一个 Indexing 的页面,Cursor 使用嵌入(Embedding)来实现代码的关联和检索,元数据和嵌入保存在云端,而代码保存在本地。
  • 在 workspace 的 .cursor/rules 路径下添加针对该项目适用的 Cursor Rules,前端后端两个项目分开两个不同的文件。参考链接

如何开发新功能

在一个新功能开发之前,一般我会先命令 Cursor 浏览前后端项目结构,然后提出功能需求,要求 Cursor 给出设计方案。例如:

请浏览前后端的代码,我需要实现一个评论留言功能,加载 portal 下所有类型 content 页面下方,只有登录后的用户可以进行留言,和回复留言。不要直接实现代码,请先输出设计方案。

随后,Cursor 首先会浏览前后端相关代码,随后会调用 sever-sequential-thinking 的 MCP 进行一连串的思考分析,紧接着输出设计方案,包括功能设计,接口设计和数据库表设计。我们要做的就是审查方案,给出意见进行微调,最后跟 Cursor 说一句,"好的,请参考设计实现代码"。然后我们就可以离开电脑去接一杯咖啡了。

这里需要特殊说明一下,这个结对设计的过程非常有必要,让 Cursor 先自我进行一轮设计,借此我们能够检视 Cursor 对项目的理解程度。其次,Cursor 在设计上一般都会考虑的非常全面,我们基于 Cursor 给出的设计进行微调,可以省去开发人员大量的码字的功夫。最后,Cursor 基于输出的设计文档实现代码时也会表现得更加精准,思路连贯。

Cursor 生成前后端代码后还会生成数据库 DDL 脚本。一切完成后,server-memory MCP 会帮忙生成一份设计文档和总结,由于内容过于占篇幅,我这里只附上一个截图给大家看一下。

接着就是我们 review 代码和验收成果的环节了,目前以我个人经验,70% 左右的工作都是可以如此一次性完成的,没有大问题的话可以选择直接接受所有变动,然后剩余 30% 的精力要放在修复一些小问题,优化 UI,优化代码上......这就要逐个问题慢慢聊了。

开发技巧

  1. Cursor Rule 确实可以好用,之前发现的 Cursor 随意修改不相干的代码还有"按了葫芦起了瓢"的情况都没有再出现过。我认为得益于几条规则,建议应用到所有项目中:

    sql 复制代码
    1.Always prefer simple solutions  
    2.Avoid duplication of code whenever possible, which means checking for other areas of the codebase that might already have similar code and functionality.  
    3.You are careful to only make changes that are requested or you are confident are well understood and related to the change being requested.  
    4.When fixing an issue or bug, do not introduce a new pattern or technology without first exhausting all options for the existing implementation. And if you finally do this, make sure to remove the old implmentation afterwards so we don't have duplicate logic.  
  2. Cursor 能够接收并阅读图片内容,因此日常开发中,可以直接将页面或是日志进行截图丢给 Cursor,并指示 "这里的 button 的样式和其他的不一致,请修复"或是"这里的报错请修复"。需要注意的是,截图时的范围尽可能大一些,暴露出 URL,页面位置,特征元素等等。这样更加方便 Cursor 定位问题。这种方式省去了很多码字的负担,更加直观,非常提升开发效率。

  3. 给 Cursor 下达指令时,可以给他说明这样做的目的,这样 Cursor 能更好理解你的需求进而进行调整。例如:"统计数据"信息放在页头太占地方,请使用 MUI 的 Drawer 组件进行重构,点击一个 Info Icon 的按键,在页面的右侧弹出一个 Drawer 来展示统计数据。

  4. 如果可以的话,最好使用英文来和 Cursor 沟通,毕竟代码中的文件和变量都是英文来命名的。使用中文偶尔会让 Cursor 错误理解你的意图,而且错得离谱!如果出现这种情况,可以在文件上右键 "Add Files to Cursor Chat" 来显式的指定给 Cursor,从而避免歧义。

  5. Cursor 非常善于模仿,可以让 Cursor 参考已有的组件来实现新的模块,例如:"请参考注册激活邮件的模版样式和布局,为密码重置功能实现一封新的邮件模版",在或者,"请参考后台文章展示页面的无限加载的方式,重构用户浏览页面"。

总结

经过近2个月的实践,证实了 Cursor 在成熟项目中的可用性,并且摸索出一些提升开发效率的技巧。提升开发效率要保证两个方面:既要保证开发者无需过多精力来指引,又要保证 Cursor 交付物的质量符合预期。过多的指引会让开发者觉得不好用,不如自己动手写代码。指引少了,Cursor 交付物不符合预期一样会带来更多反复的工作。所谓提升效率,无非是提升开发人员和开发工具之间的默契程度,通过 Workspace 和 Indexing 来让 Cursor 了解你的项目和处境,设立 Cursor Rule 来让 Cursor 熟悉你的做事的方式和偏好,用截图或手动 @ 文件的方式来让 Cursor 更加理解你的诉求。有了这些辅助,和 Cusor 更能够彼此理解,意念合一。那种想要什么便会得来什么的感觉,会让人错以为自己是神,哈哈哈哈...

最后希望文章能够帮助到大家,也希望大家都能来体验一下,Happy Coding!✌️

该文章已收入个人博客网站: 《Cursor! 让我们意念合一!》

相关推荐
Gyoku Mint几秒前
机器学习×第七卷:正则化与过拟合——她开始学会收敛,不再贴得太满
人工智能·python·算法·chatgpt·线性回归·ai编程
说私域12 分钟前
新零售视域下实体与虚拟店融合的技术逻辑与商业模式创新——基于开源AI智能名片与链动2+1模式的S2B2C生态构建
人工智能·小程序·开源·零售
superior tigre15 分钟前
图像分割技术:像素级的精准识别(superior哥深度学习系列第12期)
人工智能·深度学习
硅谷秋水21 分钟前
GraspCorrect:通过视觉-语言模型引导反馈进行机器人抓握矫正
人工智能·深度学习·计算机视觉·语言模型·机器人
百胜软件@百胜软件1 小时前
销售预测的方法与模型(二)丨商品与库存分类——基于数据模型运营的本质和底层逻辑销售
大数据·人工智能·销售预测
机器之心1 小时前
AGI真方向?谷歌证明:智能体在自研世界模型,世界模型is all You Need
人工智能
Oculus Reparo!1 小时前
InternLM 论文分类微调实践(XTuner 版)
人工智能·分类·数据挖掘
励志成为大佬的小杨1 小时前
时间序列基础
人工智能·算法
Trae首席推荐官1 小时前
字节跳动技术副总裁洪定坤:TRAE 想做 AI Development
前端·人工智能·trae
Smaller、FL1 小时前
介绍MCP的背景及流程
人工智能·自然语言处理·llm·deepseek·mcp