前言
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
运行一个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插件
安装成功后,提示socket连接成功的页面,安装插件成功,并且随机生成了一个渠道 channel: n29khroo
查看websocket端,看到figma客户端连接成功了
第四步 配置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包的工具。
展示出工具,说明连接成功。在看socket端日志也有客户端连接的日志
第五步 在cursor对话
1、在figma页面找到channel ,进行连接 2、直接输入对话内容,开始生成
第六步 查看效果图
从0开始创建原型图,效果不太好,但总归流程走通了。