☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
需校准设备画板、启用垂直auto layout、激活device preview模式、清除硬编码样式、使用slots插槽机制。具体包括：一、将ai生成frame设为iphone 15 pro等移动设备并固定约束；二、子元素启用vertical auto layout并设合理间距；三、figma中开启device preview并用present on device同步；四、重置所有图层宽高和位置为auto；五、容器转组件后添加content-area slot绑定内容。
如果您在figma中使用ai生成原型后，通过mirror应用在手机端预览时出现元素错位、布局塌陷或尺寸失真等问题，则可能是由于ai生成的frame未正确绑定设备画板约束、auto layout层级缺失，或mirror同步时默认采用桌面视口而非移动设备框架所致。以下是解决此问题的步骤：
一、校准AI生成Frame的设备画板属性
Figma AI（如First Draft或Make）默认可能基于桌面画板（1440×900）生成内容，若未手动指定移动端画板，Mirror将按原始尺寸缩放渲染，导致视觉错位。需强制将生成结果嵌套于标准移动设备Frame中。
1、选中AI生成的主Frame，在右侧属性栏点击“Change device”按钮。
2、从设备列表中选择目标机型，例如iPhone 15 Pro (393×852)或Pixel 7 (412×915)，确保“Fit to screen”选项已启用。
3、检查该Frame的Constraints设置：顶部与左侧均设为“Fixed”，宽度与高度设为“Fixed”，禁用“Stretch”行为。
二、为子元素启用垂直堆叠Auto Layout并锁定间距
AI生成的组件常缺乏响应式约束逻辑，尤其在手机小屏下易因文字换行、图标缩放或图片裁剪引发错位。通过垂直堆叠Auto Layout可强制子元素按顺序流式排列，避免绝对定位偏移。
1、双击进入AI生成的主Frame，全选所有直接子图层（如Header、Card、Button等）。
2、右键选择“Add Auto Layout”，或按快捷键Shift+A。
3、在右侧属性面板中，将方向设为“Vertical”，内边距设为“16px”，子元素间距设为“12px”，勾选“Padding top/bottom”以保留呼吸感。
4、对每个子Frame单独检查Constraints：顶部设为“Top”，左侧设为“Left”，宽度设为“Fill Container”，高度设为“Fixed”或“Hug Contents”。
三、在Mirror中手动切换设备框架模式
Mirror应用默认同步Figma当前画布视图，若画布未激活设备框架视图或未启用“Device Preview”模式，手机端将显示未适配的原始布局。必须在Figma编辑器内主动触发设备帧同步。
1、确保AI生成的Frame已置于一个独立页面，并被命名为“Mobile-Prototype”或类似明确标识名称。
2、点击Figma顶部工具栏的View → Device Preview → iPhone 15 Pro，激活设备模拟器。
3、打开手机上的Mirror应用，确认已登录同一Figma账号，并在设备列表中选择对应项目。
4、在Figma中点击右上角Present → Present on Device，而非仅点击“Share”链接。
四、禁用AI生成中的非响应式样式覆盖
部分Figma AI插件（如Galileo AI或早期First Draft版本）会在生成时注入固定像素值（如width: 320px、margin-left: 48px），这些硬编码值会覆盖Auto Layout行为，导致Mirror无法动态适配不同屏幕密度。需批量清除冗余样式。
1、在Layers面板中，展开AI生成Frame的所有子节点，按住Cmd/Ctrl多选所有Text、Shape、Icon类图层。
2、在右侧属性栏中，找到“Width”和“X Position”字段，若显示为具体数值（如“320 px”“48 px”），点击右侧重置图标（↺）将其设为“Auto”或“Hug contents”。
3、对所有含“margin”“padding”“left”“top”等CSS类名的自定义属性，右键选择“Remove custom property”。
五、使用Slots插槽机制绑定动态内容容器
当AI生成的卡片、列表或表单需在手机端保持内容区域弹性伸缩时，若仅依赖Auto Layout而未声明内容插入点，Mirror预览中可能出现空白溢出或截断。Slots插槽可显式定义内容填充边界，确保设备帧内渲染可控。
1、选中需承载动态内容的容器Frame（如“Task-List”或“Product-Carousel”）。
2、右键选择“Convert to Component”，再点击右下角“Edit Properties”按钮。
3、在弹出面板中点击“+ Add slot”，命名为“content-area”，类型设为“Frame”，约束设为“Top/Left/Right”。
4、将AI生成的实际内容图层拖入该slot区域内，Figma将自动建立绑定关系，Mirror同步时将严格按slot边界渲染。
