说到AI领域最近特别火的词汇，MCP绝对是其中之一。不过，很多人对MCP可能只是一知半解，因为缺乏实际使用的经验，根本不知道它能带来哪些好处。
但是，随着各个领域对MCP的深入探索，相关的应用场景也逐渐明朗。比如，MCP驱动的“设计稿转代码”（Design to Code，简称D2C）技术一出现，就引起了广泛的关注。这项技术借助MCP，将设计工具里的D2C功能与AI编程工具连接起来，能够把设计师的想法直接转化为可执行的代码。而且还支持用自然语言对代码进行调整，这样一来，产品开发的周期就大大缩短，团队的协作效率也随之提升。
MCP是什么呢？
MCP（模型上下文协议）是一种开放式协议。它为大模型（LLM）提供了一个标准化、安全且可扩展的框架，帮助这些模型与外部工具或数据源进行互动。
简单来说，MCP代表了一种全新的交互方式，旨在为AI应用提供一个标准、安全且可扩展的框架，让大语言模型能更高效地与各种工具和数据源深入交互。可以把MCP看作是AI代理的“通用接口”，它让不同的AI系统之间的数据交换和功能调用变得非常方便。
基于MCP，很多应用也建立了自己的服务。例如，有人称“Pixso”为中文版Figma，它最近推出了本地MCP服务——Pixso MCP。这个服务可以把Pixso设计稿的数据传输到包含AI编程工具的本地IDE（像Cursor、VS Code、Windsurf等），智能化地生成前端代码，轻松实现设计到代码的转变。
通过Pixso MCP，你可以：
- 设计稿转代码：为选中的设计稿生成代码，实现设计与代码的无缝对接。
- 提取容器结构化数据：将对应的前端代码和图片数据直接发送到客户端。
值得注意的是，Pixso MCP功能仅在Pixso客户端中可用，且客户端版本需不低于2.2.0。
Pixso MCP
了解了Pixso MCP之后，接下来就给大家详细介绍一下，如何用Pixso MCP和AI编程工具Cursor，把设计稿一键转为代码：
如何使用Pixso MCP和Cursor把设计稿一键转为代码？① 环境准备与配置
要使用Pixso MCP，首先要确保你的Pixso桌面端版本至少是2.2.0。确认软件版本没问题后，在Pixso客户端打开你想转为代码的设计稿，保持这个设计文件处于激活状态。
② 打开本地Pixso MCP服务器
接下来，我们得在Pixso和Cursor之间建立MCP连接。点击Pixso设计文件左上角的设置，然后选择Pixso MCP > 打开本地MCP服务器。
然后，打开Cursor代码编辑器，点击左上角的文件，选择首选项 > Cursor Settings，进入Cursor的设置页面。
轻松设置Pixso MCP和Cursor，让设计更高效！
现在我们来设置Cursor。打开Cursor的设置页面，找到MCP服务器的配置选项，点击右边的“New MCP Server”按钮。这时，你就会看到一个新的配置页面，别忘了把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工具的神奇之处吧！
希望以上内容对你有所帮助！如果你有其他疑问，或者想了解更多，欢迎在评论区留言，我们一起聊聊！
