Mac版Codex调用Figma插件失败需组件级扁平化重构：先通过Dev Mode的Layout Performance定位嵌套≥5的主组件，再手动或插件解构重建并规范命名；接着填写语义Description、禁用Constraints、运行CheckDesign校验；最后同步至Codex验证映射清单。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
Mac版Codex调用Figma插件时因图层嵌套过深触发解析失败、组件映射中断或Design→Code生成报错，必须对原始设计稿执行组件级扁平化重构，而非仅调整Auto Layout层级。
确认嵌套深度并定位问题组件
在Figma中打开目标文件，按CMD+Shift+D启用Dev Mode → 点击顶部「Layout Performance」→ 切换至「Nested Auto Layout」视图。该面板会以红色高亮所有嵌套深度≥5的Frame路径，【必须逐条点击高亮路径，在图层面板中确认其是否为Codex需映射的主组件（如Button、Card、Form）】。非主组件（如装饰性遮罩、标注图层）可直接删除，不参与后续重构。
解除冗余Frame包裹并重置组件结构
方法一：手动解构+重建组件（适用于≤10个关键组件）
1、选中问题组件最外层Frame → 按Shift+CMD+A关闭Auto Layout。
2、右键该Frame → 选择「Ungroup」，将所有子图层一次性提升至同级。
3、框选全部内容（含图标、文字、边框等）→ 按Shift+A重新启用Auto Layout，方向设为Vertical或Horizontal，间距统一设为8。
4、右键新生成的Frame → 「Create Component」，命名格式为ComponentType_Variant（例如Button_Primary），【命名中不得包含空格、斜杠或中文】。
通过本地 Codex 或 OpenClaw OAuth 凭证直接调用 ChatGPT/Codex Responses 的 image_generation 工具来生成或编辑光栅图像，然后保存
方法二：插件批量清洗（适用于≥20个组件）
1、安装「Layer Renamer Pro」插件 → 运行后设置「Max Nesting Depth」为3、「Naming Pattern」为{type}_{variant}。
2、勾选「Flatten Deep Frames」选项 → 点击「Apply」，插件自动合并深度＞3的中间Frame并重命名。
3、全选清洗后图层 → 右键「Create Components from Selection」，插件按语义前缀（Button_、Card_、Input_）自动分组创建组件实例。
校验组件属性与Codex兼容性
第一步：检查组件描述字段
双击任一组件进入编辑模式 → 在右侧属性栏底部找到「Description」输入框 → 填写标准语义标识，例如role="button" data-variant="primary"。这一步直接影响Codex生成代码时的HTML标签选择与Props注入。
第二步：禁用冲突Constraints
选中组件主Frame → 在Constraints区域将Horizontal与Vertical全部设为None → 关闭「Resize」联动开关。若未关闭，Codex可能误判为固定尺寸容器，生成带width/height内联样式的反模式代码。
第三步：运行CheckDesign校验
点击顶部菜单「Plugins」→「CheckDesign」→「Run Full Check」。等待扫描完成，重点修复标红项中的「Missing Semantic Name」与「Deep Nesting in Instance」两项，其余警告可忽略。
同步至Codex并验证映射结果
1、在Codex App中打开对应项目工作空间 → 点击左下角「Connect」→ 选择已重构的Figma文件。
2、等待状态栏显示「Connected & Synced」后，输入指令：“List all mapped components with their HTML tag and variant props”。
3、Codex将输出结构化清单，例如：
• Button_Primary → <button> + {variant: "primary", size: "md"}
• Card_Stats → <article> + {layout: "horizontal", hasShadow: true}
4、若某组件未出现在清单中，返回Figma检查其是否被隐藏、锁定或位于未启用的页面中。
