mastergo ai 不直接生成响应式代码，但能高效产出多端界面设计稿，结合自动布局与设计系统实现视觉响应式效果；支持网页、移动端、平板端不同画布尺寸，需手动启用自动布局并复用组件以确保一致性，最终通过标注、代码插件和约束参数文档交付开发。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
明确支持的响应式输出类型
MasterGo AI 当前支持按设备类型生成不同画布尺寸的设计图，包括：
- 网页版：默认生成 1920px 宽度（桌面端），可手动缩放或新建不同宽度画布（如 1440px、1280px）
- 移动端：默认生成 375px × 667px 或 390px × 844px（iPhone SE / iPhone 14 Pro）
- 平板端：需手动新建 768px 或 1024px 宽画布，再用 AI 重新生成或复用组件调整
用自动布局构建响应式容器
AI 生成的界面是静态图层，要让它具备“响应内容变化”的能力，必须启用自动布局。操作路径：
- 选中导航栏、卡片列表、按钮组等容器 → 点击右侧属性面板中的「+ 自动布局」（或快捷键 Shift + A）
- 设置方向为水平（如导航菜单）或垂直（如商品列表），并设定合理间距（如 16px）和边距（如左右各 24px）
- 对文字、图标等子元素启用最小/最大宽度（例如标题设最小宽度 100px、最大宽度 600px），避免换行错位
- 利用换行布局处理网格类内容（如产品卡片墙），让其在不同宽度下自动折行
跨画布复用与一致性控制
真正提升响应式效率的不是单张图，而是组件级复用：
- 将 AI 生成的头部、页脚、按钮等保存为组件，并在桌面、平板、移动三个画布中分别引用
- 修改组件主实例时，所有画布中的实例同步更新，确保风格与结构一致
- 配合样式库统一字体、颜色、圆角等变量，切换暗色模式或品牌色时一键生效
交付给开发的实用方式
设计师无需写出 CSS 媒体查询，但可通过以下方式支撑前端实现响应式：
- 导出带标注的多尺寸设计稿（桌面/平板/手机），标注关键断点与间距逻辑
- 使用 MasterGo 的代码插件（如「前端代码生成」）提取 CSS Flex/Grid 布局建议
- 将自动布局容器的约束参数（如 padding: 24px, gap: 16px, flex-wrap: wrap）整理成文档，作为开发参考依据
