2026年前端开发又幸福了，Cursor + Figma MCP 快速还原设计稿

科技前沿 • 2026-04-07 14:17 • 阅读 0

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

更多AI编程内容加入:juejin.cn/aicoding

昨天朋友发给我一个开源项目 github.com/GLips/Figma… 是一个 Figma 的 MCP 服务。

MCP 是最近比较火的概念，你可能在推特经常能看到。我用自己的话理解，简单讲就是一个开放给 AI 应用访问外部某某平台，某某应用的一个接口，AI 可以通过 MCP 来获取到更具体的相关数据。

站内优秀文章更详细的可以看下这篇文章的介绍 juejin.cn/post/… (下图来源自互联网蛮形象的)

Cursor 不用介绍了吧。大名鼎鼎的 AI IDE Cursor 官网他支持绑定 MCP 服务，我使用的 0.45 版本，应该此版本以上都支持。在 Setting 中找到 MCP Server 进行添加配置。

我直接使用了下这个 Figma MCP + Cursor 感觉很不错，感恩开源。下面介绍下使用教程。

在 Figma 点击头像然后进入 Setting 先创建一个。

给予一些权限。我这里给可读可写了。可自行修改。应该是至少需要 Dev resources 可读的。

复制下来生成的然后在终端执行命令。

看到显示在本地 3333 端口启动服务了，就可以去 Cursor 链接了。

添加上亮小绿点就表示链接成功了。

2025.4.18 补充内容最新版本 cursor 点击添加 MCP 是直接写入 json 文件了如下

在 Figma 复制选中的模块

指定要写入的文件，并提出相对应的要求。他就开始写了。（好像开启 agent 模式效果更佳，我直接使用的 nomal，朋友用 nomal 读取不到 Figma）

最后的成品下方是设计稿，上方是他一次性就实现的界面。还是很赞的，调整下高度和边距就可以用了。

如果使用的时候没成功的话请 check 以下事项

使用 Figma MCP 对比之前我直接截图给 AI 进行还原，进一步提升了准确性，原先 claude 是需要识别图片，现在可以直接读取 Figma 的元数据了。实现的效果更好了。感恩 AI，让我摸鱼时间更多了，逃~ 😂

有更好用的 MCP 欢迎大家在评论区分享，ღ( ´･ᴗ･` )比心。