Cursor MCP实战之还原Figma设计稿
MCP 是什么？
MCP（Model Context Protocol，模型上下文协议）是由 Anthropic 在 2024 年底推出的一种开放协议，旨在通过标准化接口实现大语言模型（LLM）与外部数据源及工具的无缝集成。其核心采用客户端 - 服务器架构，客户端（如 AI 驱动的 IDE、聊天机器人）可通过协议发现并调用本地或远程的 MCP 服务器（如文件系统工具、GitHub 接口等），LLM 在推理过程中自主判断是否需要调用工具，再由服务器执行具体操作并将结果返回给模型，形成动态交互的工作流。该协议通过统一标准化的工具调用方式，解决了传统 AI 应用开发中碎片化 Agent 集成的问题，类似 USB-C 接口统一设备连接。[1]
简单地来说，MCP 赋予了 LLMs 进行标准化调用工具及获取数据的能力，由于是标准化协议，所有基于 MCP 实现的工具（Server）都可以被 MCP 客户端（如 Cursor、windsurf 这类 IDE）进行调用，其作用很类似当年微软提出的 LSP（该协议使得同一个编程语言 Server 能够在实现了 LSP 协议的客户端进行调用，大大地提高了 IDE 之间的编程语言插件复用效率）。同样地，由于 MCP 的存在，目前扩展 LLMs 能力的开发流程变得统一起来，因此尽管该协议目前（2025-03）才刚提出几个月，社区就已经实现了大量的基于 MCP 的工具，且该协议目前由 Anthropic 主推（这家公司的模型大家应该都不陌生吧，旗下的 Claude 就是目前编程模型界的 Top1），并得到了 Cursor、windsurf 和 Cline 等主流 AI IDE 和插件的支持，因此我很看好 MCP 的前景和发展潜力。
关于 MCP 的技术细节和架构，我就不赘述了，除了官方文档 [1:1]，感兴趣的推荐看看这篇文章——MCP 终极指南。
目前社区涌现出了很多优秀的 MCP server，有一些汇总的清单可以进行索引：
- modelcontextprotocol/servers: Model Context Protocol Servers ：MCP 官方推荐名单
- MCP Servers ：包括 Server 和 Client
- MCP Servers for Cursor：Cursor 官方推荐名单
- punkpeye/awesome-mcp-servers: A collection of MCP servers.：awesome 是开源社区传统习俗了，收录名单比较全
按照这种发展速度，我觉得 AI IDE 里迟早有一天会出现 MCP server market 的😂。
Figma-Context-MCP
之所以会有这篇文章，全是因为我在 MCP server 名单里看到了 Figma-Context-MCP 这个工具，我心想该不会现在真的可以直接从 Figma 文件还原 UI 稿了。于是我抱着试一试的心态准备用 Cursor 实现一个移动端页面，这一试给我吓到了，效果实在惊人。只能说念念不忘必有回响😅，前不久在用 Cursor 的时候我还在思考该怎么接入 UI 设计稿呢，这就解决了……
至于这个东西怎么用，特别简单，仅仅一句命令行就可以启动该 MCP server：
1 | npx figma-developer-mcp --figma-api-key=<your-figma-api-key> |
然后在 Cursor Settings 中添加该 Server 即可：
显示绿色即成功建立 SSE 连接：
从图中不难看出，该 Server 提供两个工具：
- get_figma_data：从提供的 Figma url 获取 UI 稿节点的结构化数据
- download_figma_images：下载 UI 稿中的图片资源到本地
实战部分
注：以下使用的模型为
Claude-3.7-sonnet，项目框架为Vue3
UI 稿
这是我随便从 Figma 社区找的一个公开设计稿，不难看出这是一个移动端购物结算页面，结构不算复杂，但手写代码总归需要花点时间的。
传统手工代码估时
各位可以试着给实现该页面估一个时，因为后面对比环节杀伤力很大🤓。
- 极其乐观档：1h，假设代码特别熟练，键盘敲出火花
- 疑似有点工贼档：4h，算给你面子了
- 日常摸鱼档：8h，这才是常态
仅一次提示完成的效果
很直白的提示词，贴出链接然后让 AI 实现页面并拆分组件，然后 Cursor 就一次性完了页面和组件的实现，得到效果如下：
当我看到这个效果的时候，说实话特别震惊，也特别兴奋；尽管这个实现有问题，样式和布局都出现了错误，但我个人认为这种代码效果已至少已经完成了 UI 稿的 60%，剩下的样式我觉得手动花个 10 分钟就差不多可以还原了。然而，Cursor 配合 Figma MCP server 还原到这种级别的效果仅仅花了两分钟左右😅！不仅如此，我们还得了合理拆分的组件，以及推测得到的页面交互逻辑实现（它真的，我哭死，推测得还蛮准的）：
在实现 Figma UI 稿的同时，如果把页面的产品交互文档也喂给 LLM，我相信连基本的交互逻辑也能帮你实现好，这已经不是简单的初始化模板的程度了。所以两分钟能实现到这种程度的细节，我们人类拿传统手工编写代码的模式怎么比得上这种效率呢，这速度都快提高一个数量级了😂；但好消息是这种大杀器工具可以为我们所用，不用白不用😎。
最终效果
秉承着能聊天就不写一行代码的原则，接下来我又花了一个多小时死磕 AI 帮我把样式尽可能 100% 地还原，这就是最后的效果：
可以看出，还存在一些细节问题，主要的问题就是 SVG 图标没有完全从 Figma 设计稿中进行复制，而是自行发挥进行生成了类似的，其他的细节问题就几乎很少了。
兴奋之余
尽管两分钟还原的 UI 稿细节很让人兴奋，但随后还原剩余的细节居然要花了一个多小时这一点怎么想都有点不太对劲，其实这也是目前很多 LLM 能力上的缺陷——即无法一次性充分实现特别细节的地方，因此需要耐心一点逐个地告诉它具体是哪个地方的细节不对，而目标的效果应该如何。当然，也有提示词方面需要迭代尝试和 LLM 对于结构化数据理解不够的问题，比如一开始 LLM 对于购物项这一部分的布局实现有问题，于是我试着给出具体节点的 Figma 结构让 UI 进行修复：
经过几次沟通尝试后，我发现 AI 嘴里说着理解了实现有错误要进行修改，但是仍然没有修复指出的 UI 实现问题——哪怕是指出具体错误在哪里，它好像没法只从文字和 Figma 结构数据修复此处的问题，于是乎我把这一部分的设计稿截图发给 AI 然后再让其进行修复，果然就成功了：
所以不难发现目前的 LLM 还无法只从 Figma 结构化数据中就还原所有的细节，需要结合设计稿图片提高正确率。
一个 Figma 小技巧
在上面提到的把具体节点的 Figma 结构提供给 AI 时，有时候会遇到提供的 Figma 设计稿并没有严格按照结构层级进行组织的情况，因为有的设计师习惯直接扁平化把所有的页面元素放在同一层级，比如：
左侧的购物项理论上就是一个完整的局部结构，但这个设计稿并没有完全按照层级的概念进行组织，因此这里没法直接复制成一个 Figma link：
而目前没有链接就没法让 Figma MCP 进行读取指定节点的结构数据，但我们可以通过选取该区域的所有元素，然后将其新建成一个 Group：
这样我们就得到了一个包含完整元素的局部结构，选中新建的 Group 就能复制该节点的 Figma 链接了：
切图仔又要回来了吗？
在看到现在的 Agent 配合 MCP 工具能够如此迅速的还原 Figma 设计稿的时候，我不禁想起了被戏称为“切图仔”的古早的前端程序员，他们中很多人的职责都包括了简单的设计 UI 稿，然后把 UI 稿进行切图，顺便还原成页面代码。
”历史是螺旋上升的“，我觉得以目前 AI 的发展速度，以后包干设计和前端的”切图仔“真的能重出江湖了🙈，全干工程师也不是不可能。
Figma-Context-MCP 常见问题
在 Cursor 中，默认调用 MCP 中工具时是需要人工批准的，所以如果一时间忘了批准，后面点击批准有概率出现请求超时导致 AI 没有获取到 Figma 数据（此时 AI 会重新申请一次调用工具，但貌似会丢失 Figma 的 node-id 参数）：
此时需要到 MCP 设置页面，点击右侧的刷新按钮重新建立 SSE 连接才能正常调用工具；除此之外，在聊天使用过程中，MCP 的 SSE 连接有一定概率在一定时间后自动断开，导致工具调用失败；根据 Local Server gets Body Timeout error · Issue #29 · GLips/Figma-Context-MCP 里面提到的方法，打开 Cursor 的 Yolo 模式（该模式不需要人工批准 AI 调用工具的申请，默认批准所有操作）这种情况会好一些。
基于 MCP 开发模式的思考
面向 Agent 开发
显然，在更通用和更智能的单一 Agent 出来之前，基于 MCP 的 Agent 能力扩展是很有效率的开发模式，每个 MCP server 实际上就是解决某个特定领域问题的高效工具，因此很契合实际业务的使用；只不过以前我们写这类工具是给人去使用的，但是 MCP server 是写给 Agent 去使用的。
最近正好看到一篇文章——别再为人编写代码——未来属于 AI Agents，我觉得里面提到的观点很有意思。目前 LLM 和 Agent 对于代码开发的介入越来越深，涉及的流程也越来越广，而且这个趋势肉眼可见的还在增长之中，我们真的有必要一定要让 AI 遵循以前由人定下来的开发规则吗？我认为以 MCP 的潜力，以后搞不好开发团队会出现一些专门写 MCP server 这类 Agent 工具的岗位，就类似现在在公司内部写基建的团队。
兼容模式
我能理解大多数的公司和开发团队都不太想把时间花在试错上，只想用一个相对成熟且稳定的解决方案；目前基于 Agent 的开发模式还不是很成熟，但使用 Agent 进行开发和传统的手工代码开发之间完全不是对立的，相反，由于目前 Agent 输出的代码完全是模仿人的规范和习惯，所以完全是一种进可攻退可守的方式，反正觉得 Agent 不行你自己上不就好了😂。
如何在还原 Figma 设计稿时使用已存在的业务组件？
更实际的使用场景应该是在一个老项目中使用 MCP 工具，进行 Figma 设计稿还原的同时还要求 LLM 使用已存在的业务组件或者项目使用的通用 UI 组件库。其实这个解决应该很简单，可以在提示词中加上诸如”尽可能地使用 components 文件夹下的组件和 xxx 库中的组件“的话语，不过既然有了 MCP，何不写一个专用的 MCP server 提供可用的组件列表到 LLM 上下文中呢😎。