这次用的是 GPT-6.1 Sol，Light 模式。没有提前画设计稿，我一开始给的要求很简单：简洁、现代化、有高级感。具体怎么设计，给了 Codex 比较大的发挥空间。
先看一下改版前后的对比（相同 VS Code 主题下的效果）：
前：
后：
不过我目前更喜欢这个主题：
配了三个 skill，就开始改了
准备工作不多，主要用了这三个：
- shadcn：辅助组件的使用和实现。
- UI UX Pro Max：通过
uipro init --ai codex初始化，给 UI 设计提供一些参考。 - comment：自己写的一个 skill，约定代码注释怎么写，方便后面 review 和维护。
没有搭很复杂的工作流。配好之后，把想要的风格告诉 Codex，就让它先做一版。
让它先做，我再看
最开始，我没有规定按钮高度、卡片间距或者具体配色。这些细节自己也还没想清楚，就先让 Codex 按照最初的风格要求做一版。
后面基本就是一个循环：它改代码，我 review，再打开实际页面看效果，有不满意的地方就继续提。
相比一开始说“要有高级感”，看到页面之后，反馈就容易具体很多。哪里太挤、哪里太抢眼、哪些地方看着不协调，直接指出来，让它针对性调整。
我的参与主要集中在代码审查和页面验收上。尤其是实际页面，还是要自己打开看看、操作一下。有些细节单看代码，很难判断最后呈现出来是不是舒服。
比较惊喜的是，它理解了现有的主题系统
这次比较让我惊艳的一点，是 Codex 理解了 nvm-desktop 已有的主题切换系统，还能围绕不同主题优化页面的设计和风格。
我最初更多关注布局和整体观感，但它在改版时，也把现有的主题系统考虑了进去。切换主题后，页面依然能保持比较协调的效果。
这点挺加分的。毕竟是在已有项目上改 UI，得考虑原来的功能和设计。某个主题下看着舒服，换一个主题可能就会暴露出颜色、对比度或者层级上的问题，这些都需要一起处理。
展示一下几个我相对比较喜欢的几个主题效果吧：
顺手把自动化测试的基础也补了
这次也完善了自动化测试的基础配置，分成三层：
- Vitest 的 Node 环境测试：在内存中验证逻辑和状态。
- Playwright 真实浏览器环境测试：验证页面在浏览器里的交互和表现。
- WebdriverIO E2E 测试：覆盖应用里的完整操作流程。
补这些配置，一个很实际的目的，就是让 Codex 改完功能后，能自己写测试脚本、运行验证，发现问题再继续修。
否则每改一点都要我手动点一遍，来回几轮之后，验收也挺累。有了测试基础，一部分功能验证可以交给它自己完成，我再重点看代码和最终页面效果。
当然，页面好不好看、交互是不是顺手，我还是会自己打开应用确认。测试和实际体验都得看。
用下来的一点感受
这次比较舒服的地方，是不用在开始前把所有细节都想清楚。
先给一个方向，让 Codex 做出实际页面，再根据结果提意见。对于这种有改版想法、但没有完整设计稿的情况，我觉得挺顺手。
三个 skill 各自起了多大作用，我没有做对照测试，不太好下结论。不过，主题系统的适配，以及测试基础补齐之后能自行验证功能，确实是这次过程中让我印象比较深的地方。
大部分实现交给 Codex，我主要负责确定方向、review code 和验收页面。最终效果我自己挺满意，前后对比也放在上面了，大家可以看看。
给“有想法但无设计稿”的改版提供了可复制路径：先让 AI 出可看页面，再用具体反馈收敛细节；同时补齐测试基础让 AI 自验证，适合已有项目做 UI 重构的团队参考。