cursor+figma-mcp-server实现LLM驱动设计UI原型图
本文介绍了如何利用AI编程软件Cursor和MCP技术实现文本到设计图的转换。作者通过Cursor-talk-to-figma-mcp项目,详细说明了在Mac和Windows系统下的配置流程,包括安装Bun工具、启动WebSocket服务、配置Figma插件等步骤。虽然最终生成的设计图效果不尽如人意,但成功验证了LLM借助MCPserver实现从文本到设计图的技术可行性。文章还对比了不同MCP服务
前言
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开始创建原型图,效果不太好,但总归流程走通了。
整个调用流程

如何学习大模型?
学习AI大模型是一个系统的过程,需要从基础开始,逐步深入到更高级的技术。
这里给大家精心整理了一份全面的AI大模型学习资源,包括:AI大模型全套学习路线图(从入门到实战)、精品AI大模型学习书籍手册、视频教程、实战学习、面试题等,资料免费分享!
这是一份大模型从零基础到进阶的学习路线大纲全览,小伙伴们记得点个收藏!

100套AI大模型商业化落地方案

大模型全套视频教程

200本大模型PDF书籍

👉学会后的收获:👈
• 基于大模型全栈工程实现(前端、后端、产品经理、设计、数据分析等),通过这门课可获得不同能力;
• 能够利用大模型解决相关实际项目需求: 大数据时代,越来越多的企业和机构需要处理海量数据,利用大模型技术可以更好地处理这些数据,提高数据分析和决策的准确性。因此,掌握大模型应用开发技能,可以让程序员更好地应对实际项目需求;
• 基于大模型和企业数据AI应用开发,实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能, 学会Fine-tuning垂直训练大模型(数据准备、数据蒸馏、大模型部署)一站式掌握;
• 能够完成时下热门大模型垂直领域模型训练能力,提高程序员的编码能力: 大模型应用开发需要掌握机器学习算法、深度学习框架等技术,这些技术的掌握可以提高程序员的编码能力和分析能力,让程序员更加熟练地编写高质量的代码。
LLM面试题合集

大模型产品经理资源合集

大模型项目实战合集

😝有需要的小伙伴,可以扫描下方二v码免费领取【保证100%免费】🆓
更多推荐



所有评论(0)