cursor+figma-mcp-server实现LLM驱动设计UI原型图

1,506 阅读3分钟

前言

cursor 作为AI编程软件,不用不知道,能力恐怖如斯,程序员的福音,也是程序员的坟墓。基础功能代码补写、续写、代码优化重构、甚至可以从零生成一个可运行的项目。

MCP 也是最近火的出圈,想了解的可以看看官网文档,MCP意在为大模型LLM调用外部资源和工具实现一个统一的规范。有了MCP的加持,Agent智能体就可以动态快速的接入已有的工具。

MCP生态也是热火朝天,多个云平台推出直接可用的MCP server,当然也参差不齐,根据本人使用习惯优先级如下 Smithery > composio > cursor.so > mcp.so > 官方github 等等。针对不同平台(mac/linux 、Windows)命令可能也不同,大家了解配置中命令的代表意思就迎刃而解了。

# 效果体验

正文

说回正文,既然LLM借助MCP server能做很多事,那么如果提供了某个软件设计软件(figma、墨刀、Axure、PS)MCP server,是否直接借助LLM能实现从文本到设计图的过程,答案当然是可以的。于是我去上述MCP server提供商找了一圈,竟然这个想法现在大部分还没实现,我想喊话下软件提供商加油干。幸运的是还是被我找到了一个,但是实现效果还是差强人意。但是还是走通了整个流程。

FigMa MCP仓库

我们使用的是cursor-talk-to-figma-mcp github仓库,相关的操作流程也提供了。

流程

注意事项:

  • mac和Windows下面的流程会有差异
  • figma需要下载桌面端

第一步

先从上述仓库里拉取代码到本地,找到项目路径sr/cursor_mcp_plugin/mainfest.json的文件,后面需要在figma中配置

第二步 环境配置

按照上面项目的README.md文件流程添加环境配置(mac和Windows不同)

mac) 1、在终端运行以下指令

curl -fsSL https://bun.sh/install | bash

2、运行设置,这将同时在你的 Cursor 项目中安装 MCP

bun setup

3)启动 WebSocket 服务器,在项目的根路径下执行

bun socket

image.png 运行一个websocket服务,服务运行成功。

windows)1、通过 powershell 安装 bun

powershell -c "irm bun.sh/install.ps1|iex"

2、启动 websocket,在项目的根路径下执行

bun socket

此时开启了一个websocket服务,该服务作为cursor连接figma app的中间服务

第三步 安装FIgma桌面端和figma插件

Figma网页端,在左侧下拉菜单中点击 Get desktop app即可

安装figma插件

image.png 安装成功后,提示socket连接成功的页面,安装插件成功,并且随机生成了一个渠道 channel: n29khroo

image.png 查看websocket端,看到figma客户端连接成功了

image.png

第四步 配置cursor MCP server

两种配置方式,可能mac和windows不同。

项目中使用的是

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",

"args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

应该适用于mac

Windows中测试连接客户端失败。使用下面命令成功

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

bunx和npmx命令类似,都是运行项目中或者远程npm包的工具。

image.png

展示出工具,说明连接成功。在看socket端日志也有客户端连接的日志

image.png

第五步 在cursor对话

1、在figma页面找到channel ,进行连接 2、直接输入对话内容,开始生成

image.png

第六步 查看效果图

image.png 从0开始创建原型图,效果不太好,但总归流程走通了。

整个调用流程

image.png