这篇文章，写给那些已经会用 Cursor、已经在用 AI 辅助编程的前端工程师。 我结合 Cursor 官方文档和实战经验，聊聊哪 7 个功能真正能提升效率。
我踩过的坑
刚开始用 Cursor 的时候，我只会：
"帮我写个登录表单。" "这个报错怎么解决？" "帮我写个 README。"
然后就没有然后了。
我说句扎心的话：这跟你用 ChatGPT 搜代码有啥区别，本质上都是"依赖 AI"，只是换了个更智能的工具。
爽了一段时间后，我开始反思：我这几个月效率好像确实提升了，但好像也没有质的飞跃。
直到我真正用好这 7 个功能。
1. Rules：一次配置，终身受益
效果：不用每次重复解释项目规范
我踩过的坑
刚开始用 Rules，我把所有规范塞进一个文件：
markdown
# 项目规范
- 使用 React 18 + TypeScript
- 使用 Tailwind CSS
- 组件放在 components/ 目录
- hooks 放在 hooks/ 目录
- 使用 Zustand 做状态管理
- 使用 TanStack Query 做数据请求
- ...（此处省略100条）结果：AI 根本记不住，每次还是要重复解释。
正确做法：按场景拆分
bash
.cursor/rules/
├── 01-项目概述.md # 技术栈、定位
├── 02-编码规范.md # 命名、格式
├── 03-项目结构.md # 目录规范
├── 04-组件规范.md # 组件写法
├── 05-API规范.md # 接口请求
└── README.md # 索引一个真实的 Rules 文件示例
yaml
---
description: 编码规范
globs: ["**/*.{ts,tsx,js,jsx}"]
---
# 编码规范
## 命名规范
- 变量/函数：camelCase
- 常量：UPPER_SNAKE_CASE
- 接口/类型：PascalCase
- 组件：PascalCase
## 函数规范
- 优先使用箭头函数
- 使用函数式组件，不使用 class 组件
- 每个函数不超过 50 行
## 必写项
- 必写 TypeScript 类型
- 必写错误处理
- 减少 any 的使用
## 禁止项
- 禁止 console.log（用 logger 代替）
- 禁止 var
- 禁止 ==（用 ===）Rules 的 4 种应用方式
| 方式 | 说明 | 适用场景 |
|---|---|---|
| Always Apply | 每次对话都应用 | 通用规范 |
| Apply Intelligently | AI 自动判断是否相关 | 中性规范 |
| Apply to Specific Files | 特定文件才应用 | 特定格式 |
| Apply Manual | 手动 @ 调用 | 特定场景 |
我的效果：配置好之后，再也不用每次解释"我们用 React + TypeScript + Tailwind"。新人加入项目，AI 自动知道规范。
2. Plan Mode：减少返工
效果：一次想清楚再做，减少推翻重来
Cursor 的 3 种模式
| 模式 | 快捷键 | 说明 |
|---|---|---|
| Chat Mode | 默认 | 普通对话，AI 收到指令直接执行 |
| Plan Mode | Shift+Tab | 计划模式，AI 先做计划等你确认 |
| Agent Mode | Ctrl+K | Agent 模式，AI 自动执行多步骤任务 |
我踩过的坑
以前我习惯一次性把需求全丢过去：
"帮我写一个完整的用户管理页面，包含列表，新增、编辑、删除，用 React + TypeScript + Tailwind，需要有权限控制，有表单校验..."
结果：AI 咔咔一顿写，写了几百行代码。然后：
- 代码有 bug
- 样式不对
- 逻辑不对
正确做法：用 Plan Mode
按 Shift+Tab 开启计划模式，AI 会：
- 先研究你的代码库
- 问澄清问题
- 创建详细的实现计划
- 等你批准后再写
什么时候用什么模式？
| 场景 | 推荐模式 | 原因 |
|---|---|---|
| 复杂功能、多文件改动 | Plan Mode | 先计划，避免返工 |
| 简单修改、单文件 | Chat Mode | 直接执行更快 |
| 自动化任务、多步骤 | Agent Mode | 自动执行完整流程 |
一个真实的 Plan Mode 对话
我：
markdown
我想要做一个用户管理页面，包含：
1. 用户列表（分页、搜索）
2. 新增用户
3. 编辑用户
4. 删除用户（需要二次确认）
5. 权限控制（admin 才能删除）
先帮我分析一下实现思路和步骤。AI（Plan Mode） ：
markdown
# 用户管理页面实现计划
## 技术方案
- 使用 TanStack Table 做表格
- 使用 React Hook Form + Zod 做表单
- 使用 Radix UI Dialog 做弹窗
## 实现步骤
### 第一步：用户列表页面
- 创建 `src/app/users/page.tsx`
- 实现表格组件，支持分页、搜索
### 第二步：新增用户
- 创建 `src/components/users/UserForm.tsx`
- 实现表单校验
### 第三步：编辑用户
- 复用 UserForm 组件
### 第四步：删除用户
- 添加二次确认弹窗
### 第五步：权限控制
- 根据用户角色控制按钮显示
## 需要确认的问题
1. 分页是前端还是后端？
2. 搜索是按用户名还是邮箱？我：确认方案，AI 开始写代码。
官方提示：保存计划
点击 "Save to workspace" 可以把计划保存到 .cursor/plans/，方便：
- 团队协作
- 中断后继续
- 后续参考
我的效果：以前写 10 个功能，有 6 个要返工；现在 10 个功能，只有 1-2 个需要调整。
3. MCP：闭环工作流
效果：AI 能看到真实世界，不只是代码
什么是 MCP？
MCP = Model Context Protocol（模型上下文协议）
你可以理解为：AI 版的"小程序" 。
- 手机 App → 需要安装微信、抖音、淘宝...
- AI 工具 → 需要安装 MCP 来连接各种服务
没有 MCP：AI 只能看到代码，看不到设计稿、报错、日志...
有 MCP：AI 可以读取 Figma、Sentry、GitHub...
官方支持的 MCP
| MCP | 效果 |
|---|---|
| Figma | 设计稿直接转代码 |
| Sentry | 报错自动调查原因 |
| GitHub | 自动创建 PR |
| Slack | 读取/发送消息 |
| Notion | 读取项目文档 |
| Datadog | 日志分析 |
我最常用的 MCP 组合
日常开发：
- Figma → 读设计稿
- GitHub → 管代码
- Sentry → 查报错
我的效果：以前要手动复制设计稿、查报错、跑 CI；现在 AI 都能自己完成。
4. 设计稿直出：10 倍速
效果：AI 看图写代码，比文字描述快 10 倍
基础用法
直接把设计稿截图发给 AI：
帮我实现这个登录页面AI 能识别：
- 布局结构
- 颜色配色
- 间距尺寸
- 字体大小
直接写出对应的 React + Tailwind 代码。
进阶用法：Figma MCP
这是我的最爱，用了之后就回不去了。
第一步：安装 Figma MCP
- 打开 Cursor 设置 → MCP
- 点击 "Add new MCP server"
- 输入 Figma MCP 服务器地址：
arduino
https://mcp.figma.com/mcp- 登录 Figma 账号授权
第二步：使用 Figma MCP
读取设计稿：
ruby
用 Figma 读取这个文件：https://www.figma.com/file/xxx/xxx实现页面：
根据这个设计稿实现登录页面问 AI 问题：
这个按钮的颜色是什么？
这个组件的间距是多少？第三步：Figma MCP 能做什么
| 功能 | 说明 |
|---|---|
| 读取层级结构 | 获取设计稿的组件树 |
| 获取组件属性 | 颜色、字体、间距、尺寸 |
| 导出截图 | 自动截图给 AI 参考 |
| 生成代码 | 直接输出 React/Vue/HTML 代码 |
一个真实的使用案例
我：
ruby
用 Figma 读取这个设计稿：https://www.figma.com/file/abc123/Login-Page
根据设计稿实现登录页面AI：
markdown
好的，我来分析设计稿...
## 设计稿分析
### 页面结构
- 外层容器：居中，灰色背景 (#F5F5F5)
- 登录卡片：白色背景，圆角 8px，阴影
- 输入框：高度 44px，圆角 4px，灰色边框
- 按钮：主色 #0066FF，白色文字，高度 44px
### 颜色
- 主色：#0066FF
- 背景：#F5F5F5
- 卡片：#FFFFFF
- 文字：#333333
- 副文字：#666666
### 布局
- 页面居中
- 卡片最大宽度 400px
- 内边距 32px
- 输入框间距 16px
我现在开始写代码...然后 AI 直接写出了完整的登录页面代码。
我的效果：一个页面从 2 小时 → 15 分钟。
5. 自定义命令：告别重复
效果：一键执行复杂工作流
我踩过的坑
以前每次创建 PR，都要手动敲：
csharp
git status
git diff
git add .
git commit -m "feat: xxx"
git push
# 打开浏览器，创建 PR...每次都要重复 5-10 分钟。
正确做法：自定义命令
创建 .cursor/commands/：
bash
.cursor/commands/
├── pr.md # 自动创建 PR
├── fix-issue.md # 自动修复 Issue
└── review.md # 自动代码审查一个真实的 PR 命令
markdown
# .cursor/commands/pr.md
创建一个 PR：
## 步骤
1. 用 git status 查看当前状态
2. 用 git diff 查看变更内容
3. 根据变更内容生成合适的 commit message
4. git add .
5. git commit -m "xxx"
6. git push
7. 用 gh pr create 创建 PR
8. 返回 PR URL
## 要求
- commit message 要清晰描述改动
- PR 标题用中文，描述用英文使用方式
bash
/prAI 自动完成整个流程，最后给你 PR 链接。
常用命令推荐
| 命令 | 功能 |
|---|---|
/pr |
自动创建 PR |
/fix-issue [number] |
自动修复 Issue |
/review |
运行 linter + 简单审查 |
/update-deps |
更新依赖并测试 |
我的效果 ：以前每次都要手动敲 5 条命令，现在 1 条 /pr 搞定。
6. TDD：代码质量
效果：AI 有明确目标，代码质量更高
我踩过的坑
以前让 AI 写代码：
- AI 写完就不管了
- 没有测试，不知道对不对
- 后来改需求，全部重写
正确做法：TDD
第一步：先写测试
diff
帮我写一个用户验证的测试用例：
- 输入有效邮箱，返回 true
- 输入无效邮箱，返回 false
- 输入空字符串，抛出异常
使用 Jest + React Testing Library
不要写实现代码，只写测试第二步：确认测试失败
AI 写出测试后，运行测试，确认失败。
运行测试，确认测试失败第三步：让 AI 写实现
现在根据测试写实现代码
不要修改测试，只写实现
直到所有测试通过第四步：提交
测试通过后，提交测试和实现TDD 的核心优势
AI 需要明确目标才能迭代成功。
- 写代码没有目标 → AI 随意发挥 → 质量不稳
- 有测试作为目标 → AI 迭代改进 → 质量保证
我的效果：Bug 减少了 70%，代码可维护性大幅提升。
7. @Branch：不丢状态
效果：AI 始终知道你在做什么
我踩过的坑
- 对话太长了，AI 开始"失忆"
- 切换功能后，AI 还在聊之前的话题
- 每次都要重新解释上下文
正确做法：用好上下文管理
@Branch：了解当前工作
less
@Branch 这个分支做了什么改动？
@Branch 帮我 review 这个分支的代码@Past Chats：引用过去对话
css
@Past Chats 之前那个登录功能是怎么实现的？适时开启新对话
需要开启新对话的场景：
- 切换到不同的任务/功能
- AI 看起来困惑或重复犯错
- 完成了某个逻辑单元的工作
继续当前对话的场景：
- 迭代同一个功能
- AI 需要之前的上下文
- 调试刚写好的代码
小技巧：监控对话长度
如果发现 AI 效率下降（开始重复问题、忘记之前的上下文），就是该开新对话的时候了。
我的效果：以前经常"AI 不记得我刚才说什么"；现在几乎没有这种情况。
认知升级
很多人还在想：怎么让 AI 帮我写更多代码？
但真正拉开差距的思维是：怎么让 AI 帮我构建 核心竞争力 ？
AI 是 杠杆 ，放大你的能力，不是替代你的能力。
- AI 写代码，你来审核 → 质量提升
- AI 写测试，你来设计用例 → 覆盖率提升
- AI 跑 CI，你来分析结果 → 效率提升
核心永远是：你来做决策，AI 来执行。
写在最后
回到最初的问题：前端工程师还要学 AI 吗？
我的答案是：不是要学，是要精通。
真正拉开差距的，不是"会用 AI"，而是"用好 AI"。
这 7 个功能，才是效率翻倍的关键。
参考资料：
如果觉得有帮助，欢迎点赞、收藏。