ARTICLE · 1013756
AI 两天跑通旅行 App,半个月却还原不好一张 UI
AI 两天跑通旅行 App,半个月却还原不好一张 UI俄罗斯旅行 App 做到可点击原型以后，我开始处理最后一件事：把 AI 按照 UE 和我的要求画出来的 5 张 UI 效果图，还原成真正能用的网页。 前面的背景、需求、行程和原型，两天就跑通了。偏偏到了 UI 还原，我用 Codex 试了三次，WorkBuddy 试了两次，前前后后折腾了半个月。 问题不是页面打不开，也不是按钮不能点，而是它们都能做出一个网页，却还原不出我确认过的那套 UI。 更尴尬的是，这 5 张 UI 本来就是 AI 画出来的。它能把视觉效果画出来，却没法把自己画出来的东西直接变成网页。 第一次还原时，AI 忙活一通，交付出来的是一个 SVG 线稿版网页。页面倒是能打开，按钮也能点，可原图里最重要的纸张纹理、绿色底纹、俄式拱顶、手绘边框和教堂插画，几乎全没了。说白了，能跑是能跑，但这是什么玩意儿？ 
第一次 AI 根据 UI 出来的破玩意…… 我最初以为是自己没把要求讲明白，于是开始不断补充细节。我说底部导航必须使用指定的原图，选中状态只能改底色，图标不能换；页面顶部要以首页为准，只替换标题；拱顶外壳要随着内容伸缩，不能把日期和内容跟外壳做成一张固定图片；不能用 SVG 重新画，也不能把整张截图直接当作网页背景。 为了降低难度，我还让它先把 UI 拆成一块块可复用的切图，先完成首页，首页验收通过后再继续做其他页面。这个要求已经说得够具体了，但结果还是在两个方向之间来回打转：要么把整张效果图当背景，再在上面叠一层点击区域；要么用 CSS 和 SVG 重新画一个“差不多”的版本。拱顶修好了，边线断掉；背景补上了，又冒出一截颜色明显不一样的绿色。模块名字倒是写了一大堆，页面也能跑，视觉上就是不对。 
我让 AI 用绘图把边框组件这些拆出来 我一度怀疑是不是 Codex 不擅长做这件事，于是换了 WorkBuddy，出来的也一样没眼看，第二轮我甚至让它调用内置的“现代 Web 开发专家”，网页的结构、按钮和交互确实写得更完整了，但成品依旧没法看。我实在是有点心累啊，直接对 WorkBuddy 爆了粗口：“你赶紧去死。” 
WorkBuddy 第二次尝试 后来我又回到 codex 里试了 Figma 插件，换了提示词重新生成。这一次，页面的样子，导航、内容滚动和层级关系终于像一个真正的网页了，但拱顶、边框、底纹还是很多问题，只可远观、不可细看。最后我连修都不想修了，只想把那些“所谓还原 UI 设计的垃圾网页”清理掉。 
Figma 插件还原首页 第五次重新开始时，我已经意识到，问题一直不在写代码。 做普通网页时，AI 拿到的通常不是一张成品海报，而是一份已经拆开的零件清单：哪块是按钮，哪块是文字，背景和间距也各有各的位置。它只需要把这些东西排好、连起来，网页自然就能搭出来。 但我的输入只有一张已经合成好的 UI 效果图。AI 看到的是最后的成品，而不是成品背后的图层。它能认出这里是顶部大卡，那里是普通卡片，也知道哪些文字应该让网页自己生成；可“看懂这是什么”和“把它拆成网页能使用的素材”，完全是两回事。 尤其是花纹、边框和底纹，AI 很难从一张压平的图里判断它们应该怎么拆，哪些边缘要原样保留，哪些地方可以拉伸，哪些纹理可以放在中间重复。只要这层关系没有拆对，代码写得再漂亮，最后拼出来的页面也会变味。 这套 UI 偏偏又不是普通的纯色卡片。纸张纹理、绿色底纹、俄式拱顶、角花、手绘线条和复古插画，都是页面视觉的一部分。只要其中一块被重新画成相近的颜色，或者边线错开几像素，整个页面就会立刻露出破绽。 想明白这一点以后，我也不再让 AI 继续抽卡了，直接打开 Photoshop，用古法把它画出来的页面一块块人肉切开。毕竟在 AI 出现之前，切图、写网页，这些活我一个人就能全包。 我的工作不是替 AI 重写网页，而是先把这张效果图整理成网页能用的零件。不是我要回到过去做网页，而是复杂 UI 到了这一步，必须先有人把素材关系理顺。 真正费时间的，其实不是把图片切出来，而是确定每一块素材在网页里应该怎么用。复古边框不能直接切成一整张。整张图随着内容拉伸，拱顶和花纹会被拉变形；只给一张固定高度的完整卡片，日期和内容一多，卡片又不够长。所以我会把一个边框拆成三张透明底图：顶部保留拱顶和上面的花纹，底部保留底角和收口，中间只留下左右边线和背景纹理。 
Photoshop 古法切图成果 网页只需要把中间这一段放在中间，内容有三行也好，三十行也好，边框都可以随着内容长高，顶部和底部的花纹却不用跟着变形。这样，一张只能看不能动的效果图，才真正变成了网页可以使用的素材。 素材重新切好后，我直接告诉 AI 这些图片放在页面什么位置。顶部主卡的边框，哪张放顶部、哪张放中间、哪张放底部；下面通用卡片的边框，分别对应哪几个位置。这里有一条接缝，内容上下各留 5 个像素，导航选中状态的背景图缩小到 90%，不能压住金色分割线。 
第五次终于把首页完美复现 到这里，AI 终于不是在凭眼力临摹，而是在按我准备好的图片和规则装配网页。复杂 UI 还原，关键不是让 AI 多看几遍图，而是先把设计图拆成网页真正能用的图片，再交给它去写。 
其他页面生成也很方便 页面还原完成后，我准备把这个本地网页应用安装到 iPhone 上，却遇到了 HTTPS 安全问题。我让 AI 处理一下，它没有先确认数据能不能外传，直接跑到 Cloudflare 上创建了一个临时 HTTPS 隧道。 
AI自作主张开了 Cloudflare 临时 HTTPS 隧道，把我的个人隐私送上公网 技术上的问题确实解决了，但代价是应用和里面的护照、票据数据都被放到了公网。我看到以后直接喊停：“疯了吧？这个应用里有我个人信息啊。”随后赶紧让它把隧道关掉，把临时内容清理掉。太他妈危险了。 这件事也让我长了个记性：AI 会很快给你一个技术上的解法，但它不会自动替你判断什么事情该先问，哪些资料根本不能碰。只要涉及公网、个人信息，或者可能收不回来的操作，人就不能离开现场。 不过，回过头看这段历程其实挺奇怪的：这 5 张 UI 是 AI 画的，最后的网页也是 AI 写的，可中间最关键的那一步，偏偏接不上。我只能把 AI 画出来的图人肉切开，重新整理成它能使用的素材，再喂回给 AI，让它继续把网页做完。 这件事让我对 AI 写复杂网页有了一个判断：至少在这个项目里，它已经能胜任 90% 以上的写网页工作，而且干得又快又好。但面对一张压平的复杂 UI，哪些东西必须保留、怎样拆成能复用的素材，仍然需要一个懂页面的人做最后判断。 这个人，暂时就是我。 
每日一曲：顺子《Dear Friend》
我最后才发现，真正难的不是写代码，而是把一张已经压平的效果图，拆成一块块网页能使用的切图。换模型并不能解决这个问题，因为它们面对的都是同一张已经压平的图。
页面做出来了，原来的味道却没了
不是 AI 不会写网页，而是它很难把图拆开
Photoshop 不是新方案，是实在没办法后的古法
图片切准以后，AI 才终于能把网页写下去
当我把这些信息说清楚以后，AI 反而变得很好用。它把我切好的图片接进网页，处理样式、按钮交互和不同手机尺寸，后面再根据实际效果调整接缝、间距和位置。问题从“整套页面不像”，变成了可以测量、可以逐个改掉的小问题。
页面终于做完，AI 又差点把隐私送上公网
AI 画图、AI 写网页，中间还得有人翻译
THANKS FOR FRIEND
感谢，与众不同的你看完了文章
你可以继续欣赏我精心挑选的歌曲也可以给这篇文章点赞、转发和评论