怎么把设计稿转为前端代码？Cursor + MCP来帮你！

如果要说AI领域炙手可热的前沿术语，MCP毫无疑问有一席之地。但对大部分人而言，因缺乏接触或使用MCP的实际场景，对MCP可能带来的裨益，又无从说起。

不过，随着不同领域对MCP的深入探索，MCP的应用场景愈发清晰，一个典型的例子就是基于MCP驱动的“设计稿转代码”（Design to Code，简称D2C）技术，一出现就迅速成为行业关注的焦点。这个技术以MCP作为桥梁，串联起设计工具内置的D2C能力和AI编程工具，将设计师的创意直接转化为可执行的代码，且支持使用自然语言调整代码，从而大幅缩短产品开发周期，提升整体协作效率。

MCP（Model Context Protocol，模型上下文协议）是一种开放协议。通过MCP可以为LLM（大模型）提供一种标准化、安全、可扩展的框架，使LLM能够与外部工具或数据源进行交互。

简言之，MCP代表着一种全新的交互范式，旨在为AI应用提供标准化、安全且可扩展的框架，让LLM大语言模型能够更高效地与各类工具和数据源进行深度交互。你可以将MCP想象成AI代理的“通用接口”，它使得不同AI系统之间的数据交换和功能调用变得前所未有的便捷与流畅。

基于此，不少应用在遵循MCP协议的基础上，构建了自己的MCP服务，譬如国内具有代表性的一体化产品设计工具

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

通过Pixso MCP，你可以：

值得一提的是，

。

了解Pixso MCP之后，接下来为大家详细介绍，如何基于Pixso MCP和AI编程工具Cursor，将设计稿一键转为代码：

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

接下来，我们需要在Pixso与Cursor之间建立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的设计画布中，用鼠标选中你希望生成代码的任何一个部分，可以是一个小小的按钮，也可以是一个复杂的卡片组件，甚至是整个页面容器。

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

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

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

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

如果你也想体验

的高效协作方式，不妨打开最新的Pixso客户端，体验前沿AI工具的神奇魔力！

以上就是本次想和各位分享的所有内容，希望能帮到有需要的朋友。如果你有其他疑问，或是想进一步了解的内容，欢迎在下方的评论区留言，我们一起交流探讨。