开篇介绍
D2C，design to code 是一个前端方面的一个大课题，前端方向一直都在思考如何针对这部分内容进行提效。目前市面上结合Cursor进行D2C形式的有多种，比如mastergo mcp \ figma mcp等。我们均做了尝试。接下来我展示其中四种形式，进行比较
这是设计稿：
利用设计稿截图-生成目标代码
流程描述： 把设计稿通过截图的形式，添加到与Agent对话中。然后让Agent根据图片内容生成页面。
效果如下：
结论：可以看出整体布局还行，样式还原度不高，低于50%
利用mastergomcp-生成目标代码
流程描述： 配置mastergomcp,然后把mastergo设计稿的地址添加到对话中去，要求使用mastergomcp生成页面。
效果如下：
结论：大家没有看错，生成的内容与设计稿的内容完全不匹配。背后原因是：mastergomcp有token大小限制，无法完整读取的设计稿DSL信息，导致 cursor自由发挥了。
利用蓝湖代码-生成目标代码
流程描述：蓝湖是可以把设计稿转换为代码下载到本地的。让cursor阅读这部分代码内容，基于当前项目技术栈进行还原
效果如下：
结论： 强烈依赖设计稿的图层，存在图层问题就很容易导致布局错乱
最佳方案-生成目标代码
流程描述：从利用蓝湖代码生成模板代码的方案来看，如果我们能解决图层问题，就可以极大程度的还原UI稿。我们可以利用即时设计js.design结合Codefun插件进行这部分图层优化操作（绝对不是为了给Codefun进行宣传哈）。
点击上传，CodeFun 就可以根据设计稿，进行图层信息的处理了。
然后我们把代码下载下来。然后和Agent进行对话：示例如下：
你是一名资深的前端架构师，先阅读 @code-网安-20250520012515 下的代码，并通过playwright-mcp访问@http://127.0.0.1:8080/pages/wangan__dinggao/wangan__dinggao.html 以及新开标签访问@http://localhost:5173;
要求：
1、参考当前项目技术栈把http://localhost:5173首页UI改为http://127.0.0.1:8080/pages/wangan__dinggao/wangan__dinggao.html的样式
2、通过sequentialthinking工具完成还原步骤规划，高度还原UI，并通过playwright-mcp工具完成UI还原度的对比，自测
3、页面用的图片资源在src/assets/images里面
最终效果还原度50%以上：
结语
我们从上面生成的效果对比，可以发现，当下觉得实现效果最好的CodeFun流程，虽然能帮我们实现80%的效果，但是无论从流程上来说还是效果来说还是有进步空间，我们会持续跟进优化
