AI应用探索及实践:UI设计稿转前端代码

多客科技

作者：微信文章
    AI编程工具(Trae/Cursor) 与 MasterGo MCP 的集成通过标准化协议实现了设计到开发的高效协作。    MCP协议（MasterGo ContextProtocol）将设计稿中的图层、组件和样式转化为结构化数据，支持实时同步和智能代码生成。‌    文末有干活分享~~ 一定要看到最后哦~~本次使用到工具：Trae + MasterGo MCP

Cursor + MasterGo MCP







流程：



前置条件

必须拥有 MasterGo 团队版及以上 的编辑席位或研发席位（个人免费版不支持）
1、获取 MasterGo 个人访问令牌（Token）
Mastergo官网：MasterGo 莫高设计 - AI 时代的数字界面生产平台



进入个人设置页



进入安全设置



生成令牌


2、在AI编程工具里设置MCP
打开Trae，进入设置



有2种方式添加，手工和市场；



选择市场，搜索“Mastergo”，点“+”



填入MasterGo 个人访问令牌（Token）



选择“Builder with MCP”



3、获取Mastergo的Layer ID 链接

进入MasterGo 设计稿页面，选择需要还原的设计图层，复制浏览器地址栏中的 URL；

注意：需要带 layer_id

比如：https://mastergo.com/file/178846766184153?fileOpenFrom=home&page_id=1%3A3106&layer_id=7%3A3702



4、一键还原设计稿代码

在AI编程工具下输入提示词：

<MasterGo地址> 根据mastergo的设计稿生成一个可单独打开的新的Vue页面，并写入到App.vue里，使用ant-design-vue组件库，严格按照设计稿的设计 100% 还原，响应式布局

示例：

https://mastergo.com/file/178848741719530?fileOpenFrom=home&page_id=M&layer_id=22%3A83821

根据mastergo的设计稿生成一个新的Vue页面，并写入到App.vue里，使用ant-design-vue组件库，严格按照设计稿的设计 100% 还原，响应式布局



5、效果查看

Mastergo上的设计稿



生成的





再次优化


6、Trea 和 Cursor的对比
原稿



Trea生成：



Cursor生成：






7、对比总结

生成的页面质量依赖：

1、设计稿的标准化；

2、模型的差异；

3、提示词；

8、后续的规划及方向

基于设计工具的MCP接口实现，有一个问题：强依赖第三方设计平台；

1、设计稿设计的标准制定；

2、后续需要解决的点；

组件私有；

    1、代码转换工具

    2、框架适配

    3、模型训练

代码结构；

代码质量；

规范驱动开发（Spec-Driven Development, SDD）

另一种尝试：

多模态：基于图片生成代码；- 模型有要求

结果：对于简单页面效果尚可，但复杂页面还是有很大差距；


模型在进步，可能明天的效果会是质的改变；





看文字太累的话，可以看视频号配套内容：