吐槽 Codex 做 UI 太拉？实测这几招治好了我的强迫症

最近在搞几个个人项目，主力开发工具切到了 Codex。怎么说呢，逻辑代码写得飞起，每次一到 UI 界面设计的时候，我就想砸键盘。

出来的东西怎么说呢，充满了“年代感”，像是 2010 年代的 Demo 级别产物。完全没有隔壁 Claude 那种审美在线的感觉，甚至有点像是刚学会 HTML 标签的实习生随手糊出来的。试过给它装所谓的 frontend-design 技能包，效果也是聊胜于无，该丑还是丑。

我相信很多朋友在这个坑里躺过，既然绕不开，那就得想办法解决。翻了翻隔壁圈子的讨论，总结了几个目前公认还算靠谱的“驯化”方案，亲测有效。

方案一：把 Codex 当“翻译机”，Claude 当“设计师”

面对 Codex 生成的充满“年代感”的 UI，很多开发者都感到头大。

这是目前呼声最高的一条路。既然各有所长，那就别强求全能。

具体玩法： 先用 Claude（或者其他逻辑和审美都还行的模型）生成一个你满意的 UI 模型代码。拿到这一坨漂亮的 HTML/CSS 之后，直接扔给 Codex，让它进行 1:1 的还原或者是功能逻辑的接入。

Codex 的强项在于代码的补全和逻辑闭环，只要给它一个漂亮的“地基”，它就能往上盖楼。这样做的好处是，你既享受了 Claude 的审美红利，又利用了 Codex 极快的生成速度。虽然多了一步“搬运”，但比后期自己一点点改 CSS 效率高太多。

方案二：Cursor 截图流，暴力教做人

如果你不想在两个模型之间来回跳，那就在输入上下文上下功夫。

具体玩法： 这招特别适合使用 Cursor 的朋友。去找一张你觉得非常完美的 UI 界面截图（不管是 Dribbble 上的大神图，还是竞品的设计），直接贴到编辑器里。

使用 Cursor 截图功能，将参考图直接贴给 Codex，是一种暴力但有效的“教学”方式。

告诉 Codex：“照着这个图，给我实现一样的布局和风格。”

进阶技巧： 如果 Codex 领会不到细节，别跟它废话。直接把那个 UI 的局部放大，截取特写图丢给它。比如按钮的圆角、卡片的阴影、字间距，把特写图往那一贴，它瞬间就能理解“你要的是这种高级感”，而不是它默认的“默认感”。

方案三：引入外部设计工具，别让 AI 瞎猜

有时候 Codex 做得丑，纯粹是因为它不懂设计规范。

具体玩法： 结合 Figma、Stitch 或者 Open Design 这类工具。

你可以先用 GPT-4o 或者现在的图像生成模型出一个线框图或者原型，然后把设计规范（Design System）甩给 Codex。或者直接使用现成的 UI 组件库代码作为上下文。

社区里有朋友提到，套上 Open Design 之后，Codex 输出的代码质量会有显著提升。毕竟有了“标准答案”，它就不容易自由发挥出那些辣眼睛的配色了。

方案四：换人，专事专办

如果你的项目前端 UI 占比很重，且对视觉要求极高，别硬磕 Codex 了。

有开发者表示，现在已经把前端切给了 Gemini 或者其他在视觉领域表现更好的模型。Codex 就老老实实写后端逻辑、数据处理和算法实现。术业有专攻，强行让它干不擅长的事，只会消耗你的发际线。

写在最后

现在的 AI 编程助手，虽然号称全能，但在“审美”这门玄学上，确实还有很长的路要走。Codex 在代码逻辑上的强势掩盖不了它在 CSS 艺术上的拉胯。

咱们作为使用者，与其抱怨，不如建立一套适合自己的工作流。无论是“双模型协作”还是“截图喂饭”，能把项目做漂亮才是硬道理。

你们平时都是怎么补救 AI 生成的丑 UI 的？有没有什么独家的 Prompt 或者工具推荐？欢迎在评论区交流一下！