哪些设计工具支持 MCP？3 个 AI 软件盘点汇总

MCP（模型上下文协议）火得一塌糊涂，如何在设计工作中应用 MCP 来提升效率，是许多设计师共同探讨的问题，深入研究，它还会引出另一个问题：哪些设计工具支持 MCP 协议？

纵观海内外主流的设计工具，体验下来发现，支持 MCP 的设计工具有 3 款——国外的 Figma，国内的 Pixso 和墨刀，这三款设计工具的共同之处在于，目前都维持在比较高频的更新，因此也及时跟进了当下最新的 AI 技术。

方便起见，下面给大家介绍在 Figma、Pixso 和墨刀中使用各自 MCP 的具体步骤，以便于你选择合适的工具来提升设计效率。

支持MCP的设计工具

01 Figma MCP

客观而言，Figma MCP 功能较为全面，提供两种服务器连接方式：

• 桌面 MCP 服务器（本地 MCP 服务器）：通过 Figma 桌面应用程序在本地运行

• 远程 MCP 服务器：直接连接到 Figma 的托管端点

桌面 MCP 服务器需要先在本地安装 Figma 客户端，远程 MCP 服务器则没有客户端的要求。

想基于 Figma MCP 实现设计驱动代码生成，还需要另一类重要的“参与者”——MCP 客户端，这类工具主要是各种 AI 编程工具或具备代码生成能力的 IDE（集成开发环境），如 Cursor、Claude Code、Windsurf、Codex、VS Code、Replit 等，具体可查看 Figma 的 MCP 目录页面。

如何使用 Figma MCP？

本地 MCP 服务器通过 Figma 的桌面应用程序运行，适合大多数个人开发者和小型团队，这也是体验 MCP 功能最快的方法。

准备好环境：下载并安装 Figma 桌面应用程序。如果你之前已经安装了 Figma，要确保应用是最新版本。

切换到研发模式：创建或打开一个 Figma 设计文件，在底部工具栏中，切换到研发模式（快捷键 Shift+D）。值得一提的是，Figma 研发模式仅限订阅用户使用，因此如果你使用的是免弗版，可考虑使用三方的插件 Cursor Talk To Figma MCP Plugin。

将 MCP 服务器连接到 MCP 客户端：MCP 客户端有多种选择，这里以炙手可热的 Cursor 为例。打开 Cursor，进入设置界面。找到和 MCP 相关的配置项，一般在“Tools & MCP”菜单下。

点击“Add MCP Server”，把 Figma MCP 服务器地址（本地或远程）粘贴进去，按下 Ctrl/Command+S，保存配置。

Figma 设计稿自动生成代码：成功连接后，Cursor 界面上一般会有状态指示灯（比如右下角的小圆点变成绿色），这表示它已经准备好通过 MCP 和 Figma 通信了。完成以上步骤后，你就可以开始体验从设计到前端代码的智能转换了。

Figma MCP 是海外设计工具的代表，鉴于它在海外占据较高的市场份额，它的不少功能都仅对订阅用户开放，导致免费用户无缘用上最新的功能。

不过幸运的是，除了 Figma，国内两款具有代表性的设计工具 Pixso 和墨刀，它们也推出了各自的 MCP 功能，可供用户免费使用和体验。

02 Pixso MCP

Pixso 是新一代的产品设计工具，内置原型、设计和白板三大功能模块，覆盖产品设计的用研、原型、设计和交付全流程。

Pixso MCP 可实现将 Pixso 设计稿数据传送至包含 AI 编程工具的本地 IDE（如 Cursor、VS Code、Windsurf 等）中，智能化生成前端代码，高效实现设计到代码的转变。

① 环境准备与配置

使用 Pixso MCP，需要确保 Pixso 桌面端版本不低于 2.2.0。在 Pixso 客户端打开想转为代码的设计稿，让打开的设计文件保持激活态。

② 打开本地 Pixso MCP 服务器

在打开的 Pixso 设计文件，点击左上角的文件菜单，选择 Pixso MCP > 打开本地 MCP 服务器。

接着打开 Cursor 代码编辑器，点击左上角的文件，选择首选项 > Cursor Settings，打开 Cursor 设置页面。

在打开的 Cursor 设置页面，找到 MCP 服务器的配置项 Tools & MCP。点击右侧的 New MCP Server，会打开 Cursor MCP 的配置页面，将 Pixso MCP 服务器的地址添加进去。

{  "mcpServers": {    "Pixso MCP": {      "url": "http://localhost:3667/mcp",      "headers":{}    }      }}

粘贴 Pixso 本地 MCP 服务器地址后，按下快捷键 Ctrl/Cmd+S，让 MCP 配置生效。

回到 Cursor 的 Tools & MCP 配置页，确认刚添加的 Pixso MCP 右下角的圆点为绿色，代表本地的 MCP 服务可正常运行。

③ Pixso MCP + Cursor 设计稿一键转代码

在 Pixso 的设计画布中，用鼠标选中你希望生成代码的任何一个部分，可以是一个小小的按钮，也可以是一个复杂的卡片组件，甚至是整个页面容器。

选中后右击鼠标，选择复制/粘贴为 > 复制链接，获取指向当前元素的链接。

切换到 Cursor 编辑器，打开 AI 面板，切换到 Agent 模式，在对话框粘贴刚复制的链接，并在后边输入一句简单的自然语言指令，例如“为当前选中的画板生成对应的 HTML 代码，将代码保存到 index.html，并将文件存放在电脑桌面。”

按下回车，Cursor 会通过 MCP 协议向 Pixso 询问选中图层的设计数据，Pixso MCP 则迅速响应，将结构化的 HTML 信息传递回去。几秒钟之内，一份高度还原设计稿、代码结构清晰的前端代码便呈现在你的编辑器中。

依托 Pixso 推出的 MCP 功能和 AI 编程工具 Cursor，从设计稿到可运行的前端代码，转化过程就在这一次简单的“选中”与“对话”之间完成了，对比过去漫长的产设研协作工作流，Pixso MCP + Cursor 这种新的方式简直是降维打击。

如果你也想体验设计稿一键转代码的高效协作方式，不妨打开最新的 Pixso 客户端，体验前沿 AI 工具的神奇魔力！

03 墨刀 MCP

墨刀是老牌的产品原型设计工具，墨刀最新推出的墨刀 MCP 把原型设计、交互生成能力通过 MCP 标准开放出来，工程师在日常的 AI 开发环境里就能直接调用，不再需要额外切换到设计软件，设计到代码一步到位。

① 获取并配置墨刀 Token

首先登录墨刀首页并进入工作台，或者直接前往墨刀 AI 页面。点击右上角的头像菜单，选择“令牌设置”，创建一个新的令牌（Token）。这个 Token 就是你在第三方工具中使用墨刀 MCP 功能的“通行证”，之后在 Cherry Studio 中会用到。

② 在 Cherry Studio 添加 MCP 服务器

打开 Cherry Studio 应用，进入 MCP 配置页面，点击“添加 MCP 服务器”。接着，选择从 JSON 导入的方式，然后粘贴墨刀官方提供的 MCP JSON 配置代码。完成后点击“保存”，并记得开启 MCP 开关，让系统正式加载配置。

③ 启用墨刀 MCP 功能

回到 Cherry Studio 的聊天界面，打开 MCP 功能开关。在工具列表中选择刚刚配置好的墨刀 MCP 作为当前使用的工具。这一步完成后，你就已经打通了 Cherry Studio 与墨刀之间的连接通道。

④ 在对话中触发 MCP 功能

在 Cherry Studio 的聊天窗口中，直接输入你的需求，AI 会自动理解你的语义，并判断是否需要调用墨刀 MCP 功能。整个过程无需手动干预，AI 会帮你把设计和开发环节一气呵成，生成结果还能直接用于项目落地。

以上就是本次想和各位分享的所有内容，希望能帮到有需要的朋友。