前端AI编程使用技巧（后续会更新cursor和claude code for vscode）-编程阁

前端开发工程师如何高效使用 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 协作的方式

Plugin（插件）
MCP（Model Context Protocol）

1、什么是 Plugin 和 MCP？