Cursor + MCP的组合

什么是MCP（Model Context Protocol）？

截屏2025-03-27 15.54.23

MCP可以看作AI应用程序的USB-C接口和AI模型的插件。Anthropic受微软LSP(Language Service Protocol)启发，于2024年11月25日发布的模型上下文协议（ModelContextProtocol，MCP）。它的作用是让各种不同的外部服务通过标准化的接口与AI模型对接。开发者只需要开发一次MCP服务器，就可以让任何支持MCP的客户端使用，不用为每个客户端单独适配。

通俗理解：传统AI模型像一台不能插U盘的电脑，所有数据只能靠内置知识；而MCP相当于给这台电脑装上了USB接口，让它能连接数据库、邮件系统、设计工具等外部设备，实时获取最新数据并执行操作。

mcp官方介绍

如何构建mcp server

案例实践：Cursor + Figma-Context-MCP

Figma-Context-MCP：让 Cursor 可以访问 Figma 设计数据时，它比粘贴屏幕截图等其他方法更能准确地进行一次性设计还原。

配置Mcp的方式

新版本的 Cursor (0.47.8) 强制使用 JSON 格式配置文件进行 MCP 设置。

截屏2025-03-27 15.46.01

点击 + Add new global MCP server 后配置JSON文件来进行MCP Server的添加，MCP Server 一般支持两种方式的配置：一种是连接已存在的远程/本地MCP服务器，另一种是Command命令配置，如果是SSE的服务配置，需要你提前启动服务，如果是命令配置需要你本地安装对应语言的运行时（如Node.js 、Python等）

{
  "mcpServers": {
    "Figma-MCP": {
      "type": "sse",
      "url": "http://localhost:3333/sse"
    },
    "mcp-server-hotnews": {
      "command": "npx",
      "args": ["-y", "@wopal/mcp-server-hotnews"]
    },
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}

这个map.json 文件中的Figma-MCP与mcp-server-hotnews就分别是通过服务器配置的方式与Command命令配置的方式来进行配置的。下面通过在Cursor 中添加 Figma-Context-MCP 这个MCP Server的方式来提升前端开发效率的。

设置并获取figma的Personal access tokens

网页版figma路径为：Help and account-Account settings -Security中的Personal access tokens中

开通相关读写权限,生成Token，并保存。

本地启动MCP服务

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
yarn dlx figma-developer-mcp --figma-api-key=<your-figma-api-key>

# or
bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

本地运行命令后，服务启动输出：

Configuration:
- FIGMA_API_KEY: ****RYlL (source: cli)
- PORT: 3333 (source: default)

Initializing Figma MCP Server in HTTP mode on port 3333...
HTTP server listening on port 3333
SSE endpoint available at http://localhost:3333/sse
Message endpoint available at http://localhost:3333/messages
New SSE connection established

将下面的配置添加到Cursor 的mcp.json配置文件中

"Figma-MCP": {
    "type": "sse",
    "url": "http://localhost:3333/sse"
  },

如果是下面的状态表示设置成功：

截屏2025-03-27 16.23.21

可以看到这个Server 提供了两个函数一个是获取figma数据的get_figma_data还有一个是下载figma图片的download_figma_images方法。

如果你不想启动SSE服务，直接使用Commond的方式安装是最简单、最常用的方式

"mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }

在Curosr的Agent模式进行设计稿转换

截屏2025-03-27 16.28.26

选择对应的figma后，点击Copy link to selection ，在Cursor 的Agent模式下输入对应的的promot ，例如：https://www.figma.com/design/***帮我基于上面的设计稿生成一个Vue组件，需要注意模型运行后调研上面的Mcp方法，需要你手动去确认：

截屏2025-03-27 16.32.25