明确支持的响应式输出类型

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——作为前端实现时的明确依据