上线之前，如何评估 AI 生成的 HTML

快速回答： 不要只凭一张截图对比就判断 AI 生成的 HTML 是否合格。要检查多个断点下的视觉还原度、语义化标记（而不是 div 堆砌）、实际调整浏览器窗口时的真实响应式表现、基本的无障碍访问（alt 文本、对比度、键盘焦点），以及页面体积——自动化的视觉评分是一个有用的第一信号，但不能替代这些检查。

为什么"看起来对"还不够

AI 驱动的 Figma 转代码工具，实际优化的目标差异很大。有些工具把像素级视觉还原放在首位——这可能意味着底层的标记代码其实是一堆绝对定位的 <div>，只是碰巧在某个特定宽度下渲染得和设计稿一模一样。它看起来完成了，其实并没有。一份可重复使用的检查清单，能捕捉到只看预览图发现不了的问题。

检查清单

1. 不止一个宽度下的视觉还原度。 先在 frame 的实际尺寸下对比渲染结果和设计稿，然后把浏览器窗口往两个方向都拉伸到远超这个尺寸。一个只在 1440px 宽度下完全匹配的布局并不是响应式布局——它只是一个碰巧被检查过一次的固定布局。

2. 语义正确性。 打开实际的 HTML。在符合内容角色的地方，有没有真正的 <header>、<nav>、<main>、<section>、<footer> 元素，还是整个页面全部由通用 <div> 搭建？这会影响无障碍访问、SEO，以及代码对下一个接手的人来说好不好维护——更完整的检查清单可参考 Figma to HTML 输出对 SEO 友好吗？。

3. 标题层级。 一个 <h1>，标题按逻辑顺序逐级下降，而不是根据字号大小随意跳级。这是 AI 工具最容易出错的细节之一，因为它依赖的是对内容结构的理解，而不仅仅是视觉布局。

4. 真实的响应式表现，而不只是有没有断点。 慢慢地把浏览器窗口在整个范围内拖动，而不是只检查移动端和桌面端两张截图——这两个端点之间的内容重排、文字换行和间距变化，恰恰是布局最容易出问题的地方。

5. 无障碍访问基础项。 有意义的图片要有 alt 文本（不是空的，也不是文件名），文字要有足够的颜色对比度，可交互元素要有可见的焦点状态。这些都无法只靠截图对比来验证——需要打开标记代码，最好再用 Tab 键实际走一遍页面。

6. 代码体积和整洁度。 到处散落的内联样式、从框架里带过来却没用到的 CSS、过多的包装元素，这些都只会增加体积而不带来任何视觉效果。即使页面看起来是对的，也值得扫一眼代码。

自动化评分能做到什么——以及它的真实边界

MarkupGen 会自动为每次导出打分，把实时预览的截图和原始设计稿做对比，给出 1 到 10 分的评分，并说明哪些地方匹配、哪些地方有偏差。这对上面第 1 项来说是真正有用的第一轮信号——它能快速发现视觉上的偏差，低分是一个明确的"上线前先看看这里"的提示。但它明确只是一个视觉匹配评分：它不会审查语义、标题结构、无障碍访问或代码体积，因为这些都不是截图对比能看出来的。把它当作这份检查清单的第一步，而不是全部——第 2 到第 6 项仍然需要人工过一遍。

如果某次导出评分不错，但间距、颜色或对齐看起来还是有点不对，MarkupGen 的评估视图可以让你把设计稿和实时预览并排对比，描述你想要的具体修改，然后基于这条反馈重新生成，而不用从头再来。完整的评分与重新生成流程，可参考 AI in MarkupGen。

在你自己的设计稿上试试看

拿一份真实的导出结果，跑一遍你自己的检查清单，是判断某个工具已经做对了多少的最快方式。免费试用 MarkupGen，或查看 Figma to Semantic HTML，具体了解语义优先的输出长什么样。