前端开发工程师如何高效使用 AI（以 Cursor & Claude Code 为核心）
随着 AI 编程工具的成熟，前端开发的工作方式正在发生明显变化。从"手写代码"为主，逐渐转向"人机协作开发"。本文结合我实际使用的 Cursor 和 Claude Code（VSCode 插件），总结一套前端工程师的 AI 使用方法和进阶技巧。
一、AI 在前端开发中的核心价值
AI 并不是简单的"代码生成器"，而是可以覆盖整个开发流程：
1.1 编码阶段
- 自动补全代码（替代部分手写）
- 生成组件 / 页面 / hooks
- 根据注释生成逻辑
1.2 理解与重构 - 解释复杂代码
- 重构旧代码（类组件 → hooks）
- 优化结构（拆分组件）
1.3 调试与排错 - 分析报错
- 推测问题原因
- 提供修复方案
1.4 工程辅助 - 写文档
- 写 commit message
- 生成接口 mock 数据
二、Cursor 使用技巧（重点）
Cursor 本质是一个"AI 原生 IDE"，它最强的地方在于：上下文感知能力极强。
- Tab 自动补全（核心能力）
👉 最常用，也是效率提升最大的功能
使用技巧：
- 写"半句代码"引导 AI
- 写注释比写代码更重要
// 创建一个防抖函数，支持立即执行
然后按 Tab，Cursor 会直接帮你补全完整实现。
✅ 技巧： - 注释写清楚"目的 + 特殊要求"
- 比如：是否需要类型、是否支持边界情况
- Chat 模式（多文件理解）
Cursor 的 Chat 可以读取整个项目上下文。
常见用法：
（1）理解项目
这个项目的请求封装是怎么做的？
（2）定位问题
为什么这个hook会导致重复请求？
（3）跨文件修改
帮我把所有使用 axios 的地方改成 fetch
- 编辑模式（Inline Edit）
选中代码后：
- Cmd + K（Mac）
- 或右键 AI 编辑
示例：
选中代码：
const list = arr.map(item => item.name)
输入：
改成使用 reduce 实现
👉 AI 会直接改代码，而不是只给建议。
核心操作快捷键：掌握快捷键能提升50%操作效率，前端常用快捷键如下：
- Ctrl+K：激活AI对话窗口（核心快捷键），输入自然语言指令即可生成代码；
- Ctrl+L：选中代码段后触发，可让AI解释代码、修改代码、生成注释或单元测试；
- Ctrl+Enter：确认AI生成的代码，直接插入到当前编辑位置；
- Ctrl+`：打开终端，支持直接运行npm install等指令，AI可自动修复依赖冲突；
- Shift+Ctrl+I：启动Composer功能，用Markdown编写需求文档可自动生成项目脚手架。
- Cursor 高级技巧
✅ 技巧1：让 AI 遵循你的项目规范
你可以这样说：
用我项目里的 request 工具，不要用 fetch
或者：
按照当前项目的 hooks 风格写
✅ 技巧2：限制输出范围（很关键）
❌ 错误：
帮我优化这个组件
✅ 正确：
只优化性能，不要改结构
✅ 技巧3：让 AI 做"代码审查"
帮我 review 这段代码，重点看性能和可维护性
好，这一部分我帮你无缝补进你第一版文章结构里，作为一个独立章节（可以放在 Cursor / Claude 之后，作为"进阶能力"），整体风格保持一致，直接可用👇
九、MCP 与 Plugin 使用指南（进阶能力）
当你已经熟悉 Cursor 和 Claude Code 的基础能力后，下一步提升效率的关键就是：
👉 让 AI "接入外部能力"
这主要通过两种方式实现：
- Plugin（插件）
- MCP（Model Context Protocol）
一、什么是 Plugin 和 MCP？
1️⃣ Plugin（插件）
👉 可以理解为：
给 AI 增加"工具能力"
比如：
- 调接口
- 查数据库
- 访问 Figma
- 操作 GitHub
常见 Plugin 类型： - 接口调试（类似 Postman）
- 数据查询（数据库 / API）
- 设计稿读取（Figma）
- 文档检索（Confluence / Notion）
2️⃣ MCP（Model Context Protocol）
👉 可以理解为：
给 AI 增加"上下文和数据来源"
它的本质是：
让 AI 能读取你的本地 / 项目 / 外部系统信息
MCP 能做什么？
- 读取本地文件
- 访问代码仓库
- 获取设计稿信息
- 接入公司内部 API
👉 简单总结：
暂时无法在飞书文档外展示此内容
二、Cursor 中的 Plugin / MCP 使用
1️⃣ Cursor Plugin 使用
Cursor 本身对"工具调用"支持较弱（相比 Claude），但你可以通过：
👉 API + Prompt 模拟 Plugin
示例：
调用这个接口：
GET /api/user/list
返回格式：
{
name: string;
age: number;
}
帮我生成请求代码
👉 Cursor 会帮你生成：
- fetch / axios 请求
- 类型定义
- 数据处理逻辑
2️⃣ Cursor + MCP（核心玩法）
Cursor 最大优势：
👉 可以直接吃整个项目上下文
这其实就是一种"隐式 MCP"
使用技巧：
✅ 技巧1：让 AI 读取指定文件
结合 utils/request.ts，帮我优化这个请求
✅ 技巧2：跨文件理解
这个接口在项目里是怎么被调用的？
✅ 技巧3：模拟"数据源"
这个是接口返回数据，帮我生成对应的 TS 类型
3️⃣ Cursor MCP 进阶玩法
👉 场景1：结合设计稿（Figma）
根据这个设计稿，生成 React + Tailwind 代码
（可以手动贴 JSON / 描述结构）
👉 场景2：结合接口文档
这是 Swagger 数据，帮我生成请求封装
👉 本质：
你在"手动喂 MCP 数据"
三、Claude Code 中的 MCP / Plugin（重点）
Claude 在这方面明显更强，尤其是：
👉 真正支持工具调用 + MCP
1️⃣ Claude Plugin 使用
常见能力：
- 调 API
- 查询数据
- 执行任务
示例场景：
帮我查一下这个接口返回的数据结构
👉 Claude 可以：
- 自动调用工具
- 返回结果
- 再帮你生成代码
2️⃣ MCP（核心能力）
Claude 的 MCP 通常用于：
👉 接入真实开发环境
比如：
- 本地代码
- GitHub 仓库
- 数据库
- 内部系统
3️⃣ Claude MCP 使用方式（VSCode）
👉 常见模式：
（1）读取项目
分析当前项目的状态管理方案
（2）理解接口调用链
这个接口从请求到渲染的流程是什么？
（3）跨系统分析
这个报错可能来自前端还是后端？
4️⃣ Claude MCP 使用技巧（非常重要）
✅ 技巧1：明确数据来源
基于当前项目代码分析
✅ 技巧2：限制范围
只分析 src/pages 目录
✅ 技巧3：组合工具能力
先读取接口数据，再生成 TS 类型
✅ 技巧4：让 AI 做"自动化流程"
- 读取接口
- 生成类型
- 生成请求函数
👉 Claude 会一步步执行
四、Plugin / MCP 最佳实践（前端场景）
1️⃣ 接口开发全流程（强烈推荐）
接口文档 → AI生成类型 → AI生成请求 → AI生成hooks
2️⃣ 设计稿 → 代码
Figma → AI解析 → React组件
3️⃣ Debug 场景
报错 → AI分析 → 定位代码 → 修改
4️⃣ 重构场景
旧代码 → AI理解 → AI拆分组件 → 优化结构
五、进阶技巧（高手用法）
1️⃣ 把 AI 当"中间层"
👉 不只是写代码，而是：
- 接口适配层
- 数据转换层
- 自动生成层
2️⃣ 构建自己的 MCP 数据源
比如你可以长期维护：
- 接口规范模板
- hooks 模板
- 组件模板
👉 每次直接喂给 AI
3️⃣ 组合 Cursor + Claude
👉 推荐模式：
- Cursor：写代码
- Claude：调用工具 / 做推理
六、常见误区
❌ 1. 把 Plugin 当万能工具
👉 实际上需要你定义清楚输入输出
❌ 2. MCP 数据不干净
👉 AI 会被误导
❌ 3. 不限制范围
👉 AI 会"分析整个宇宙"
七、总结
👉 Plugin 和 MCP 的本质：
- Plugin = 让 AI 能"做事"
- MCP = 让 AI 有"信息"
👉 对前端工程师来说：
如果你只用 AI 写代码，你只用了 30% 能力
真正的提升在于：
✅ 让 AI 接入你的开发环境
✅ 让 AI 参与你的工程体系
如果你还想再升级这一部分
我可以帮你再补👇
- 👉 MCP 配图结构（很适合公众号）
- 👉 Claude MCP 实际配置教程（含 VSCode）
- 👉 一套"公司级 AI 开发流程"
直接说你要哪一块 👍
三、Claude Code（VSCode 插件）使用技巧
Claude Code 的特点是：推理强 + 解释能力强 + 更适合复杂逻辑
- 适合场景
相比 Cursor：
暂时无法在飞书文档外展示此内容
- 常见用法
（1）复杂逻辑分析
这段代码为什么会出现闭包问题？
（2）让 AI 推导问题
这个页面偶尔白屏，可能有哪些原因？
👉 Claude 会给你"推理链"，而不是直接猜答案。
（3）设计方案
帮我设计一个前端权限控制方案（React）
（4）接口设计
帮我设计一个分页接口的前后端交互结构
- Claude 使用技巧
✅ 技巧1：多给上下文
Claude 非常吃上下文：
这是一个 React + Zustand 项目，目前的问题是...
✅ 技巧2：让它"分步骤思考"
一步一步分析这个问题
✅ 技巧3：让它对比方案
给我两种实现方式，并说明优缺点
四、AI 提示词（Prompt）技巧（通用核心）
AI 用得好不好，本质取决于：你怎么问
- 好 Prompt 结构
👉 推荐结构：
背景 + 目标 + 限制 + 输出格式
示例：
我在写一个 React 表单组件，
需要支持动态字段，
请用 hooks 实现，
并保证性能优化（避免重复渲染），
输出完整代码
- 常用高质量提示词
👉 写代码
用 TypeScript 写一个可复用的 hooks，要求类型完整
👉 修 bug
这个报错的根本原因是什么？不要只给表面解决方案
👉 重构
在不改变功能的前提下，提高可读性
五、前端 AI 工作流（推荐）
这是一个我比较推荐的 AI 协作流程：
Step 1：用 Cursor 快速生成代码
👉 写基础结构 / UI / hooks
Step 2：用 Claude 做逻辑校验
👉 查 bug / 看边界情况
Step 3：再回 Cursor 做修改
👉 快速改代码
Step 4：AI 做 Review
👉 检查：
- 性能
- 可维护性
- 边界条件
六、进阶技巧（很多人不知道）
- AI ≠ 一次生成
高手是这样用的：
👉 多轮对话优化代码
第一步：先写能跑的版本
第二步：优化性能
第三步：补充类型
第四步：加异常处理
- 控制 AI "不要乱改"
不要修改已有变量名
这个非常重要，否则 AI 容易"重写一切"。
- 让 AI 生成"可维护代码"
请写成团队可读性高的代码，而不是最短代码
- 建立自己的 Prompt 模板
比如：
- hooks 模板
- 表单模板
- 请求封装模板
👉 长期能极大提升效率
七、常见误区
❌ 1. 完全依赖 AI
👉 容易写出"看不懂的代码"
❌ 2. 不做验证
👉 AI 代码不保证正确
❌ 3. Prompt 太模糊
👉 AI 输出会很差
八、总结
对于前端工程师来说：
- Cursor = 提高编码速度
- Claude = 提高思考深度
- Prompt = 决定上限
真正的提升不在于"用不用 AI"，而在于：
👉 你是否掌握了与 AI 协作的方式
好，这一部分我帮你无缝补进你第一版文章结构里，作为一个独立章节（可以放在 Cursor / Claude 之后，作为"进阶能力"），整体风格保持一致，直接可用👇
九、MCP 与 Plugin 使用指南（进阶能力）
当你已经熟悉 Cursor 和 Claude Code 的基础能力后，下一步提升效率的关键就是：
👉 让 AI "接入外部能力"
这主要通过两种方式实现：
- Plugin（插件）
- MCP（Model Context Protocol）
1、什么是 Plugin 和 MCP？
1️⃣ Plugin（插件）
👉 可以理解为：
给 AI 增加"工具能力"
比如：
- 调接口
- 查数据库
- 访问 Figma
- 操作 GitHub
常见 Plugin 类型： - 接口调试（类似 Postman）
- 数据查询（数据库 / API）
- 设计稿读取（Figma）
- 文档检索（Confluence / Notion）
2️⃣ MCP（Model Context Protocol）
👉 可以理解为：
给 AI 增加"上下文和数据来源"
它的本质是：
让 AI 能读取你的本地 / 项目 / 外部系统信息
MCP 能做什么？
- 读取本地文件
- 访问代码仓库
- 获取设计稿信息
- 接入公司内部 API
👉 简单总结：
暂时无法在飞书文档外展示此内容
2、Cursor 中的 Plugin / MCP 使用
1️⃣ Cursor Plugin 使用
Cursor 本身对"工具调用"支持较弱（相比 Claude），但你可以通过：
👉 API + Prompt 模拟 Plugin
示例：
调用这个接口：
GET /api/user/list
返回格式：
{
name: string;
age: number;
}
帮我生成请求代码
👉 Cursor 会帮你生成：
- fetch / axios 请求
- 类型定义
- 数据处理逻辑
2️⃣ Cursor + MCP（核心玩法）
Cursor 最大优势：
👉 可以直接吃整个项目上下文
这其实就是一种"隐式 MCP"
使用技巧：
✅ 技巧1：让 AI 读取指定文件
结合 utils/request.ts，帮我优化这个请求
✅ 技巧2：跨文件理解
这个接口在项目里是怎么被调用的？
✅ 技巧3：模拟"数据源"
这个是接口返回数据，帮我生成对应的 TS 类型
3️⃣ Cursor MCP 进阶玩法
👉 场景1：结合设计稿（Figma）
根据这个设计稿，生成 React + Tailwind 代码
（可以手动贴 JSON / 描述结构）
👉 场景2：结合接口文档
这是 Swagger 数据，帮我生成请求封装
👉 本质：
你在"手动喂 MCP 数据"
3、Claude Code 中的 MCP / Plugin（重点）
Claude 在这方面明显更强，尤其是：
👉 真正支持工具调用 + MCP
1️⃣ Claude Plugin 使用
常见能力：
- 调 API
- 查询数据
- 执行任务
示例场景：
帮我查一下这个接口返回的数据结构
👉 Claude 可以：
- 自动调用工具
- 返回结果
- 再帮你生成代码
2️⃣ MCP（核心能力）
Claude 的 MCP 通常用于：
👉 接入真实开发环境
比如：
- 本地代码
- GitHub 仓库
- 数据库
- 内部系统
3️⃣ Claude MCP 使用方式（VSCode）
👉 常见模式：
（1）读取项目
分析当前项目的状态管理方案
（2）理解接口调用链
这个接口从请求到渲染的流程是什么？
（3）跨系统分析
这个报错可能来自前端还是后端？
4️⃣ Claude MCP 使用技巧（非常重要）
✅ 技巧1：明确数据来源
基于当前项目代码分析
✅ 技巧2：限制范围
只分析 src/pages 目录
✅ 技巧3：组合工具能力
先读取接口数据，再生成 TS 类型
✅ 技巧4：让 AI 做"自动化流程"
- 读取接口
- 生成类型
- 生成请求函数
👉 Claude 会一步步执行
4、Plugin / MCP 最佳实践（前端场景）
1️⃣ 接口开发全流程（强烈推荐）
接口文档 → AI生成类型 → AI生成请求 → AI生成hooks
2️⃣ 设计稿 → 代码
Figma → AI解析 → React组件
3️⃣ Debug 场景
报错 → AI分析 → 定位代码 → 修改
4️⃣ 重构场景
旧代码 → AI理解 → AI拆分组件 → 优化结构
5、进阶技巧（高手用法）
1️⃣ 把 AI 当"中间层"
👉 不只是写代码，而是：
- 接口适配层
- 数据转换层
- 自动生成层
2️⃣ 构建自己的 MCP 数据源
比如你可以长期维护：
- 接口规范模板
- hooks 模板
- 组件模板
👉 每次直接喂给 AI
3️⃣ 组合 Cursor + Claude
👉 推荐模式：
- Cursor：写代码
- Claude：调用工具 / 做推理
6、常见误区
❌ 1. 把 Plugin 当万能工具
👉 实际上需要你定义清楚输入输出
❌ 2. MCP 数据不干净
👉 AI 会被误导
❌ 3. 不限制范围
👉 AI 会"分析整个宇宙"
7、总结
👉 Plugin 和 MCP 的本质：
- Plugin = 让 AI 能"做事"
- MCP = 让 AI 有"信息"
👉 对前端工程师来说：
如果你只用 AI 写代码，你只用了 30% 能力
真正的提升在于：
✅ 让 AI 接入你的开发环境
✅ 让 AI 参与你的工程体系