操作流程
1. 访问官网
https://mastergo.com/

个人或小企业可免费使用,大型企业或团队可考虑购买付费版。

2. 导入文件

选择导入类型(Figma、XD 或图片),并上传图片进行静态代码生成。

3. 进入设计编辑区
将图片添加到工作台,双击进入设计编辑区。

鼠标滑到图片上面 AI,点击 AI 生成界面,进入生成代码。

4. 选择终端与框架
点击 AI 生成界面,选择终端类型并再次上传图片,选择生成类型。


5. 开始生成
选择生成代码框架,点击'开始生成'。

6. 查看方案
生成三种方案供选择,点击切换到代码查看。

如不满意,可重新生成其他框架的代码。

7. 代码效果
生成的代码还原度很高,HTML、Vue、React 默认使用 tailwindcss 编写,UniApp 使用 rpx。如项目已使用 tailwindcss,则可直接使用;否则,可通过 CDN 方式引入。
tailwindcss 官网
8. 界面控制
AI 生成界面支持最小化和最大化操作。


扩展
Figma + Mastergo 开发模式
如果公司的 UI 是用 Figma 设计原型图的,可以导出那张原型图的链接,然后在 Mastergo 用链接的方式导入文件即可。
总结
使用 Mastergo 生成静态页面,结合 DeepSeek 或 Cursor 编写功能逻辑,可显著提高开发效率。但需注意,对于定制化页面或不支持 tailwindcss 的情况,可能需要手动实现。