最近刷到有人用 cursor 写了一个 小猫补光灯的 ios app，想着也来尝试一下 cursor，既然 app 已经被人做了，那我就来做个 浏览器插件版本的补光灯吧。说干就干，下载，安装，直接开始。
还是先介绍下cursor 的基本使用吧，上手难度很低，几分钟就可以熟悉了，包括常用快捷键的一些使用。
首先，从 cursor 官网上下载 ide，整体操作和快捷键跟 vscode 没有区别，只是在右侧会常驻一个 CHAT 面板，在 CHAT 面板中，可以选择 使用的模型，上传图片，以及可以添加选择需要关联的上下文文件等等。通过 快捷键 Ctrl + L / Command + L 就可以唤起 CHAT 面板。
另外，通过 Ctrl + K / Command + K 可以在当前文件中 唤起聊天框，可以提具体需求来局部修改代码。
最最常用的操作基本就是这两个了，Cursor 上手并不复杂。复杂的是怎么跟它沟通能更加高效，更加能让它输出准确的代码。
在开始写这个插件之前，我先让 cursor 帮我生成了一个浏览器插件的项目结构。
现在，需要开发一款浏览器插件，插件实现的功能主要是，1 全屏展示颜色，且有一个设置页，设置页上有一个选择颜色的色盘，选择颜色后，更新全屏展示的颜色，请你给出整个项目的结构
这时，它就会生成包括 README 文件在内的整个项目的完整结构：
然后给他提具体的需求：
例如，我这里分别让它实现了 自定义样式的颜色选择器，全屏按钮，颜色卡片列表等功能。需求的描述要具体，不然它生成的代码就会与你真正要的效果有很大偏差。
不光是完成具体代码功能，而且对于封装插件、发布插件所需要的操作步骤，也可以询问cursor，它会给出详细具体的操作步骤来帮助我们完成从开发到上线的全过程！这里就感觉非常丝滑。最终，我按照它提供的步骤，也是将该插件发布了到了Chrome插件商店。
使用下来最大的感受就是：
要给出具体详细的描述 - 页面结构、功能需求、文件修改等都需要明确列出。描述越具体，Cursor生成的代码就越准确，错误也越少。
我一开始用模糊的描述方式，导致Cursor完全理解错了我想要实现的功能。
只能推倒重来，虽然浪费了一些免费次数，但还是在额度用完前实现了基本功能。之后我决定付费试用一个月看看效果。
另外，完成一个阶段性功能后一定要先commit代码。因为Cursor在开发新功能时可能会影响已有功能，如果没有分步提交，就难以定位问题。而分步commit可以帮助我们快速找出Cursor改动导致的问题。
我觉得可以多尝试一些小项目来练手，提升使用AI辅助编程的能力。这必定是未来的趋势，要想不被淘汰，就得熟练掌握这些工具。一个月20美元的价格，还是很值得尝试的。
最后分享一个小技巧：每个 Cursor 项目都可以创建 .cursorrules 文件来定义项目的编码规范，这样 Cursor 就能按照规范生成代码！例如：
# .cursorrules
version: 1.0
# 代码风格
style:
typescript:
semi: false # 不使用分号
singleQuote: true # 使用单引号
trailingComma: 'es5' # ES5 风格的尾逗号
tabWidth: 2 # 缩进宽度
printWidth: 80 # 每行最大长度
# 组件规范
components:
- 使用函数式组件
- 使用 TypeScript
- 使用 CSS Modules 或 Tailwind
- 组件文件使用 PascalCase 命名
# 文件组织
structure:
- 相关组件放在同一目录
- 共享组件放在 components/ui
- 页面组件放在 app 目录
- 工具函数放在 lib 目录
几个小贴士分享给大家：
- 要和AI说话要具体详细，它才能准确理解你的需求 🗣️
- 记得经常 commit 代码，就像打游戏要存档一样，以防万一要回档 💾
- 可以创建.cursorrules文件来定制你的专属编码风格，让AI按你的喜好写代码 ✨
最后想说：AI编程工具确实很强大，但关键在于我们要学会如何善用它。花20美元体验一下Cursor，完全值得！来吧，让我们一起拥抱AI编程的未来！ 🌟
插件页面预览：
插件地址：小猫补光灯 - Chrome 应用商店
源代码地址：github.com/xcxyh/fill-…
欢迎大家下载使用和查看源码，如果觉得有帮助的话可以给个star⭐️
