有没有什么方式使用 codex 将 ui 设计图 1:1 的还原成前端页面。

大理小帅 · 发表于 2026-5-19 12:08:04

无论怎么调试，都是有很大的误差。已经让 codex 做了像素级的对比，还原度都还不是很高。有没有建议的方式。

Lntano · 发表于 2026-5-19 12:50:06

接入 figma 原型图？

2367225475 · 发表于 2026-5-19 13:07:09

我让 codex 直接出 UI 图，很漂亮。让它照着 UI 图改 UI ，很丑；让它自己做 UI ，也很丑。没招了，不知道咋整

若无其事 · 发表于 2026-5-19 13:25:30

产设计图的时候顺便产 prompt ，让它能将设计理念精准传达给动手的 agent 。设计图也是有规格的，最好问清楚你想要的风格名称 (eg. "glassmorphim")，不然 agent 不敢重构样式，只会史上雕花。

像风 · 发表于 2026-5-19 17:00:10

我用 figma 官方的 skiLl ，然后样式让 ai 转成 unocss ，基本还原了 95%，unocss 改起来也方便，不过模型是 opus 4.6

Ozel · 发表于 2026-5-19 17:20:03

不是整个设计稿一起丢给 ai ，而是一个节点一个节点让 ai 还原

1836595200 · 发表于 2026-5-19 19:00:12

你要先理解 AI 还原设计图第一步是什么，是先读设计图，它读设计图是每个 px 一步步循环过去的，他做不到人类的那种看见线和 modal 就知道是什么东西，就跟人看到猫就知道是猫一样，它看到的时候是比例，通过打标知道这个形状和颜色占比大概率是猫，那第一步做不到就肯定做不到还原

她不听话 · 发表于 2026-5-19 19:15:04

先转 html

boacad · 发表于 2026-5-19 19:22:08

之前拿截图让 Claude 仿一个 html ，还原度还是不错的

Remi · 发表于 2026-5-19 19:50:37

最简单的办法，是不要给 codex 喂图片，这需要你的上游改变，借助 ai 工具可以直出 html 原型，然后你接手这个是最方便的。

其次，是用 paddleocr 之类的本地视图工具，来做提取，再基于这个提取的 json ，转成一个 markdown 的页面说明，你再来基于这个 markdown 来作一些微调，再让 ai 根据这个 markdown 复原页面。多跑几次后，就能固定为 skill 了。

我试过 cursor 之类的，能读图，但总有细节丢失（特别是超大图，宽表之类的），用上面的方案转成 md 后，进行微调强不少。