前言
前段时间发布了一篇借助AI上线了自己的第一个个人小程序的文章: # 我用两周半 Vibe Coding 做了一个前额叶训练的微信小程序 。分享了下自己的一些看法和实践，小程序也上线半个多月了，整体数据还可以，这半个多月呢，主要是在修复一些线上的问题和UI的改版，众所周知，使用AI开发的页面如果经验丰富的人的话基本上一眼就能看出来，并不是说AI开发的不好看，但是如果到处都充斥着千篇一律的风格的软件和页面，看多了也难免会产生视觉上的反感。
先来看下UI改版前后的对比效果（这里以其中的三个主要页面为例，上面是之前的，下面是之后的），然后再一步一步的教大家如何实现：
可以看的出来，改版前AI痕迹听重的，改版后加上了一些图标，改了些风格后整体比之前好多了。体验方式我放到最后了，欢迎体验。
之前开发的时候主要借助的工具是claudecode，模型使用的是ops4.7，这次UI改版改成使用codex+gpt5.5来开发了，大家都知道当前绘图最强大的工具莫过于gpt-image2，而在codex中可以直接使用gpt-image2，所以使用codex来作为UI改版的工具最合适不过了。
开发过程
使用chatgpt生成整体的UI设计图
使用codex进行UI优化时最好不要上来第一步就告诉它让它帮你优化下当前前端项目的UI，那你大概率得到的还是充满AI风格的前端页面，正确的做法应该是截下你的项目页面，然后现在chatgpt中让它帮你生成整体的UI设计图，告诉它你想要的风格、你的要求等等。
以上消息发送给chatgpt后会调用image2生成符合要求的UI设计图，如果一次不满意，可以试试多次，也可以试试不同的风格，亲测生成的质量挺高的，下面是image2帮我生成的UI设计图：
将设计图导入到codex中
拿到了上一步chatgpt生成的UI设计图后，可以复制下来，然后到codex中直接在对话框中粘贴，到这里可以直接让codex照猫画虎，照着这个UI设计图来开发吗？那你就too young too simple了，如果这样做，大概率得到的是和UI设计图差很多的页面样式，而且这样做claudecode也能做。那正确的做法是什么呢？
得到的UI设计图中一般会有许多的图标，这些图标也需要借助AI生成，在codex中是可以直接调用image2来生成这些图标的，codex中有一个 $imagegen 的工具，就是用来生成图片的，把UI设计图复制给它，然后让它自己结合之前的实现加上设计图来进行UI改版，需要的图标让它自己绘制即可，选中工具，粘贴截图，输入自己的要求，然后回车，然后自己就可以去摸鱼了，等着它干完你验收就行了。
这里有两个细节需要注意下：一是一定要声明下图标的背景色设置为透明的，否则生成的图会默认带背景色，放到页面中就不好看了。还有一点是有些人可能会怕图标有很多，想生成sprite图，把所有图标都放一张图里面，这种方案我也试了，但是发现实际效果并不好，生成的图标要么很模糊，要么会乱码，所以才改成一张一张生成的。
完善其他页面
在上一步完成第一个页面的UI改版后，接下来想实现其他页面的UI改版就很方便了，因为AI的记忆力是很强的，让它改了一个页面后它就会记得页面的整体风格，就不用我们一个页面一个页面的去生成UI设计图了，只需要告诉它 请按照首页的风格帮我改善下XXX页面的UI设计，其中需要的图标需要你自己生成。然后它就会按照你的要求来实现了。
以上就是所有的教程和步骤了，其实很简单，有了AI之后，不用再找UI就可以有好看的UI设计了。
体验方式
微信搜索：前额叶专注训练
或者直接扫码体验
UI改版还在测试中，大家看到这篇文章比较早的话应该还是老版的UI，有问题的话欢迎评论区或者私聊我沟通。