拓寬AI Coding能力：前端 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 會參考這些樣板代碼來生成實際接口調用邏輯。

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。