目录
- [什么是 MCP？](#什么是 MCP？)
- [Cursor MCP 的作用](#Cursor MCP 的作用)
- [Cursor MCP 前端开发推荐安装工具](#Cursor MCP 前端开发推荐安装工具)
-
- [1. [chrome-devtools-mcp](https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh_cn) ([官网介绍](https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh_cn))](#1. chrome-devtools-mcp (官网介绍))
- [2. [figma-mcp ](https://www.framelink.ai/docs) [使用指南 ](https://www.framelink.ai/docs)](#2. figma-mcp 使用指南 )
- [如何配置 Cursor MCP？](#如何配置 Cursor MCP？)
-
- [Chrome-devtools-mcp 配置](#Chrome-devtools-mcp 配置)
- [Figma-mcp 配置](#Figma-mcp 配置)
- [Figma-mcp 使用](#Figma-mcp 使用)
什么是 MCP？
MCP（Model Context Protocol） 是由 Anthropic 开发的一个开放协议，允许 AI 应用程序与外部数据源和工具进行交互。在 Cursor 中集成 MCP 后，AI 助手可以获得更强大的能力。
Cursor MCP 的作用
扩展功能：连接数据库、文件系统、API、浏览器等外部资源
提供上下文：让 AI 助手访问项目外的数据和工具
增强能力：支持文件操作、数据库查询、网页交互等
Cursor MCP 前端开发推荐安装工具
1. chrome-devtools-mcp (官网介绍)
2. figma-mcp 使用指南
如何配置 Cursor MCP？
- 使用 ctrl(command) + p 打开文件搜索，输入 mcp，进入 mcp.json 文件。
- 将需要添加的 mcp 服务 json 配置添加到 mcp.json 文件中。
或者使用下面方式(推荐)：
点击菜单进入---》 File > Preferences > Cursor Settings > Tools & MCP > New MCP Server
Chrome-devtools-mcp 配置
Chrome DevTools MCP 是 Chrome DevTools 团队于9月23号提供的 MCP 服务器，让 Cursor 的AI 助手可以直接控制和检查 Chrome 浏览器，进行浏览器自动化、调试和性能分析。
硬性要求
Node.js v20.19 或更新的最新维护 LTS 版本
Chrome 当前稳定版本或更新版本
npm
手动配置
将下面代码添加到 mcp.json 配置文件中：
json
"chrome-devtools": {
"command": "npx", // 启动 MCP 服务器的命令，使用 npx 自动下载并运行包
"args": [
"-y", // 自动确认安装，避免交互提示
"chrome-devtools-mcp@latest", // 指定要运行的 npm 包
"--headless=true", // 控制是否以无头模式运行：true = 不显示浏览器窗口（后台运行，性能更好），false = 显示浏览器窗口（可见）
"--isolated=true", // 是否使用临时用户数据目录（环境隔离）
"--viewport=1920x1080" // 设置浏览器视口大小，移动端开发推荐 375*812
]
}保存后重启 cursor，进入 MCP 设置界面，需要等待 MCP 启动完成，过一会儿看到如下图所示绿色图标即为配置成功。
配置成功后，也可使用下面指令检验一下：
检查 https://www.iciba.com 网页性能在 cursor 对话框输入上面问题，cursor 会自动打开浏览器检查对应网页性能。
自动配置
请点击链接：Add to Cursor
若配置失败要如何处理？
如下图所示失败状态：
故障排查：
- 运行 npx -y chrome-devtools-mcp@latest 来测试 MCP 服务器是否在您的机器上正常运行。
- 请确保您的 MCP 客户端使用的 npm 和 node 版本与您的终端相同。
- 配置 MCP 客户端时，尝试使用 npx 的 --y 参数自动接受安装提示。
- 在 chrome-devtools-mcp 服务器的输出中查找特定错误。通常，如果您的客户端是 cursor，日志会显示在 "Output " 窗口中(选择 MCP Logs)。
在保证上面硬性要求都满足后，通常错误都集中在运行 npx -y chrome-devtools-mcp@latest 这一步就报错，具体错误得看控制台提示，按照错误提示去解决，其实这个也不需要自己去分析处理，只需要按照下图将错误信息添加到 chat 中，让 cursor 来帮我们处理即可。（图中我的指令执行是成功的，如果有错误，可添加 chat 中处理）
点击查看更多故障
其它客户端 chrome-devtools-mcp 配置
https://github.com/ChromeDevTools/chrome-devtools-mcp/?tab=readme-ov-file#mcp-client-configuration
Chrom Devtools MCP 工具分类总览表
| 类别 | 工具数量 | 工具名称 | 类别说明 |
|---|---|---|---|
| Input automation (输入自动化) | 8 | click, drag, fill, fill_form, handle_dialog, hover, press_key, upload_file |
模拟用户输入操作 |
| Navigation automation (导航自动化) | 6 | close_page, list_pages, navigate_page, new_page, select_page, wait_for |
页面导航和管理 |
| Emulation (环境仿真) | 2 | emulate, resize_page |
模拟不同设备和网络条件 |
| Performance (性能分析) | 3 | performance_analyze_insight, performance_start_trace, performance_stop_trace |
性能追踪和优化分析 |
| Network (网络分析) | 2 | get_network_request, list_network_requests |
网络请求监控和分析 |
| Debugging (调试工具) | 5 | evaluate_script, get_console_message, list_console_messages, take_screenshot, take_snapshot |
页面调试和信息获取 |
| 总计 | 26 | - | - |
使用 chrome-devtools-mcp 优势
1. 传统 AI 开发流程：
开发者描述问题
↓
AI 生成代码
↓
开发者手动复制代码
↓
开发者手动保存文件
↓
开发者手动刷新浏览器
↓
开发者手动检查问题
↓
发现问题 → 开发者手动描述错误 → AI 再次生成 → 循环...痛点：
- 需要频繁手动操作
- 反馈循环慢（分钟级）
- 可能遗漏控制台错误、网络问题
- 开发者需要频繁切换上下文
2. 使用 Chrome DevTools MCP 后的工作流：
开发者描述问题
↓
AI 生成代码
↓
AI 自动打开浏览器 → 自动导航
↓
AI 自动检查控制台错误
↓
AI 自动检查网络请求
↓
AI 自动检查性能指标
↓
发现问题 → AI 自动分析 → AI 自动修复 → 自动验证 → 完成优势：
- 全自动化，无需手动操作
- 实时反馈（秒级）
- 全面验证（控制台、网络、性能）
- AI 自主完成整个调试循环
Figma-mcp 配置
将下面代码添加到 mcp.json 配置文件中：
json
"Framelink Figma MCP": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=figd_xxx",
"--stdio"
]
},注意：figma-api-key 必须填写你自己账号的 key
获取您的 figma-api-key 方式：
在从 Figma 提取设计数据之前，您需要生成一个 Figma 访问令牌。
- 在 Figma 的主页上，点击左上角的个人资料图标，然后从下拉菜单中选择 Settings 。
- 在设置菜单中，选择 Security 卡。
- 向下滚动到 Personal access tokens 部分，然后单击 Generate new token 。
- 输入令牌名称，并确保您拥有对文件内容和开发资源的读取权限，然后单击 Generate token 。
具体步骤看下图演示：
Figma-mcp 使用
进入 figma 设计稿页面，选择想要 cursor 编写的页面区域的图层，如下图所示，点击鼠标右键，选择 Copy as ------》 Copy link to selection 。
将拷贝的 figma 链接粘贴到 cursor 对话框
prompt 可以加入 "获取当前设计稿数据" 修饰
使用 Figma MCP 的好处：
- AI 可以理解 Figma 设计结构
- 可以自动提取 Figma 文件中的布局、样式、组件信息
- 直接从设计源文件获取准确的设计参数
- 更加精准地还原设计稿设计
- 摆脱截图给 AI 不能准确还原设计稿的痛处
关于 figma-mcp 使用方式和更多介绍可查看下面文档：
https://www.framelink.ai/docs