MasterGo 入门：0-1直出产品 UI 界面
1 新建设计文件
进入 MasterGo 后台
a.
打开 MasterGo 官网并登录账号。
b.
进入后，你会看到类似「文件列表 / 项目列表」的首页区域，用来管理你的设计文件。
创建新文件
a.
在右上角看到 + 设计文件的按钮选项进行点击，或者选择导入 Figma 等文件。
b.
点击后，你会进入一个空白画布，这就是 MasterGo 的设计工作区。
认识基本界面区块
当你学会使用 Figma 后，MasterGo 的使用方式大同小异，主要分为几个区域：
💡
顶部工具栏：位于画布最上方，左侧是文件位置和文件名，中间是一排常用工具按钮（选择、区域/画板、形状、文本、注释、评论、插件选择和 AI 工具等），右侧是当前在线成员、分享入口以及画布缩放和预览控制功能入口。
左侧面板：主要分为图层和资源，当前停留在图层标签，可看到页面列表，以及该页面下所有图层的结构和层级。
中间画布区：具体绘制和排版的工作区，所有 Frame、组件和图形都会展示在这里。
右侧属性面板：用于查看和编辑选中对象的属性，例如大小、位置、对齐方式、背景填充、描边、圆角等。如果没有选中任何对象，会显示画布相关设置，如画布背景色、标签和导出选项。
3.2 创建你的第一个 Frame
在正式放东西之前，我们需要一个页面容器用来确定界面的边界和尺寸。这个容器在 MasterGo 里，通常叫 Frame。
步骤：
选择 Frame 工具
a.
在工具栏中找到 Frame / 画板工具，点击后可使用预设参数直接将内容创建到画板。
b.
或者使用快捷键（通常是 F，如果有差异以实际界面为准）。
在画布中拖出一个矩形区域
a.
拖出后，你会看到一个带选中框的区域。
重命名 Frame
a.
在左侧图层面板里找到这个 Frame。
b.
双击名称，把它改成你项目的名字，比如：My First Page，或者你自己随便起的页面名。
3.3 创建画板内容
有了容器，使用与 Figma 中我们已教过的类似方式，很容易可以得到相似的展示页面。（你可以尝试复制 Figma 画板中的文字元素，能够支持文本组件的直接粘贴导入）
值得注意的是 Auto Layout 功能行为稍微的不一致性，在 MasterGo 中，如果你想实现和 Figma 相似的按钮长度随着文字的长度变化，你需要先在对应矩形元素的基础上创建一个容器或组件，如图所示：
成功创建容器后，将按钮矩形和文字放到对应并列的容器中，再在右侧找到 Auto Layout 的按钮启用自动功能，即可成功实现按钮宽度能够随着文字长度变化的功能。
3.4 AI 生成页面
在 MasterGo 中，一个值得注意的有趣功能是 AI 生成页面。你可以用一句话或携带参考图，生成对应的 MasterGo 可编辑版组件，并得到可直接使用的代码。你可以使用中文或者英文直接输入需求，页面会根据需求返回结构清晰的页面排布文档，效果如下：
设计文档生成结束后，点击开始生成，稍作等待便能获取对应的实际网页效果：
此时你有两种操作选择：一是点击蓝色按钮将生成结果直接插入画布，二是点击代码预览功能，直接获取当前完整页面的代码，具体操作界面如下：
将结果插入画布后，你还能对网页的整体布局、元素细节（如字体、颜色、间距等）进行更精细的调整，直至最终效果完全符合你的预期。