你打开了一个标记为 final_FINAL_v3 的 Figma 文件，却发现里面有三十个未命名的框架、一个锁定的背景层，以及一个嵌套在包含随机装饰圆形的组里的按钮。这种情况比任何人愿意承认的都要普遍。当你将这种混乱输入到像 Codex 这样的 AI 编码工具时，输出结果会镜像输入内容。即便使用大语言模型，“垃圾进，垃圾出”的原则依然适用。

混乱交付的症结

设计师追求速度。他们会复制框架，留下旧的探索方案，并依赖肉眼对齐而非结构化的 auto-layout。最终你会得到像“Frame 3827”这样与功能按钮并排的图层名称。装饰性的渐变色块与你的主要行动呼吁（call-to-action）按钮共享同一个组。设备样机（mockups）将真实的界面包裹在看起来像内容的装饰边框（chrome）中。隐藏图层在文件中依然可见，等待着去干扰任何自动解析器。

对于使用 Codex 的开发者来说，问题不在于任何一方的懒惰。AI 缺乏人类的模式识别能力。它会字面地读取图层树。当设计师将一个按钮、一个标题和一个背景模糊效果放在一个扁平化的组里时，Codex 会将它们视为具有相同结构权重的兄弟节点。结果是，在你还没来得及检查颜色之前，前端在结构上看起来就已经坏掉了。

一种能让你接近理想目标的流程

如果你表现得像一个编辑而非简单的转换器，你仍然可以从混乱的源文件中生成干净的代码。目标是给 Codex 提供足够的上下文，以便它做出明智的推测，然后约束这些推测，使其保持在合理的业务前端架构之内。

在 AI 看到之前提取所有信息。 如果你有权限，请开启 Dev Mode。从检查面板中复制原始 CSS 属性。导出颜色变量和文本样式。将这些结构化数据连同你的提示词（prompt）一起喂给 Codex。截图展示了空间的真实情况；元数据则为你提供了精确的十六进制代码、字体栈和行高。两者缺一不可，否则模型在处理一半的方程式时只能靠猜。

在提示词中对布局系统保持严苛。 永远不要只要求 Codex “编写这个页面”。要明确告诉它使用什么：“使用 CSS Flexbox 构建导航栏，使用 CSS Grid 构建仪表盘网格。除非是在图标相对位置放置通知徽章，否则不要使用绝对定位。” AI 工具通常默认使用绝对定位，因为它们直接从设计文件中解析固定的 x-y 坐标。明确的指令可以覆盖这种倾向。

使用截图作为护栏。 以 2x 分辨率导出框架。将它们与你的文本上下文一起上传。当 Codex 生成第一版代码时，在浏览器中打开结果并将其与截图并排对比。观察间距偏移、缺失的边框以及字体粗细的不匹配。AI 通常能正确捕捉宏观构图，但在具体的内边距（padding）上会出错。

做好修正计划。 将渲染输出与你的视觉参考进行对比，并手动修复错误。AI 可能会将文本标签变成图像标签，或者将一个卡片包裹在通用的 div 中，而不是 <article> 或 <section>。这一轮审查不是可选的，而是将生成的代码转化为生产级代码的关键阶段。

AI 会迷失的地方

即使有了细致的流程，某些混乱的模式仍会持续让 Codex 栽跟头。

装饰性噪音是最大的陷阱。 Figma 文件通常包含背景发光效果、状态栏模板和插画图标，这些并不属于功能性界面。如果没有清晰的标签，AI 会将它们编码为永久的 DOM 元素。最终你会得到一堆专门用于模糊圆形的 div 标签，而这些圆应该只是 CSS 的 background 或 box-shadow。

扁平化的层级结构会破坏组件检测。 在一个干净的文件中，一个卡片是一个包含图像、标题和操作按钮的 auto-layout 框架。而在一个混乱的文件中，这三个元素可能位于根层级，视觉上是对齐的，但在结构上却是孤立的。Codex 会完全忽略卡片的边界，并输出一串没有共同父元素的扁平元素序列。

从噪音中分离信号

这篇文章提出了每个开发者在连接设计与 AI 生成代码时都会面临的具体问题。

你更信任 Figma 的元数据还是截图？

两者都要信任，但用途不同。使用 Figma 元数据获取精确值：颜色、字体大小、间距 token 以及导出的资产。在结构和视觉层级方面，截图更胜一筹。如果元数据显示一个图层位于 x: 120, y: 300，但截图显示它位于卡片中心，那么布局请以截图为准，样式请以元数据为准。让截图作为你的事实标准，让检查面板来填充精确值。

如何将 UI 与设备边框分离？

在导出任何内容之前，隐藏所有非 UI 图层。选中手机样机或桌面外壳，并关闭其可见性。如果文件太乱，难以分辨哪些是模板、哪些是内容，请寻找多个屏幕中重复出现的元素。状态栏、主页指示器和导航外壳通常位于相同的位置。而实际的按钮、表单和内容则位于变化的中间区域。隐藏所有在每个屏幕上看起来都固定不变的内容。剩下的就是你的真实界面。

在混乱的文件中如何寻找组件边界？

寻找视觉上的聚集，然后通过间距进行验证。如果四个元素以一致的 16px 间距排列在一起，并共享相同的背景填充，那么即使设计师从未将它们分组，它们也可能属于同一个容器。检查 Figma 图层列表中的连续堆叠情况。