AI UI 自动修正为何失效及终极解决方案

这篇主要记录一下我最近用 AI 复刻页面时踩过的一些坑，后来针对遇到的问题搭了一套工作流，也把整个过程整理了出来，供大家参考。

大家平时应该都有过这种经历。

有时候会把一张截图丢给 AI，让它照着做个页面。第一版看起来差不多，但细看总觉得差点意思：卡片宽了一截、字号小了点、阴影不对，反正都是这种小问题。

然后只能继续跟它口述哪里要调、应该怎么调。一轮轮改下来，其实还挺费时间的。

所以我就想着，把渲染、截图、对比和修改串成一个工作流，让模型自己检查、自己改。这个思路看起来应该没什么问题。

但真正跑起来，还是和我想得有点不一样。有时候第二轮刚改好，第三轮又改了回去；效果一会儿好、一会儿差，页面甚至可能越改越烂。

废话不多说，下面直接上干货。

怎么让它自己改

整个流程其实不复杂：

1目标截图 ──▶ 模型写 HTML ──▶ 浏览器 1:1 渲染截图 ──▶ 逐像素比对生成 Diff
2                                                         │
3保留历史最佳 ◀── 重新渲染 ◀── 模型先写诊断再改代码 ◀── 原图 + 渲染图 + Diff

Diff 不会替模型修页面。它只是把“感觉不太像”变成一张能看到具体偏差的图，再交回去让模型判断下一步改什么。

为了不让模型拿着 Diff 瞎猜，每次修改之前，我都会让它先回答三个问题：

1. 最大的问题在哪里；
2. 可能是哪个元素、哪个 CSS 属性造成的；
3. 它准备怎么改。

说完再动代码。

这次我用的是 Ling-3.0-flash-VL，选了两张卡片做一个简单演示：一张是亮黄底、粗黑边框、硬阴影的黄色卡片；另一张是深色的 SaaS 定价卡片，有渐变按钮、标签和功能列表。

我觉得卡片刚刚好。东西不多，但宽度、留白、按钮方向和阴影，只要有一个不对，一眼就能看出来。

先跑一遍

先看黄色这张。

第一版出来以后，整体其实已经挺不错了。

卡片的结构、配色、文案和按钮位置基本都还原出来了。如果不和原图放在一起看，第一眼甚至会觉得已经差不多。

但并排以后，还是能看出一些细节差异：卡片整体稍微大了一点，字体粗细不太一样，留白和按钮尺寸也没有完全对上。

然后我把原图、首轮结果和 Diff 一起交回给 Ling，让它继续找这些细节问题。

从诊断里能看出来，它不会只说“还不够像”，而是会把问题落到卡片尺寸、字体和按钮这些具体地方，再去修改对应的 CSS。

黄色卡片的三轮对比：第二轮变好，第三轮又回落，最终保留第二轮的历史最佳。

不过，首轮做得不错，不代表后面一定会越来越好。

这段视频刚好把问题录了下来：第二轮已经更接近原图，到了第三轮，它又往回掉了一点。好在流程没有直接拿最后一轮当答案，而是保留了第二轮的历史最佳。

所以把 Diff 丢回去，不代表模型就会突然开窍。它能看出不少细节问题，也能把判断落到具体 CSS 上，但有些地方还是会犯迷糊。

至于整个流程具体是怎么跑的，直接看下面这段录屏就行。

深色定价卡片的完整演示：选择素材、首轮生成、卷帘对比，再连续跑两轮自愈。

这段里的变化也没有特别夸张，因为首轮本身已经比较接近了。后面两轮整体还在往前走，主要是在继续抠卡片尺寸、圆角、按钮和渐变这些细节。

把两段录屏里的结果放在一起看，刚好是两种不同的走势：

黄色卡片到了第二轮已经更接近了，第三轮却又掉了一点；深色卡片则是三轮都在小幅往前走。两次录屏当然说明不了什么统计规律，但至少能看出来，同一套流程跑起来，不一定每一轮都比上一轮好。

明显的问题通常前一两轮就能修掉，后面全是字号、圆角、阴影偏移这种细节，改一处很容易又碰坏另一处。所以我最后保存的是历史最佳，不是默认把最后一轮当成答案。

它到底能做什么

从这几次结果看，第一版其实就是常见的 Screenshot-to-Code。真正让我觉得有点意思的，是它看完渲染结果以后，能把问题落到具体元素和 CSS 上，而不是只说一句“再像一点”。

就算不让它自动改，这段诊断拿来当检查清单也挺实用。

很多视觉问题不会触发报错。模型如果能看到浏览器真正渲染出来的页面，就有机会自己接着往下改。

还有一点很实际：这套流程要反复调用模型，速度不能太慢。我这次记录到的单次整页 HTML 生成大约是 7 秒。公开资料显示，Ling-3.0-flash-VL 总参数是 124B，每次推理激活 5.5B，并加入了视觉理解和 Visual Agent 能力。

7 秒只是我当时那套接口和设置下的调用记录。我没有做横向对比，也不打算直接用激活参数去推导速度和成本。

坑到底在哪

不过，这一晚真正花时间的不是接模型，而是把反馈跑准。一开始看到结果来回波动，我也以为是模型不稳定。后来一张张对 Diff，才发现问题有一部分出在我自己的反馈流程上。

1.第一个坑是尺寸

目标图被缩放过，浏览器又用了另一个尺寸截图。两张图从一开始就没有对齐，结果连标准答案放进去，Diff 都还是一大片。

对像素 Diff 来说，整体偏几像素，就能炸出一大片误差。

2.第二个坑是动画

有一次，模型给功能列表加了淡入效果。截图时动画还没播完，整块内容仍然是透明的。

我把动画处理掉以后，页面肉眼看着正常了，自动比对的结果反而更差了。

原因挺离谱：内容透明的时候刚好露出背景，像素算法反而觉得它“更像”。

3.第三个坑是版本

如果这一轮已经改坏了，还继续在这版代码上打补丁，错误就会一层层叠上去。跟在歪掉的地基上继续盖楼差不多，越努力越麻烦。

说白了，Diff 只是工具，不是裁判。

如果反馈本身是错的，模型不会替我发现这件事。它只会拿着这份反馈，非常认真地修错方向。

最后

后来我把规则收成了三条：

1. 原图和浏览器截图使用同一尺寸，不再二次缩放；
2. 固定视口、字体、动画状态和截图时机；
3. 每轮从历史最佳版本继续，不在变差的代码上叠补丁。

代码能跑只是第一步。那些不会报错、但看起来不对的问题，确实可以继续交给视觉模型检查。不过能看到偏差，不代表它每次都能改对。

所以我现在不会默认轮数越多越好。先把明显的问题修掉，后面不再变好就停，对我来说已经够用了。

模型已经开源且限免2周，想自己跑一下的话，有以下途径👇🏻：

• Huggingface : https://huggingface.co/inclusionAI/Ling-3.0-flash-VL
• Ling studio：https://chat.ant-ling.com/chat
• 蚂蚁数科 maas 国内站：https://maas.antdigital.com/models/modelservice-1788265478122001738
• Openrouter：https://openrouter.ai/inclusionai/ling-3.0-flash-vl:free

Ps : 本篇文章来自口述，AI润色整理，所以是有灵魂的✌🏻