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

[xiaoleis]

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

[San668]

接入 figma 原型图？

[youknowsomething]

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

[SayHelloHi]

试一试 v0.dev 或者 variant.com

基本上可以 1:0.8 还原，剩下的自己微调或者 AI 微调

[383394544]

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

[ruoxie]

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

[ruoxie]

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

[ttsh]

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

[wqhui]

先转 html

[docx]

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

[Drifter]

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

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

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

[UB]

https://stitch.withgoogle.com/ 试试这个

[imdoge]

figma 插件转 html ，figma 插件转 tailwindcss ，选一个，然后拿 html/tailwind 来丢给 codex 让它参考着样式和 tailwind 类来写前端