让 AI 真正帮你开发：前端 MCP 实用技巧分享

前言

MCP 火了这么久，不少朋友已经开始写书、做教程，甚至搭建了各种 MCP 资源合集站。但今天我想换个角度，聊聊我在日常前端开发中真正用到的一些实用 MCP。这些都是经过实践筛选、能直接提升开发效率的工具，希望能对大家有所启发。

接下来，我会按照前端日常的几个典型工作场景，逐一介绍对应的 MCP 及使用方法。

Figma MCP

前端开发最常做的事情之一，就是还原设计稿。过去的做法通常是：左边打开 Figma，右边开 IDE，然后把 Figma Dev Mode 生成的代码"搬运"过来。有时候这些代码甚至不能直接用，开发效率自然不高。

后来大家开始尝试 D2C（Design to Code）工具，但随着 LLM 和 MCP 的出现，我们的 IDE 可以直接连接 Figma 的原始设计数据了。

参考我之前的文章，前端开发又幸福了，Cursor + Figma MCP 快速还原设计稿 - 掘金进行简单配置后，就能快速还原设计稿的整体布局。我建议在样式书写上使用 Tailwind，这对 AI 辅助生成代码也更加友好。

虽然 AI 目前还不能做到完全精准还原，但相比我以前用过的 D2C 工具生成的代码，AI 输出的样式更可维护 。以前 D2C 生成的代码常常充满了固定的 relative、absolute 定位，难以在项目中长期维护。

我相信，AI 精准生成前端代码只是时间问题，预计未来 1-2 年内就能实现。

值得一提的是，Figma 官方也发布了 MCP 版本：Guide to the Figma MCP server -- Figma Learn。不过我一直在用 GitHub 社区维护的 Figma MCP，体验很好，就没换官方版本。

Apifox MCP

在没有这个MCP之前，我都是用这样的方式联调接口代码的，参考我之前的文章，使用openapi这样的代码生成工具，然后AI再根据业务代码调整。借助代码生成与Cursor优化，让前端对接口更高效有了这个MCP就一步到位了。

配置 Apifox MCP 很简单，直接参考官方文档即可：Apifox MCP Server - Apifox 帮助文档。

配置完成后，你只需要对 AI 说明：

"通过 Apifox MCP 读取 /xxx 前缀的接口，生成相关代码，参考接口样板文件 @xxx.ts。"

为了让 AI 更好地学习接口写法，建议在项目里创建一个 api-example.ts 文件，将业务接口的 TypeScript 类型与请求示例都放进去。AI 会参考这些样板代码来生成实际接口调用逻辑。

ts 复制代码

import request from '@/utils/request.ts';

export type ApiResponse<TData = unknown> = {
  status: number;
  msg: string;
  code: number;
  data?: TData;
  failedReason?: string;
};

export type PageResponse<T> = {
  records: T[];
  total: number;
  page: number;
  pageSize: number;
};

// 使用泛型的API函数示例

// GET 请求示例
export const getUserList = () => {
  return request.get<ApiResponse<PageResponse<User>>>('/users');
};

// POST 请求示例
export const createUser = (data: CreateUserRequest) => {
  return request.post<ApiResponse<User>>('/users', data);
};

若公司前后端联调未使用Apifox的话，应该至少也有 swagger，可以使用 Swagger MCP试试，参考文章 🚀🚀🚀 告别复制粘贴，这个高效的 Vite 插件让我摸鱼🐟时间更充足了

Context7 MCP

Context7 MCP 的作用很简单：帮助 AI 更好地读取第三方库的文档。

在实际开发中，你可能会使用一些不太常用的 npm 包，或者最新版本的包接口已经更新了，而 AI 训练的数据里没有这些最新信息。这时，如果不使用 MCP，LLM 很容易出现"幻觉"，随意编写错误的代码。

使用 Context7 MCP，就能让 AI 获取最新的 API 文档，从而避免错误。

举个例子，我在项目中使用的组件库是 Arco Design。它不像 Ant Design 那么出名，有些组件的 props AI 可能会套用他印象中的组件库写法，这显然是错误的。

所以我每次都会让 AI 先通过 Context7 MCP 查看 Arco Design 的具体组件文档，再生成对应代码，这样输出才准确可靠。

文档链接：context7/docs/README.zh-CN.md

Chrome Devtool MCP

Chrome 官方也提供了 MCP，用来让 AI 直接读取浏览器控制台的数据 。

在本地调试时，你可能需要先登录 Chrome，然后在启动的实例中完成登录操作。配置好后，就可以让 AI 分析控制台日志、排查 bug，甚至进行性能分析，大大提升调试效率。

官方文档：适用于 AI 代理的 Chrome 开发者工具 (MCP)

举个例子，我之前遇到一些 React 重渲染问题，没用这个 MCP 前，AI 只能让我加一堆 console.log，然后把控制台输出复制给它分析。

现在直接告诉 AI 使用 Chrome DevTools MCP，它就能自己查看日志，分析问题，效率瞬间提升，爽歪歪。

结语

以上就是我在日常前端开发中经常使用的一些实用 MCP，希望对大家有所帮助。

它们可以显著提高开发效率、减少重复劳动，也让 AI 辅助开发真正发挥价值。