Cursor集成Figma Context MCP，设计稿直接生成代码

背景

最近小组想对AI编程最佳实践进行总结，然后在组内形成一套自己的最佳实践方式，如AI生成代码风格、使用公司相关规范约束AI等；刚好前端这边的任务落到我手上，为了能充分利用Cursor，开始研究前端有哪些可以利用Cursor提效的东西，刚好以前看到过有文章介绍过通过Figma设计稿直接生成代码的文章，就有了这篇文章

Figma Context Mcp简介

上面是Figma Context Mcp的介绍，简单说就是它通过MCP协议，为其他Ai Agent编辑器提供访问Figma设计稿的能力，还有个介绍视频：使用 Figma 设计数据在 Cursor 中构建 UI 的演示，感兴趣的可以看一下

项目地址：github.com/GLips/Figma…

官方文档

这个项目确实不错，但是文档就有点难言了...

网上最常见的接入方式

下面是它官网的接入说明：

只有一个MCP的配置，然后就没有其它任何说明了，网上文章大多数是把该项目拉下来，然后在本地启动，然后将启动的服务地址添加到Cursor的MCP配置中，但将项目拉取下来pnpm install的时候报如下错误：

错误的原因应该是Figma Context Mcp项目中package.json文件中的packageManager字段是手动写的，而不是corepack模块自动写入到package.json文件的，直接将该字段删除，再运行命令就可以正常启动了

Cursor MCP接入指南

文档地址：cursor.com/zh/docs/con… ，链接不能直接跳转到MCP服务器这里，需要自己找一下；找到之后搜索Figma就能筛选出该插件，如下图：

添加「Add to Cursor」浏览器就会弹窗唤起Cursor，会自动添加如下配置：

这种方式和网上常见的方式很相似，需要启动一个本地MCP服务，然后添加到Cursor MCP配置中，所以Cursor官网这里的接入指南其实也不完整，需要和上面的方式结合

如果是采用这两种方式集成的话，可以直接去网上找各种教程，太多了，这里讲另外一种方式

不手动在本地启动MCP的方式

这里以Mac电脑为例，如果是Window先去Figm Context Mcp README.md获取该MCP的配置，是就是上图Windows部分内容； 可以看到配置MCP的命令很简单：

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

就是使用npx运行了figma-developer-mcp命令，然后带上自己的figma access token；所以我们全局安装（在项目本地安装应该也可以，但因为这个不止在一个项目中使用，为了方便将其全局安装）figma-developer-mcp就行，然后该MCP就会启动

担心每个项目都会启动一个MCP服务？
这个确实是一个问题，但是我觉得作为一个开源的成熟项目，应该不至于没有考虑到这一点，暂时没有去看figma-developer-mcp实现和Cursor Mcp的详细信息，后面有时间深究一下吧！

如果MCP下面显示小绿点，那恭喜你成功添加Figma MCP到Cursor，接下来好好感受它给前端带来的提效吧！

获取Figma个人Access Token

1. 打开Figma Desktop App，切到home Tab，打开Settings

2. 切到Securtiy Tab，滚动到Person Access Tokens部分，生成个人Token（建议按照最小权限原则给该Token分配权限）

使用

然后就可以直接在cursor使用cmd+i唤起Ai对话框，将Figma设计稿的链接丢给他，让它给你实现就行，如果能够正常生成代码，那恭喜你以后可以直接使用设计师给的设计稿生成代码了，只要设计师没有偷懒（如粘贴大量图片来实现效果），基本上对代码进行调整就可以使用了