AI 生成 UI 之前先把设计稿图层整理干净设计稿原样丢给模型生成结果里常常挤满绝对定位。先别急着怪模型导出的图层树本来就有坐标、空容器和没有语义的矢量节点输入是什么形状代码多半就会长成什么形状。我会把这件事当成数据整理而不是“喂更多设计稿”。目标是让输入里保留布局关系、组件语义和 Token 引用少保留只对某一张画布有用的像素坐标。先定一份可复查的样本约定有 Auto Layout 的节点记录方向、间距、对齐和内边距。没有布局信息的节点标为待人工复核不要把坐标猜成 Flex 或 Grid 后当真值。颜色、圆角、间距优先映射到已有 Token找不到时保留原值并标注来源。图标和插图使用资源引用避免把一长串 path 当成组件结构。指标是用来找问题的可以记录 Token 覆盖率、无语义容器数量、响应式用例通过情况和截图差异。它们都不是“代码质量分”。例如组件本身就需要固定宽度时硬编码并不一定错反过来覆盖率高也不能证明布局可维护。下面是一个简化的检查思路只把已知 Token 视为通过其余值输出给评审。const tokenPattern /^var\(--[\w-]\)$/; export function isTokenValue(value: string, tokens: Setstring) { return tokenPattern.test(value) || tokens.has(value); }检查报告至少应包含文件、属性和值。这样下一步是改哪里很清楚也不会让模型根据一个笼统的“质量差”再猜一遍。交付前看两件事第一训练样本里的结构是否真的来自设计约束而不是坐标推测。第二评估环境要固定浏览器、字体和视口否则截图差异会把环境噪声算到组件头上。数据干净一点生成结果才有机会少一些补丁式 CSS。