自动生成可编辑的产品高保真原型设计图通过Cursor+Figma MCP

如果你有想法，就让他们去干吧，先把产品做出来。

效果视频如下：（如果需要生成高保真产品原型，需要使用高级模型进行素材填充）

总体分以下为五步：

一：下载Figma插件

二：下载相关环境依赖

三：启动插件MCP服务

四：安装Figma桌面应用端

五：使用Cursor完成Figma设计稿

第一步：下载Figma插件

打开Github网站：https://github.com/

搜索：cursor-talk-to-figma-mcp插件。地址：https://github.com/grab/cursor-talk-to-figma-mcp

这里我们选择的是cursor-talk-to-figma-mcp插件，适合从0~1的设计元素生成，比较适合初期急需完成产品设计稿，或者没有太多设计基础的用户选择。

可以直接选择 Download ZIP ，也可以通过git命令来拉取项目，记得打开你的魔法。

git clone https://github.com/grab/cursor-talk-to-figma-mcp.git

下载好的项目结构如下：

可以简单阅读一下当前项目插件的Readme文件，如下图：

第二步：下载相关环境依赖

我们按Readme中的命令来安装Bun。

Bun是什么？

Bun 是一个新兴的JavaScript运行环境和构建工具，旨在提供更快、更现代的开发体验。

这里我通过Homebrew包管理来下载Bun

安装Bun

打开终端，并执行以下命令来添加Bun的官方tap并安装Bun：

brew tap oven-sh/bun
brew install bun

如果你的魔法无法正常执行这个命令，有个小技巧：

复制终端代理命令到当前终端窗口执行后，只有当前终端窗口会生效，然后再执行以上命令。

下载完成后，执行一下命令查看版本号，是否安装成功。

bun --version

第三步：启动插件MCP服务

上面的相关环境已经下载安装好后，我们可以启动Websocket服务：

bun socket

然后可以通过 bun setup 命令来启动（运行setup，这会在Cursor项目中安装MCP

）也可以再cursor中进行手动配置，我们选择在cursor中手动配置MCP服务。

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": [
        "cursor-talk-to-figma-mcp"
      ]
    }
  }
}

第四步：安装Figma桌面应用端

打开Figma的官网下载地址：https://www.figma.com/downloads/

选择你自己的桌面应用进行下载。

因为这个MCP插件只能在桌面应用中安装，所以需要下载对应的桌面端，不可以使用在线网页端。

打开桌面应用选择Design

在桌面端左侧的红色框下拉菜单中的箭头选择，从以下位置导入插件

按照路径【Plugins-Development-Import from manifest.json】

然后导入我们在下载好的项目结构中看到的manifest.json文件。

导入manifest.json文件后就可以看到如下图：

Cursor MCP Plugin(Development)插件，双击打开它。

双击打开后，你就能看到如下图中出现一个黑窗口

Cursor Talk To Figma Plugin - - - Connect Figma to Cursor AI using MCP

这里之前在执行打开websocket的命令bun socket的时候已经有端口号和渠道码了。这里输入对应的端口号：3055 ，点击Connect进行连接。

回到我们配置好MCP服务的Cursor中，查看MCP服务是否已经正常启动。如果没有正常启动，可以再使用命令进行启动MCP服务器

bunx cursor-talk-to-figma-mcp

如果已经正常连接了的话，我们可以使用cursor来对你桌面端的Figma进行连接。

第五步：使用Cursor完成Figma设计稿

通过Cursor的auto模型，输入对话：
"我现在要与Figma进行通信，让我连接到Figma频道"

如果没有渠道码可以去启动socket的终端窗口中查找"channel": "xxxxxx"相关字段，告诉Cursor模型。

剩下的就是自己的产品设计和cursor模型对话了，我这里使用的是auto模型，要求极简风格。（制作的视频放在前面了）

（大家可以使用高级模型，并且把相关的图片和素材准备一下都交给cursor，这样出来的就是高保真原型图了，然后通过Figma高保真设计稿，进行前端页面的代码编写和设计那是真的很舒服了）