页面内容重叠主因是缺乏空间约束规则，需早期启用Auto Layout、设置Constraints及调整图层顺序，并用语义化提示词预防。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
咔片AI生成的页面内容重叠，不是因为AI“画错了”，而是生成结果未被赋予明确的空间约束规则——文字块、图标、数据图表等元素默认平铺在画布上，缺乏容器包裹、间距设定和层级控制，导致缩放、换行或内容增减时相互挤压覆盖。
立即启用容器级Auto Layout
选中当前页面最外层Frame（通常命名为“Slide”或“Page”），按 Shift + A 启用Auto Layout；方向设为Vertical（常规内容页）或Horizontal（横向信息流）；若页面含多个逻辑区块（如标题区+要点列表+底部CTA），需先将每个区块单独框选→右键「组合为Frame」→再对每个子Frame分别启用Auto Layout。
这一步必须做在编辑早期。不启用Auto Layout，后续所有微调都会失效——因为元素仍处于自由浮动状态，拖动后一缩放就回到原位重叠。
补全关键元素的Constraints
方法一：锁定文字与图标的相对位置
选中单个标题文字块，在右侧Constraints面板中，水平设为Left，垂直设为Top，关闭Stretch选项；图标类Vector图层同理，右键选择「Fix size」防止被拉伸变形。
方法二：让输入框/卡片类组件自适应宽度
选中需要响应内容变化的区域（如“售价2999元”文字块），Constraints设为Left & Right，并勾选“Resize to Fit”——这样当文案从“2999元”改为“限时特惠¥2,699”时，文字块会自动撑宽，不会溢出或挤压旁边图标。
注意：不要给所有元素都设Left & Right。纯装饰性线条、角标、悬浮按钮必须用Left + Top固定锚点，否则会随容器拉伸错位。
调整图层顺序模拟Z轴覆盖
第一步：打开左侧图层面板，找到视觉上应前置的元素（如高亮按钮、弹窗提示、焦点态图标）；
第二步：将其拖拽至其所在父Frame内所有其他图层的最上方；
第三步：若该元素需长期置顶（如带操作浮层的卡片），右键该图层→「放入新Frame」→再将这个新Frame整体拖至父容器图层序列顶端。
MasterGo系工具（包括咔片）没有z-index输入框，渲染顺序100%由图层面板上下位置决定。重叠问题有70%源于“该在前的图层被压在了下面”，而不是尺寸或位置错了。
用语义化提示词预防重叠再生
下次生成前，在提示词末尾追加一句硬性空间指令：
“所有模块独立占位，上下间距统一为24px，左右不重叠，图标与文字间保留12px间隙”；
避免使用“整齐排列”“合理分布”等模糊表述——AI会按默认堆叠逻辑处理，必然导致首屏重叠。
若原文含数据对比（如“Q2营收↑18%，Q3↑23%”），务必写明“用并列柱状图呈现，每根柱体宽度一致，标签不重叠”，否则AI可能把两组数字挤在同一行文字里。
