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

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅7 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊7 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax