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）
另一种尝试：
多模态：基于图片生成代码；- 模型有要求
结果：对于简单页面效果尚可，但复杂页面还是有很大差距；
模型在进步，可能明天的效果会是质的改变；
看文字太累的话，可以看视频号配套内容：
页:
[1]