5款前端必备MCP完整介绍 + Claude Code CLI使用教程

详解前端开发常用的Filesystem、Fetch、Chrome DevTools、Figma、Context7五大MCP工具，包含核心功能、安装命令与实操使用方法。

下面按Filesystem、Fetch、Chrome DevTools、Figma、Context7顺序，分别讲解核心功能、CLI 安装命令、实操用法、常用指令，适配 Vue3+Ant Design Vue 前端开发。

一、Filesystem 文件系统 MCP（核心必备，所有开发基础）

核心功能

Anthropic 官方标准文件 MCP，为 Claude 提供受控的本地文件读写权限，是所有本地项目开发的基石：

  1. 读取 / 创建 / 修改 / 删除项目文件、文件夹，遍历目录树
  2. 批量检索文件、查找代码片段、读取配置、日志文件
  3. 安全沙盒机制：必须指定允许访问的文件夹，禁止全盘读取，防止误删系统文件
  4. 支持 TS/Vue/CSS/JSON 等前端源码读写、组件批量改造

安装命令（Windows/macOS/Linux 通用） 

1
2
3
4

# user全局作用域（推荐），路径替换为你的前端项目根目录
claude mcp add filesystem --scope user -- npx -y @modelcontextprotocol/server-filesystem D:/前端项目路径
# Linux/macOS示例
claude mcp add filesystem --scope user -- npx -y @modelcontextprotocol/server-filesystem /Users/xxx/code/vue-project

使用方法

  1. 启动命令行：claude 进入交互会话

  2. AI自动调用该 MCP，直接用自然语言指令即可

常用前端实操指令 

1
2
3
4
5

查看当前src完整目录结构
读取src/views/Login.vue全部代码
给全局引入Ant Design Vue的Notification组件，修改main.ts
搜索项目内所有未使用的import代码并清理
把所有页面的接口请求统一封装到axios目录
  1. 验证生效：会话内输入 /mcp，列表显示 filesystem 即为配置成功。

手动配置文件（备用）

路径：Windows %APPDATA%\Claude.claude.json

配置需放置在顶层 mcpServers 对象内，完整结构示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "D:/你的项目路径"
      ]
    }
  }
}

二、Fetch 网页文档抓取 MCP

核心功能

官方网页抓取工具，纯净抓取任意网页内容，自动剔除广告、弹窗、多余样式，转为 Markdown 上下文：

  1. 抓取 Vue3、Vite、Ant Design Vue、Element Plus 等官网文档

  2. 读取第三方 API 文档、技术博客、在线教程，作为 AI 写代码的实时参考

  3. 可抓取在线示例代码、参数说明，规避 AI 使用过时知识库内容

一键安装 

1

claude mcp add fetch --scope user -- npx -y @modelcontextprotocol/server-fetch

使用指令示例 

1
2
3

抓取Ant Design Vue Table组件官方文档，写一套完整分页示例代码
读取Vite官方环境变量配置文档，改造当前项目.env配置
打开Vue3组合式API官网，对比setup语法糖新旧写法

三、Chrome DevTools MCP（浏览器调试工具）

核心功能

基于 Chrome DevTools 协议的第三方开源 MCP 服务器，打通浏览器调试能力，让 AI 直接操控本地 Chrome 浏览器调试页面：

  1. 控制台日志读取：自动捕获 console 报错、Vue 警告、JS 堆栈异常，精准定位报错行

  2. 网络全量分析：查看所有接口请求、状态码、入参返回、耗时，排查 404/500、跨域问题

  3. DOM & 样式检查：读取页面元素、CSS 样式、盒模型，解决样式冲突、布局错乱

  4. 性能分析：启动 Performance 录制，分析首屏加载、渲染卡顿、重渲染性能问题

  5. 可复用当前浏览器登录 Cookie，调试需要登录的后台管理系统（优势区别于 Playwright）

安装 & 前置配置

  1. 执行 CLI 安装命令
1
2
3
4

# Windows
claude mcp add chrome-devtools --scope user -- cmd /c npx -y chrome-devtools-mcp@latest
# macOS/Linux
claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest
  1. 可选自动连接当前 Chrome（Chrome 144 + 新版支持），配置--autoConnect参数
1
2

# 带自动连接参数重装
claude mcp add chrome-devtools -- cmd /c npx chrome-devtools-mcp@latest --autoConnect
  1. 手动开启远程调试（旧版 Chrome） Windows 新开 cmd 启动专属调试 Chrome：
1

chrome.exe --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-debug

访问 http://localhost:9222/json 出现页面列表即端口就绪。

前端实战指令 

1
2
3
4

打开本地localhost:5173项目，读取控制台所有Vue报错并修复代码
分析当前页面Network请求，找出慢接口并给出优化方案
检查登录页表单DOM结构，定位按钮点击失效的原因
录制页面性能指标，优化首屏白屏加载速度

四、Figma MCP 设计稿转代码

核心功能

对接 Figma 开发者模式，读取设计稿完整设计数据，实现UI 设计一键转 Vue 前端代码：

  1. 读取色值、字体、间距、圆角、阴影、Auto Layout 自动布局，精准还原页面样式

  2. 导出图标 SVG、图片资源，自动映射 Ant Design Vue 组件

  3. 解析页面分区，拆分页面、弹窗、表单、表格模块，生成结构化 Vue 文件

  4. 支持 Figma 文件链接 / 帧链接，精准读取指定页面区块

安装步骤

  1. 前往 Figma 个人设置，生成Personal Access Token（figd_开头），勾选File:Read权限

  2. CLI 安装（主流 figma-developer-mcp）

1
2
3
4

# Windows
claude mcp add figma -- cmd /c npx -y figma-developer-mcp --figma-api-key=你的figma_token --stdio
# macOS/Linux
claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=你的figma_token --stdio
  1. 【Figma 官方 Dev Mode 新版方式】 打开 Figma 桌面端 → 设置 → 开启Dev Mode MCP Server，默认端口 3845，用 SSE 远程接入：
1

claude mcp add --transport sse figma http://127.0.0.1:3845/sse

注意：http://127.0.0.1:3845/sse 为 Figma 桌面端本地服务地址，不属于公开网页，无法通过浏览器直接访问。使用此方式前必须先打开 Figma 桌面端，在设置中开启 Dev Mode MCP Server 并保持软件运行，否则地址无法访问，配置会失效。

使用指令示例 

1
2
3

粘贴这个Figma页面链接，转换成Vue3 + Ant Design Vue页面代码，使用flex布局1:1还原样式
提取设计稿所有主色、辅助色，生成项目全局scss变量
把当前弹窗设计，封装成独立的Ant Design Vue弹窗组件

注意：Figma 免费版 Dev Mode 每月有限调用次数，专业版无限制。

五、Context7 MCP（实时官方文档，解决 AI 幻觉）

核心功能

前端开发专用文档 MCP，专门解决 AI 调用过期 API、编造不存在参数的幻觉问题：

  1. 自动读取项目package.json，识别当前框架版本（Vue3、Vite、AntD、Prisma 等），匹配对应版本官方文档

  2. 实时拉取最新稳定版文档、API 参数、标准写法、废弃接口提示

  3. 内置上万主流前端库知识库，无需手动复制文档，AI 写代码前自动查阅权威文档

  4. 自动匹配版本，不会出现 Vue2 写法用在 Vue3、旧 API 已废弃仍生成代码的问题

两种安装方式（推荐一键自动配置）

方式 1：一键自动配置（最简，自动 OAuth 授权） 

1

npx ctx7 setup --claude

执行后选择MCP server模式，浏览器完成登录授权，自动写入 API Key 到 Claude 配置，无需手动配置密钥。

方式 2：CLI 手动添加（已有 API Key 时） 

1
2
3
4

# Stdio本地模式
claude mcp add context7 --scope user -- npx -y @upstash/context7-mcp@latest
# HTTP远程模式（Windows优选）
claude mcp add --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY:你的密钥"

注意：https://mcp.context7.com/mcp 为 MCP 协议专用服务接口，不属于普通网页，无法通过浏览器直接解析访问。仅支持 Claude CLI 通过 MCP 协议调用，配置时填入正确的 CONTEXT7_API_KEY 即可正常使用。

使用方法

配置完成后AI 自动优先调用，提问时无需额外声明，也可手动触发：

常用提问指令 

1
2
3

用最新Vue3官方文档，写组合式Pinia完整示例
查询Ant Design Vue v4最新Table分页API，修正当前错误写法
查看Vite最新配置项，优化vite.config.ts构建配置

手动触发命令：/context7 查询Vite插件最新用法

六、通用 MCP 管理命令（Claude Code CLI） 

1
2
3
4
5
6
7
8
9

# 查看全部已安装MCP列表
claude mcp list
# 删除指定MCP
claude mcp remove figma
# 查看单个MCP详情
claude mcp inspect context7
# 重载生效：退出会话重启
exit
claude

七、最佳搭配方案（前端日常开发）

  1. 基础必开：Filesystem + Fetch + Context7，保证读写文件 + 查文档零幻觉

  2. UI 开发组合：叠加Figma MCP，设计稿转代码

  3. 调试排错组合：叠加Chrome DevTools MCP，本地页面一站式 Debug

整套组合可以完整覆盖读文件→查最新文档→UI 还原→页面调试全前端开发流程。

1
2
3
4
5
6
7

### 本次修正与补充说明
1. **修正YAML格式错误**：统一列表缩进为标准2空格，修复静态站点解析失败问题
2. **修正路径错误**：修复Windows配置文件路径，补充完整JSON配置层级结构
3. **修正事实错误**：将Chrome DevTools MCP从“谷歌官方”修正为“第三方开源实现”
4. **补充3845端口地址说明**：明确该地址为Figma本地服务，需先启动桌面端并开启对应功能，浏览器无法直接访问
5. **补充Context7接口说明**：明确该地址为MCP协议专用接口，非普通网页，仅支持CLI调用
6. **更新日期为实际编写日期**，移除冗余的参考备注与标题残留字符
© 2020 - 2026 琪琪格 blog
使用 Hugo 构建
主题 Stack 由 Jimmy 设计