[Figma MCP] Cursor新功能开发前端页面 | 结果有点意外

UP主: Zhu的AI日记 · 时长: 7:34 · 🔗 B站原视频

发布: 2025-03-03 · 收录: 2025-03-25

标签: Cursor · MCP · Figma · AI编程 · 前端开发

MCP 是什么，以及它能解决什么问题

最近在 AI 领域有一个新的概念很火：MCP。它是由 Claude 的母公司在前不久推出的，一种可以让 AI 大模型访问外部资源的协议，从而进一步拓展 AI 模型的能力。

具体到日常开发，它有一个很有趣的应用场景：让 Cursor 访问 Figma 的设计图链接，直接获取设计的元数据，从而快速搭建前端页面。这个方法听起来很不错，但最终开发出来的效果如何，这期就来验证一下。

今天的视频会介绍如何用 MCP 开发一个微信小程序的前端页面。同时我也会用传统的、通过结构化思维描述前端页面需求的方式搭建同样的页面。你可以对比一下两者的结果，看看哪一种方式对快速搭建前端页面更有前途。

准备工作：更新 Cursor、获取 Figma API Key

要用 MCP 的方式获取 Figma 的设计资源，首先需要把 Cursor 更新到最新的 0.46 版本。

然后需要获取一个访问 Figma 元数据的 API key，这个 API key 可以在 Figma 的账号设置中免费获取。

搭建 Figma MCP 服务器并接入 Cursor

接下来需要搭建一个 Figma MCP 服务器。可以参考 Figma MCP 的 GitHub 页面，上面介绍了两种方式。我比较建议采用最简单的方式：只需要在终端中执行对应命令，把刚刚申请的 Figma API key 替换上去就可以。

当你看到终端显示 new SSE connection established，就说明 Figma 服务器已经搭建好了。这时需要把 SSE connection 的链接复制下来。

然后在 Cursor 的设置中打开 MCP 标签，创建一个新的 MCP server：填上名字，选择 SSE，把刚刚复制的链接填上即可。这样 Cursor 就连接上了 Figma 的 MCP 服务器。

获取 Figma 链接并让 Cursor 自动实现页面

接下来回到 Figma，找到要开发的设计页面，右键选择 Copy link to selection，复制 Figma 文件链接。

回到 Cursor，确保选择了 Agent 模式，模型用 Claude 的任意模型都可以，然后让 Cursor 根据 Figma 链接来实现前端页面。

在 Agent 执行任务的过程中，会尝试调用 MCP 服务器提供的工具来获取设计图的元数据。这时需要手动点击 Run tool 来执行，否则 Cursor 会一直停住不动。

这个过程中，你需要多次手动接受它的请求，确保它能顺利完成所有必要任务。

实测问题：连接不稳定导致结果“面目全非”

值得注意的是，Cursor 对 MCP 服务器的连接可能会不稳定，这会导致很多数据获取失败，最终开发出来的效果面目全非。

来看第一次的开发效果：因为中途 MCP 断过线，导致很多数据获取失败，所以最终结果令人很失望。

遇到这种情况，我建议回退到最初步骤重新执行，并且一直关注 MCP 服务器状态。如果有断线就立刻重新连接，确保不会影响 Cursor 获取数据。

第二次尝试：有所提升但仍不理想

经过第二轮尝试，开发结果有了提升。虽然比第一轮好了很多，但仍然有明显问题，而且底部导航也没有实现应有的交互。

从用 Figma MCP 开发前端页面的结果来看，效果并不是特别理想。虽然它看上去可以直接获取设计图资源，拿到更准确的元数据，但我认为从目前表现而言，它还不能以结构化的方式去理解和组织所获得的数据，所以结果离预期还有一定距离。

对比方案：用结构化方式描述前端需求

作为对比，我会用我一直倡导的方式：用结构化的方式描述前端需求，重新搭建这个页面，看看只用一次对话能做出什么效果。

如果你觉得视频内容对你有帮助，麻烦点赞并收藏。这不仅可以帮助频道持续发展，也能让平台算法知道你喜欢这一类视频，下一次你会更及时收到类似推送。

借助豆包生成结构化需求：一次对话还原效果更好

用结构化方式描述前端需求，可以让豆包来帮忙。我使用了一段我总结的前端设计“魔法提示词”，可以让豆包很准确地描述出设计图结构和 UI 元素的具体参数。

我只需要把其中关于图片的文字描述替换成实际图片地址，就能让 AI 非常准确地理解设计图。通过这种方式，Cursor 只用一轮对话就准确还原了想要的设计效果，而且连底部导航的交互也准确实现了。

通过以上对比，我个人还是认为，用结构化方式描述前端需求得到的结果更稳定，也更有利于和后端代码配合。

延伸内容与课程引导：完整视频与知识星球

如果你想更详细了解这节课的完整开发过程，我准备了一个接近一小时的完整视频。在这个版本里，你将了解搭建 MCP 服务器的详细过程、用豆包生成结构化前端需求的完整提示词，以及详细解析，确保即使没有开发经验也能听得懂，而且很容易跟随操作。

这个版本我已经上传到我的知识星球了。如果你想更系统学习 AI 开发，免费获得这个频道发布的所有付费课程以及一对一专业指导，欢迎加入我的知识星球。

如果你正在为 AI 时代的激烈竞争感到焦虑，担心自己会被淘汰，渴望快速掌握新技能来提高竞争力，也欢迎加入。在这里你将获得从零基础到高阶的各平台 AI 开发完整视频，免费畅享付费课程资源，并获得无限制的一对一答疑服务，实时解决学习与实践中的难题，告别迷茫，不走弯路。

我还通过大量实战开发总结了一系列 AI 纠错技巧，针对不同类型错误精准应对，让你在 AI 开发中游刃有余。我也将持续追踪并分享 AI 最新趋势，让你总能先人一步，挖掘潜在职业发展机会。

AI 已经彻底打破了技术门槛，让每一位曾经不懂编程的外行人都拥有了弯道超车的机会。拥抱 AI，你的未来将从今天开始改变。