揭秘MCP：你不知道的隐藏玩法大盘点！

共计 3197 个字符，预计需要花费 8 分钟才能阅读完成。

如何在个人工作中应用模型上下文协议 MCP？请分享一些使用场景或实例。

你是否还在费力地将设计稿逐行转换成代码？是否考虑过，如何让人工智能理解你的设计意图，自动完成那些重复且乏味的编码任务？设计师与开发者之间的合作障碍真的无解吗？或许你已经听说过 MCP，但对它的功能和如何优化我们的工作流程仍感到困惑。

在今天的文章中，我们将重点介绍 MCP 中最具代表性的应用——Figma MCP，并提供一份详细的使用指南，帮助你快速掌握 MCP，从而轻松将任意设计稿转变为可运行的代码。

Figma MCP 是由 UI 设计软件 Figma 推出的模型上下文协议服务。对于首次接触的用户，MCP 可能显得陌生。为了更好地理解 Figma MCP，我们先来探讨一下——MCP 的定义。

MCP，即模型上下文协议，是由 Claude 的母公司 Anthropic 提出的一种开放标准协议。MCP 的诞生源于这样一个背景：尽管人工智能具有高度智能，但它们如同被困在笼子里的鸟，仅能依赖训练期间所学知识来回答问题，无法与外界进行有效互动。

MCP 的出现正是为了解决这一局限。它制定了一套统一的通信规则，使得任何遵循 MCP 协议的 AI 模型都能够以相同的方式与外部世界进行交流。

作为一款在海外广受欢迎的 UI 设计工具，Figma 在 MCP 推出后迅速跟进，推出了 Figma MCP 服务器。Figma MCP 使得 AI 编程工具（如 Cursor、VS Code 内置的 AI 插件等）能够直接“读取”和“理解”Figma 设计文件中的图层、组件、样式和布局信息，从而实现将设计稿一键转换为前端代码。

在使用 Figma MCP 之前，需要先完成相关的配置。目前 Figma 提供两种连接方式——本地 MCP 服务器和远程 MCP 服务器，各有优势，用户可以根据自身需求做出选择。

本地 MCP 服务器通过 Figma 桌面应用运行，适合大多数个人开发者或小型团队，是体验 MCP 功能的最快途径。

环境准备：下载并安装 Figma 桌面应用程序。如已安装，请确保应用为最新版本。

添加 Figma 插件：在 Figma 社区中搜索 Cursor Talk To Figma MCP Plugin 插件，并点击右侧按钮将其添加到 Figma 中。

远程 MCP 服务器是由 Figma 官方提供的托管服务，连接稳定，但使用门槛较高，主要适用于大型团队和企业用户。

订阅要求：使用远程 MCP 服务器时，需订阅 Figma 的 Professional、Organization 或 Enterprise 计划。

席位要求：你的账户必须为 Dev 或 Full 席位。

启用本地 MCP 服务器：打开 Figma 桌面应用，打开任意设计文件。然后，点击屏幕左上角的 Figma 菜单图标，依次选择“Preferences”（偏好设置）→“Enable local MCP server”（启用本地 MCP 服务器）。

无论是使用本地还是远程服务器，最后一步都是将 MCP 服务器地址配置到所选的 AI 编程工具中。以热门的 AI 代码编辑器 Cursor 为例：

打开 Cursor，进入设置界面。

找到与 MCP 相关的配置项，通常位于“Tools & MCP”或类似菜单下。

点击“New MCP Server”或“Add MCP Server”，将获得的 Figma MCP 服务器地址（本地或远程）粘贴进去，并为其命名（例如“Figma MCP”）。

保存配置后，成功连接后，Cursor 界面上通常会显示状态指示灯（例如右下角的小圆点变为绿色），这表示它已经准备好通过 MCP 与 Figma 进行通信。完成这些步骤后，你就可以体验从设计到前端代码的智能转换了。

虽然 Figma MCP 功能强大，但要完全体验，尤其是使用更稳定的远程服务器，需要订阅 Figma 的高级计划。这对许多个人设计师、开发者或预算有限的团队来说，确实是一项挑战。那么，是否有免费的替代方案呢？

在国内，有一款被誉为“中文版 Figma”的 新一代在线设计协作工具 Pixso，也推出了自己的 MCP 功能——Pixso MCP。最令人兴奋的是，Pixso MCP 目前完全免费！

作为国产软件，Pixso 不仅功能与 Figma 类似，同时在许多方面更符合国内用户的操作习惯。它提供全中文界面，服务器部署在国内，访问速度更快、更稳定，并提供私有化部署，可与公有版本隔离以实现更高的数据安全性。Pixso MCP 同样是一种本地服务，可以将 Pixso 设计稿的数据传递到 Cursor、Windsurf 等 AI 编程工具中。

接下来，我们将以 Pixso 与 Cursor 的联动为例，详细介绍如何通过 Pixso MCP 将设计稿一键转为前端代码：

环境准备：下载并安装 Pixso 桌面客户端，确保 Pixso 客户端版本不低于 2.2.0。

启动本地 MCP 服务器：在 Pixso 中打开你的设计文件，确保文件处于激活状态。点击左上角的 Pixso 菜单，选择“Pixso MCP”>“打开本地 MCP 服务器”。

配置 Cursor：打开 Cursor 编辑器，通过菜单进入“文件”>“首选项”>“Cursor Settings”，打开设置页面。在设置页面中，找到“Tools & MCP”配置项。

添加服务器地址：点击“New MCP Server”，在弹出的配置窗口中，将 Pixso MCP 的配置信息粘贴进去，可以将此连接命名为“Pixso MCP”，以便区分。

验证连接：保存配置后，检查 Cursor 右下角的状态指示灯。如果变为绿色，表明 Pixso MCP 已成功连接！

配置完成后，便可以直接将设计稿转换为代码：

选中并复制链接：回到 Pixso 设计画布，选择要生成代码的部分，可以是一个按钮、一张卡片，或整个页面，确定元素后，右击选中的图层，选择“复制 / 粘贴”>“复制链接”。
与 AI 进行对话：切换到 Cursor，打开 AI 对话面板。
发出指令：在对话框内，粘贴从 Pixso 复制的图层链接，并用自然语言向 AI 下达需求。例如，你可以说：“将此设计稿转换为相应的前端代码。”

几秒钟内，Cursor 将通过 Pixso MCP 协议向 Pixso“询问”设计稿的详细信息，AI 会根据得到的结构、样式和颜色等数据，生成完整且可运行的前端代码。Pixso MCP 与 Cursor 的联动过程顺畅无比，真正实现了从设计稿到代码的一键转换，大幅提升了设计师与开发者的工作效率！