MasterGo AI不直接生成网格系统，而是快速产出界面原型，后续需手动在设计稿中配置网格作为对齐辅助工具；AI生成后需先将页面区域转为容器、关闭自动布局，再添加对应类型的布局网格并设置参数。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 本身不直接生成“网格系统”，它负责快速产出界面原型；而网格系统是后续在设计稿中手动配置的对齐辅助工具。两者配合使用——AI先搭出结构，你再用容器+布局网格精准校准——这才是高效工作流。
AI生成原型后，立即添加网格系统的操作要点
- 必须先把AI生成的整个页面区域（比如画布上的主内容区）转为容器：选中该区域 → 按
Cmd/Ctrl + Shift + C - 若该容器已开启自动布局（常见于AI生成的卡片列表或导航栏），需先在右侧属性栏关闭「自动布局」，否则「布局网格」选项不可见
- 点击右侧「布局网格」→「+」号，即可添加第一层网格
针对不同用途，选对网格类型并设置关键参数
-
图标/按钮/小控件像素级对齐：添加「网格」类型 → 尺寸设为
4或8（推荐4，适配大多数图标与文字基线）→ 颜色用浅青#C5F1F9，避免干扰 -
网页/后台多栏布局：添加「栅格列」→ 列数填
12→ 槽宽（列间距）设16→ 偏移（左右边距）设24（注意：偏移值必须小于容器宽度一半，否则不显示） -
移动端单列+留白：同样用「栅格列」→ 列数
1→ 槽宽0→ 偏移设16或20，保证内容居中且有呼吸感
多层网格叠加，让复杂页面各司其职
- 一个容器可同时存在多个网格：例如外层用12列栅格控制整体分栏，内部商品卡片区再叠一层4×4网格，确保图标、价格标签、按钮全部严格对齐
- 每个网格可独立开关显隐（点击网格左侧眼睛图标），方便调试时切换参考
- 不同网格用不同颜色区分（如栅格列用灰
#E0E0E0，基础网格用青#C5F1F9），一眼识别作用范围
AI生成稿里快速启用网格的小技巧
- AI生成后，通常默认把页面主体放在一个大矩形内——直接选中这个矩形，转容器、关自动布局、加网格，三步完成
- 如果生成结果含多个逻辑区块（如头部+轮播+列表+底部），建议分别转为独立容器，各自配网格：头部用8px基础网格对齐logo和图标，列表区用12列栅格，底部导航用4列均匀分布
- 已放置的元素不会自动吸附，拖动靠近网格线时出现蓝色虚线和“吸附”提示，才真正对齐；可配合
Shift键微调位置
不复杂但容易忽略
