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 MCPPixso是新一代的产品设计工具，内置原型、设计和白板三大功能模块，覆盖产品设计的用研、原型、设计和交付全流程。
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会帮你把设计和开发环节一气呵成，生成结果还能直接用于项目落地。
以上就是本次想和各位分享的所有内容，希望能帮到有需要的朋友。