MasterGo AI 不直接一键生成多尺寸 Web UI，而是通过可编辑画布+约束布局+响应式代码同步实现跨尺寸智能适配；先生成基准页面（如网页版首页），再通过拖拽画布边界自动响应缩放，最后导出带媒体查询或Flex/Grid的Vue/React响应式代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接“一键生成多尺寸 Web UI”，但它通过可编辑画布 + 约束布局 + 响应式代码同步三者结合，实现真正高效的跨尺寸适配——不是靠重复生成，而是生成一次后智能延展。
用 AI 生成一个基准页面（如 PC 或移动端）
在 AI 生成界面时，先明确目标设备类型：网页版、移动端或后台系统。例如输入：
- “设计一个健身器材电商网站首页，含顶部导航、轮播图、商品网格、底部版权栏”
- 勾选“网页版”模式，设置主题色、圆角、明暗模式等基础风格
- 点击“开始生成”，10 秒内输出高保真设计稿并插入可编辑画布
在画布中开启约束布局，拖拽即适配
生成的页面是矢量分层的，天然支持 MasterGo 的约束布局系统：
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
- 选中容器组件（如轮播图区域、商品列表），右侧属性面板开启“水平居中”“左右留白”“宽度自适应”等约束
- 拖动画布右边界，页面自动按约束规则响应缩放——手机端拉宽变平板，再拉宽变桌面版
- 文字、图标、间距等会保持比例协调，无需重画或重新生成
一键导出多端代码，结构已适配
完成画布调整后，直接导出代码，AI 会根据当前画布状态输出响应式实现：
- 选择 Vue/React 框架 + Ant Design 或 Element Plus 组件库
- 勾选“响应式适配”，生成的代码自带媒体查询或 Flex/Grid 布局逻辑
- HTML/CSS 默认使用 Tailwind CSS，天然支持断点控制（如
md:flex-row） - 开发可直接复用，不用再手动写@media或改布局结构
进阶技巧：批量生成不同尺寸版本
若需保留多个独立尺寸稿（如 PC 版、Pad 版、Mobile 版），可用复制+微调方式：
- 右键原页面 → “复制页面”，重命名为“PC_首页”“Pad_首页”
- 对副本使用 AI 局部修改指令，例如：“将导航栏改为横向排列”“把商品卡片从 2 列改为 4 列”
- 或上传同一张原型图，分别用“网页版”“平板版”“移动端”模式各生成一次，再统一约束对齐
