前端开发人员:以下是如何充分利用 Cursor😍😍😍

前言

我相信作为程序员Cuesor大家一定都很熟悉了,它是一款代码编辑工具,位于 Claude AI、o3、Gemini-3.5-Pro 和 GPT-4.1 等其他顶级 AI 模型之上,帮助我们提高工作效率以及体验。

Cursor AI 入门

导航到 cursor.com 时,可以下载 IDE:

下载并打开代码编辑器后,你将看到以下内容:

在上面的界面中,我们观察到一些事情:

  • 代理模式 每当编码时,您都需要使用代理模式。它有助于处理端到端任务
  • Ask 如果单击代理模式下拉列表:

你会看到"提问"选项------当你想提出问题时使用此选项,就像使用 ChatGPT 一样。

  • Model selection( 模型选择 ) 此下拉列表显示要从中选择的最喜欢的模型列表
  • Context integration(上下文集成) "添加上下文"按钮,用于使用 @ 符号(@docs、@web 等)
  • Chat interface(聊天界面) "新聊天",用于开始新的或后续的对话。

如何利用这些功能

传统的 Web 开发项目遵循以下工作流程:

但是在进行 vibe 编码时,您的工作流程将看起来更像这样:

而cursor可以帮你完成设计这一步骤,使用 Cursor AI 生成界面 。首先创建一个新项目;我们将在本例中使用 Next.js。

使用快捷键 Command+K,这非常适合您忘记基本命令

现在我们已经安装了项目,是时候进行提示了。

构建示例项目

使用聊天进行设计提示

导航到新建聊天 。 选择光标代理 ,然后选择您喜欢的模型。对我来说,我更喜欢 Claude 3.5

现在你可以提示它了。这是我的提示的样子:"在我的 page.tsx 中,重新创建 Logrocket 的登录页面。"

这是我们得到的:

接受更改,并使用 npm run dev 运行应用程序 如果生成的和我们所设想的效果不太一样,我们可以通过多种方式使用图像上下文使其更接近。

Attaching an image 附加图像

导航到聊天,单击图像图标,然后附加图像。这应该是您想要复制的设计图像。来不断迭代来达到我们想要的效果。

在迭代时,可能会有时ai误解了我们的意思,或者Cursor 发现这个问题有点难以修复。在这种情况下,我们可以通过单击恢复检查点轻松恢复到以前的设计。这可以在之前的聊天下找到:

模型上下文协议 (MCP) 服务器

MCP 是一种开放标准,使开发人员能够在其数据源和 AI 驱动的工具之间构建安全的双向连接。

Framelink.ai 为 Figma 构建了一个 MCP 服务器,它允许您直接访问和处理 Cursor 中的设计文件。按照本指南轻松设置。

充分利用 Cursor 的更多策略

利用 AI 代理模式

使用光标时,您最常使用 AI 代理模式。这是一个强大的功能,可以:

  • 自动安装依赖项(不再需要手动包管理)
  • 在整个项目中创建和修改文件
  • 在确认后运行终端命令
  • 处理复杂的多文件重构
  • 端到端实现完整功能

使用 @ 符号进行上下文管理

了解上下文管理可以提升您使用 Cursor 的编码体验。 @ 符号是您在帮助您时告诉 Cursor 要查看什么或优先考虑什么的方式。主要的 @ 类型是:

  • @code -- 您的整个项目
  • @web -- 搜索互联网
  • @docs -- 该工具或库的文档甚至可以是一个框架
  • @files 和文件夹 -- 特定文件
  • 图像 -- 拖放屏幕截图/设计
  • @cursor 规则 -- 甚至您过去的聊天记录

"新聊天"策略

根据经验,我建议您始终为新功能或项目开始新的聊天。当您在旧对话之上提示某些内容时,可能会分散 AI 的注意力并降低响应质量。

Cursor 添加了一项有用的功能,允许您使用旧聊天的摘要开始新的聊天,为您提供两全其美的体验 - 新鲜的上下文而不会丢失重要信息。

使用上面的 "添加 "按钮创建新聊天,单击上下文选项的 @ ,滚动以选择 "最近的更改", 单击它,然后继续提示:

总结

Cursor AI 的定价似乎偏高。但其功能确实还行,不过我们也可以选择trae来替代,毕竟Cursor也不比trae强多少

相关推荐
王六岁5 小时前
JavaScript作用域与作用域链深度解析
前端·javascript
我的写法有点潮5 小时前
一文教你搞懂sessionStorage、localStorage、cookie、indexedDB
前端·面试
郑陈皮5 小时前
Axios 知识点总结
前端
富婆苗子5 小时前
重新新建一个vue3项目
前端·javascript
腰间盘突出的红利5 小时前
告别手写CRUD!命令行方式通过swagger实现一键生成页面
前端
有事没事实验室6 小时前
书写腾讯天气遇到的问题
前端·css·html
xulihang6 小时前
如何在网页中嵌入PDF
前端·javascript·html
玖伍贰零壹肆6 小时前
前端偶尔需要—Vue3+Vuetify国际化
前端