前端开发人员:以下是如何充分利用 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强多少

相关推荐
小王和八蛋3 分钟前
前端存储与离线应用实战:Cookie、LocalStorage、PWA 及 Service Worker 核心知识点
前端·javascript
JarvanMo6 分钟前
终极指南:在 Flutter 中通过 sign_in_with_apple 实现 Apple 登录
前端
Learner12 分钟前
Python异常处理
java·前端·python
tao35566716 分钟前
VS Code登录codex,报错(os error 10013)
java·服务器·前端
军军君0119 分钟前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维
JarvanMo21 分钟前
情迷服务器驱动 UI:我在 Flutter 开发中的爱与哀愁
前端
tzy23324 分钟前
分享一个 HTTP(S) 代理&抓包工具,拦截和Mock Web客户端请求和服务端响应
前端·网络协议·http
代码小学僧30 分钟前
普通前端仔的 2025 : 年终总结与 AI 对我的影响
前端·程序员·ai编程
Mike_jia36 分钟前
TCP 粘包/拆包问题
前端
沐墨染43 分钟前
敏感词智能检索前端组件设计:树形组织过滤与多维数据分析
前端·javascript·vue.js·ui·数据挖掘·数据分析