让 AI 直接”看到”Figma 设计稿：Cursor × Figma 桥接工具

每次做完设计稿，丢给 AI 写代码——然后发现它跑偏了、间距对不上、颜色对不上、字体差了三号。

不是你描述得不够清楚，是 AI 根本没看到你的 Figma。

cursor-talk-to-figma-mcp 解决的就是这个问题——它是一个 MCP（Model Context Protocol）服务器，把 Figma 直接接进了 Cursor 的上下文。设计稿里有什么，AI 看到的就是什么，不用靠截图、靠口述、靠”大概差不多就行”。

它到底能做什么

不是简单的”读取设计稿信息”就完了。这个 MCP 打通之后，Cursor 可以：

读：拿到 Figma 文档里任意节点的名字、样式、布局、颜色、字体、图层结构。

改：直接在 Figma 里创建和修改元素——矩形、文本、Frame，应用填充色、描边色、圆角，一句话的事。

执行：还能在 Figma 里跑任意 JavaScript 代码，设计自动化工作流直接打通。

批量操作：批量替换文本内容、批量更新组件实例的覆盖属性，省去手动操作 Figma 的重复劳动。

怎么装

MCP 生态的好处就是标准统一、安装简单：

# 在 Cursor 的 MCP 设置里加这个服务器地址
npx @modelcontextprotocol/server-figma <你的Figma访问令牌>

或者，如果你用的是 Smithery 生态，也可以直接搜 cursor-talk-to-figma 一键安装。Figma 那边只需要装一个官方插件做 WebSocket 桥接就好了，全程不需要写代码。

什么场景用得上

设计转代码最准的一次：让 Cursor 读完 Figma 的设计规范，再让它写代码——出来的结果跟设计稿差得最少。

批量改设计：比如设计系统里改了主色，所有用了这个颜色的组件实例覆盖属性，一句话让它批量更新，不用一个一个手动改。

设计自动化：把 Figma 里的某个流程标注，变成 FigJam 连接线图——自动生成流程图，不用手动画。

为什么说它是”混搭玩法”

Cursor 是代码编辑器，Figma 是设计工具——两个完全独立的生态，用 MCP 这个协议桥接在一起，就变成了一个新的玩法：设计稿直接变成 AI 的执行上下文。

不需要中间格式转换，不需要设计师导出、工程师导入，AI 直接在设计稿上做事情。这个思路在 2026 年的 AI 编程工具里开始大量出现——把设计、代码、文档之间的边界用协议层打通，而不是靠人力转译。

GitHub Stars 7k，MIT 协议，维护活跃，2026 年 7 月还有更新。对于需要 AI 编程和设计稿无缝衔接的团队，这个工具值得试试。

GitHub：https://github.com/relativek/cursor-talk-to-figma-mcp

GitHub: https://github.com/relativek/cursor-talk-to-figma-mcp