7个被忽视的Cursor功能，让你的开发效率翻倍提升
我走过的弯路这篇文章，写给那些已经熟练使用 Cursor、正在借助 AI 辅助编程的前端工程师。我将结合 Cursor 官方文档与个人实战经验，分享真正能提升效率的 7 个核心功能。
初用 Cursor 时，我的使用方式仅限于：
“帮我写一个登录表单。” “这个报错怎么解决？” “帮我写一份 README。”
然后就没有然后了。
说句实在话：这和你直接用 ChatGPT 搜索代码有什么区别？本质上都是‘依赖 AI’，只是换了一个更智能的工具而已。
痛快了一段时间后，我开始反思：这几个月的效率看似有所提升，但似乎并没有实现质的飞跃。
直到我真正掌握了下面这 7 项功能。
1. Rules：一次配置，持续生效
效果：无需每次重复说明项目规范
我踩过的坑
刚开始配置 Rules 时，我把所有规范都塞进了一个文件：
# 项目规范
- 使用 React 18 + TypeScript
- 使用 Tailwind CSS
- 组件放在 components/ 目录
- hooks 放在 hooks/ 目录
- 使用 Zustand 做状态管理
- 使用 TanStack Query 做数据请求
- ...（此处省略100条）结果：AI 根本记不住，每次还是需要重复解释。
正确做法：按场景拆分
.cursor/rules/
├── 01-项目概述.md # 技术栈、项目定位
├── 02-编码规范.md # 命名、格式规范
├── 03-项目结构.md # 目录结构规范
├── 04-组件规范.md # 组件编写规范
├── 05-API规范.md # 接口请求规范
└── README.md # 索引说明一个真实的 Rules 文件示例
---
description: 编码规范
globs: ["**/*.{ts,tsx,js,jsx}"]
---
# 编码规范
## 命名规范
- 变量/函数：camelCase
- 常量：UPPER_SNAKE_CASE
- 接口/类型：PascalCase
- 组件：PascalCase
## 函数规范
- 优先使用箭头函数
- 使用函数式组件，不使用 class 组件
- 每个函数不超过 50 行
## 必写项
- 必须编写 TypeScript 类型
- 必须编写错误处理逻辑
- 尽量减少 any 的使用
## 禁止项
- 禁止使用 console.log（改用 logger）
- 禁止使用 var
- 禁止使用 ==（必须使用 ===）Rules 的 4 种应用方式
| 方式 | 说明 | 适用场景 |
|---|---|---|
| 始终应用 | 每次对话都强制执行 | 通用规范 |
| 智能应用 | AI 自动判断是否相关 | 中性规范 |
| 应用于特定文件 | 仅对特定文件生效 | 特定格式 |
| 手动应用 | 手动通过 @ 调用 | 特定场景 |
实际效果：配置完成后，无需反复强调“我们使用 React + TypeScript + Tailwind”。新成员加入项目时，AI 会自动遵循既定规范。
2. 计划模式：降低返工率
效果：先规划后执行，避免推倒重来
Cursor 的 3 种工作模式
| 模式 | 快捷键 | 说明 |
|---|---|---|
| 对话模式 | 默认 | 普通对话，AI 接收指令后立即执行 |
| 计划模式 | Shift+Tab | AI 先制定详细计划等待确认 |
| 智能体模式 | Ctrl+K | AI 自动执行多步骤任务 |
实践中的教训
以往习惯一次性提交完整需求：
“请编写完整的用户管理页面，需包含列表展示、新增、编辑、删除功能，采用 React + TypeScript + Tailwind 技术栈，要求实现权限控制和表单验证...”
结果：AI 快速生成数百行代码后出现：
- 存在代码缺陷
- 样式不符合预期
- 业务逻辑错误
正确方案：启用计划模式
通过 Shift+Tab 启动计划模式，AI 将：
- 分析现有代码库结构
- 提出关键问题澄清需求
- 制定分阶段实施计划
- 待确认后开始编码
模式选择指南
| 场景 | 推荐模式 | 优势 |
|---|---|---|
| 代码理解、技术咨询、无需修改文件 | 对话模式 | 纯文字交互响应迅速，适合技术探索 |
| 复杂功能、需求模糊、多文件协作 | 计划模式 | 预先规划可调整，避免无效劳动 |
| 自动化任务、多步骤操作、日常开发 | 智能体模式 | 自主调用工具执行完整工作流 |
| 疑难 Bug、竞态条件、性能优化 | 调试模式 | 假设生成→日志插入→运行时分析，精准定位问题 |
补充说明：
- 对话模式不会主动读写文件或执行命令，资源消耗最低，适合在不确定是否需要修改代码时进行初步探讨
- 所有模式均可通过 Shift+Tab 快速切换，或在输入框上方的模式选择器中手动切换
一个真实的计划模式对话
我：
我想开发一个用户管理页面，需要包含以下功能：
1. 用户列表（支持分页和搜索）
2. 新增用户
3. 编辑用户信息
4. 删除用户（需二次确认）
5. 权限控制（仅管理员可执行删除操作）
请先帮我梳理实现思路和具体步骤。AI（计划模式）：
# 用户管理页面实现方案
## 技术选型
- 采用 TanStack Table 构建表格组件
- 使用 React Hook Form 配合 Zod 实现表单验证
- 通过 Radix UI Dialog 处理弹窗交互
## 实施步骤
### 第一步：构建用户列表页面
- 创建 `src/app/users/page.tsx` 文件
- 实现具备分页和搜索功能的表格组件
### 第二步：新增用户功能
- 创建 `src/components/users/UserForm.tsx` 组件
- 完善表单数据校验逻辑
### 第三步：编辑用户功能
- 复用已开发的 UserForm 组件
### 第四步：删除用户功能
- 集成二次确认弹窗机制
### 第五步：权限控制
- 基于用户角色动态控制操作按钮的可见性
## 待确认事项
1. 分页逻辑由前端还是后端处理？
2. 搜索功能支持哪些字段（用户名/邮箱）？我：方案确认无误，AI 开始编写代码。
官方提示：保存计划
点击"保存至工作区"可将计划存储到 .cursor/plans/ 目录，便于：
- 团队协同开发
- 中断后快速恢复进度
- 后续方案参考
实际效果：以往开发10个功能时，约有6个需要返工调整；采用该模式后，10个功能中仅1-2个需要微调。
3. MCP：实现闭环工作流
核心价值：让 AI 感知真实业务环境，突破代码边界
MCP 是什么？
MCP = 模型上下文协议（Model Context Protocol）
可将其理解为：AI 生态的"小程序"框架。
- 移动应用生态 → 需要安装微信、抖音、淘宝等应用
- AI 工具生态 → 需要安装 MCP 来连接各类外部服务
未启用 MCP：AI 仅能访问代码文件，无法获取设计稿、错误日志等关键信息
启用 MCP：AI 可直接读取 Figma 设计稿、Sentry 报错信息、GitHub 动态等
官方认证的 MCP 服务
| MCP 服务 | 功能价值 |
|---|---|
| Figma | 将设计稿智能转换为前端代码 |
| Sentry | 自动诊断并分析系统报错根源 |
| GitHub | 自动化创建合并请求（PR） |
| Slack | 实时读取和发送团队消息 |
| Notion | 直接调取项目文档内容 |
| Datadog | 深度分析系统运行日志 |
我常用的 MCP 组合方案
日常开发流程：
- Figma → 读取设计稿
- GitHub → 管理代码版本
- Sentry → 排查系统错误
实际成效：以往需要手动复制设计稿内容、逐条检查错误日志、手动触发持续集成流程；现在这些任务均可由 AI 自动完成。
4. 设计稿智能生成代码：效率提升 10 倍
核心优势：AI 能够直接解析设计稿图像并生成对应代码，相比纯文字描述的工作流，效率提升高达 10 倍。
基础操作方式
直接将设计稿截图发送给 AI 并附上指令：
请帮我实现这个登录页面AI 能够自动识别图像中的以下元素：
- 整体布局结构
- 色彩搭配方案
- 元素间距与尺寸
- 字体样式与大小
并直接生成对应的 React + Tailwind 代码。
高阶方案：集成 Figma MCP
这是我个人最推荐的工作流，一旦体验后就难以回到传统模式。
第一步：配置 Figma MCP 服务
- 进入 Cursor 设置界面 → MCP 选项
- 点击 "Add new MCP server"
-
填入 Figma MCP 服务器地址：
- 完成 Figma 账号授权登录
第二步：使用 Figma MCP 功能
获取设计稿内容：
请通过 Figma 读取此文件：https://www.figma.com/file/xxx/xxx生成页面代码：
请基于此设计稿实现登录页面查询设计细节：
这个按钮的主色值是多少？
这个组件的间距规范是怎样的？第三步：Figma MCP 核心功能详解
| 功能项 | 功能说明 |
|---|---|
| 解析层级结构 | 获取设计稿的完整组件树信息 |
| 提取组件属性 | 自动识别颜色、字体、间距、尺寸等参数 |
| 导出参考截图 | 自动生成截图供 AI 分析参考 |
| 生成可用代码 | 直接输出 React/Vue/HTML 等前端代码 |
一个真实的使用案例
我 ：
用 Figma 读取这个设计稿：https://www.figma.com/file/abc123/Login-Page
根据设计稿实现登录页面AI ：
好的，我来分析设计稿...
## 设计稿分析
### 页面结构
- 外层容器：居中布局，灰色背景 (#F5F5F5)
- 登录卡片：白色背景，圆角 8px，带阴影效果
- 输入框：高度 44px，圆角 4px，灰色边框
- 按钮：主色调 #0066FF，白色文字，高度 44px
### 配色方案
- 主色调：#0066FF
- 背景色：#F5F5F5
- 卡片色：#FFFFFF
- 主文字色：#333333
- 辅助文字色：#666666
### 布局规范
- 页面整体居中显示
- 卡片最大宽度 400px
- 内边距 32px
- 输入框间距 16px
现在开始编写代码...随后 AI 直接生成了完整的登录页面代码。
实现效果 ：单个页面的开发时间从 2 小时缩短至 15 分钟。
5. 自定义命令：告别重复劳动
效果 ：一键执行复杂的工作流程
我曾遇到的问题
以往每次创建 PR 时，都需要手动输入一系列命令：
git status
git diff
git add .
git commit -m "feat: xxx"
git push
# 打开浏览器，手动创建 PR...每次重复这个过程需要花费 5-10 分钟。
高效解决方案：自定义命令
在 .cursor/commands/ 目录下创建命令文件：
.cursor/commands/
├── pr.md # 自动创建 PR
├── fix-issue.md # 自动修复 Issue
└── review.md # 自动代码审查一个真实的 PR 命令
# .cursor/commands/pr.md
创建一个 PR：
## 步骤
1. 使用 `git status` 查看当前工作区状态
2. 通过 `git diff` 检查具体变更内容
3. 根据变更内容自动生成清晰的提交信息
4. 执行 `git add .` 添加所有文件
5. 运行 `git commit -m "xxx"` 提交更改
6. 使用 `git push` 推送至远程仓库
7. 通过 `gh pr create` 命令创建 Pull Request
8. 返回生成的 PR 链接地址
## 要求
- 提交信息需清晰准确地描述代码改动
- PR 标题使用中文，详细描述使用英文使用方式
/prAI 将自动完成整个流程，最终返回 PR 链接。
常用命令推荐
| 命令 | 功能 |
|---|---|
/pr |
自动创建 PR |
/fix-issue [number] |
自动修复指定编号的 Issue |
/review |
运行代码检查工具并进行基础审查 |
/update-deps |
更新项目依赖并执行测试 |
实际效果：以往每次需要手动输入 5 条命令，现在只需 1 条 /pr 命令即可完成。
6. TDD：提升代码质量
成效：AI 在明确目标指导下，产出代码质量显著提升
实践过程中的经验教训
早期让 AI 编写代码时存在的问题：
- AI 完成代码编写后缺乏后续验证
- 没有测试环节，无法确认代码正确性
- 需求变更时往往需要全部重写
正确实践：测试驱动开发
第一步：优先编写测试用例
请帮我编写用户验证功能的测试用例：
- 输入有效邮箱地址，应返回 true
- 输入无效邮箱格式，应返回 false
- 输入空字符串，应抛出异常
使用 Jest + React Testing Library 框架
仅编写测试代码，暂不实现功能第二步：验证测试失败状态
AI 生成测试代码后，立即执行测试并确认失败状态。
执行测试，确认所有测试用例均未通过第三步：实现功能代码
请根据测试用例编写实现代码
保持测试代码不变，仅编写功能实现
持续迭代直至所有测试通过第四步：提交代码
所有测试通过后，同时提交测试代码与实现代码TDD 的核心价值
明确的开发目标对 AI 迭代成功至关重要。
- 缺乏明确目标的编码 → AI 自由发挥 → 代码质量不稳定
- 以测试为导向的开发 → AI 定向优化 → 代码质量有保障
实际成效：代码缺陷率降低 70%，项目可维护性得到大幅提升。
7. @Branch：保持状态不丢失
效果：确保 AI 始终掌握当前工作进展
常见痛点
- 对话长度过长导致 AI 出现"记忆模糊"
- 切换任务后 AI 仍停留在之前的话题
- 每次交互都需要重新交代背景信息
解决方案：高效管理对话上下文
@Branch：聚焦当前工作内容
@Branch 当前分支进行了哪些修改？
@Branch 请审查这个分支的代码质量@Past Chats：调用历史对话记录
@Past Chats 之前实现的登录功能具体方案是什么？合理开启新对话时机
需要开启新对话的情况：
- 切换到完全不同的任务模块
- AI 表现出理解困难或重复犯错
- 完成某个完整的功能单元
保持当前对话的情况：
- 对同一功能进行迭代优化
- AI 需要参考之前的对话背景
- 调试刚完成的代码逻辑
实用技巧：监控对话质量
当发现 AI 效率降低（如重复提问、遗忘关键信息），就是开启新对话的最佳时机。
实践成果：过去常遇到的"AI 忘记之前对话"问题现已基本消失。
思维升级
多数人仍在思考：如何让 AI 生成更多代码？
但真正产生差距的思维方式是：如何利用 AI 构建个人核心竞争力？
AI 是能力放大器，而非能力替代品。
- AI 生成代码，人类审核质量 → 提升代码品质
- AI 编写测试，人类设计用例 → 提高测试覆盖率
- AI 执行持续集成，人类分析结果 → 优化开发效率
核心原则始终是：人类负责决策，AI 负责执行。
写在最后
回到最初的问题：前端工程师是否还需要学习 AI？
我的回答是：不仅要学，更要精通。
真正拉开差距的，并非"会使用 AI"，而是"能驾驭 AI"。
这七个功能，才是实现效率倍增的核心关键。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
