粤ICP备17114055号
微信扫码
添加专属顾问
支持私有化部署
我要投稿
AI自动化编码时代来临，Cursor与Figma集成让UI设计更高效。 核心内容： 1. 如何安装Figma MCP并获取Figma key 2. 启动Figma MCP服务及Cursor配置方法 3. 使用Cursor自动编码UI设计，并探讨MCP的商业前景与未来发展方向
今天分享主题，将Cursor 与 Figma 集成，当你在Figma设计好的UI，不再需要手戳代码了，而是让AI自动编码。
1、第一步：安装 Figma MCP
首先到 GitHub克隆Figma-Context-MCP到本地，并且把“.env.example” 复制一份，命名为“.env”，这里需要把你的 Figma 的 key 填写进来。
GitHub地址：https://github.com/GLips/Figma-Context-MCP
获取，figma key 直接到官网，点击：头像 — 设置 — 安全，创建一个新的 token，就可以获取了。
Figma官网：https://www.figma.com/
2、启动Figma MCP 服务
进入 Figma 根目录下，执行启动命令： npm run dev
成功的话，就会看到 3333端口已经跑起来了
3、打开 Cursor
点击cursor 设置，选择MCP，添加配置文件
cursor推荐mcp.json 文件进行配置
当然，这种方式也是OK的
确保你的 Figma 服务运行，添加成功如下
4、使用方式
打开 Figma 设计好的UI，单击右键，复制它的链接。
在cursor的composer模式下，粘贴figma链接，并要求对其执行操作。
这时，会触发get file工具，这时需要注意的是，实时盯着它，手动来确认每一步的执行。
更让人堪忧的是，MCP服务不稳定，经常断开，效果可能不尽人意，需要多次的尝试。
也欢迎各位，分享自己的经验和体验。
虽然，效果可能不是那么好，需要多次调试，才能达到最终满意效果。
但它是个非常有价值的工具，可以简化了开发流程，提高了准确性。
未来商业价值，企业也会有MCP私有化服务的需求，MCP算是加速了Agent 的到来，前景更加广阔。
官方未来定位是弄成 Registry，类似微服务体系，如服务注册、发现、路由等。
可到了解这个项目 https://github.com/ARadRareness/mcp-registry
它是用来管理和协调多个 MCP 服务器，提供：
MCP 服务器的集中注册
动态端口分配
已注册服务器的运行状况监控
跨所有已注册的服务器统一访问工具
53AI，企业落地大模型首选服务商
产品：场景落地咨询+大模型应用平台+行业解决方案
承诺：免费场景POC验证，效果验证后签署服务协议。零风险落地应用大模型，已交付160+中大型企业
2025-04-25
国内首个云电脑 MCP！人人都能搞个 Manus？
2025-04-25
扣子，无限生产海量 MCP
2025-04-25
产品经理有福了：利用AI直接生成原型图&UI设计图
2025-04-24
方案 | 基于本地大模型开发CAD智能助手
2025-04-24
Fellou AI浏览器体验报告，它是未来AI应用的雏形
2025-04-23
DeepSeek 32B随便跑,万元超值组装AI大模型电脑主机
2025-04-23
扣子空间：当「AI实习生」开始主动对齐，人机协作的「共生进化」和「双向奔赴」
2025-04-21
微软Playwright MCP 服务器为LLM提供浏览器自动化能力
2024-03-30
2024-05-09
2024-07-23
2024-07-07
2025-02-12
2024-07-01
2024-06-24
2024-06-23
2024-10-20
2024-06-08
2025-04-25
2025-04-21
2025-04-13
2025-04-11
2025-04-03
2025-03-30
2025-03-28
2025-03-26
回到顶部