Codex Takes the Design Wheel: A Hands-On UI Reskin of nvm-desktop

Recently I used Codex to redo the UI of nvm-desktop from scratch, and I’m recording the process and results.

This time I used GPT-6.1 Sol, Light mode. I didn’t prepare a design mockup in advance. My initial requirements were simple: clean, modern, and premium. I gave Codex a lot of freedom on the specific design.

Let’s look at the before and after comparison (under the same VS Code theme):

Before:\n

After:\n

But I currently prefer this theme:\n

Configured three skills, then started changing

Not much preparation was needed. I mainly used these three:

• shadcn: to help with component usage and implementation.
• UI UX Pro Max: initialized via uipro init --ai codex, to provide some reference for UI design.
• comment: a skill I wrote myself that defines how code comments should be written, making review and maintenance easier later.

I didn’t build a complicated workflow. After configuring, I told Codex the style I wanted and let it produce a first version.

Let it do it first, then I’ll review

At the start, I didn’t specify button heights, card spacing, or specific colors. I hadn’t figured out those details myself, so I let Codex make a version based on the initial style requirements.

From then on it was basically a loop: it changed the code, I reviewed, then opened the actual page to see the result. If anything wasn’t satisfactory, I kept giving feedback.

Compared to saying “make it premium” at the beginning, after seeing the page the feedback became much more concrete. Where it was too cramped, where too flashy, which parts looked off, I pointed them out directly and had it make targeted adjustments.

My involvement was mainly in code review and page acceptance. Especially for the actual page, I still had to open it and interact with it. Some details are hard to judge just from code whether the final presentation will feel comfortable.

Surprising: it understood the existing theme system

One thing that impressed me this time: Codex understood nvm-desktop’s existing theme-switching system and could optimize the page design and style around different themes.

Initially I focused more on layout and overall look, but during the redesign it also took the existing theme system into account. After switching themes, the page still maintained a consistent, coordinated look.

This was a nice bonus. After all, when modifying the UI on an existing project, you have to consider the original functionality and design. A theme that looks good under one theme might expose problems with color, contrast, or hierarchy under another. These all need to be handled together.

Let me show some theme effects I relatively like:

Also filled in the basics of automated testing

This time I also improved the basic configuration for automated testing, in three layers:

• Vitest Node environment tests: verify logic and state in memory.
• Playwright real browser environment tests: verify the page’s interactions and behavior in the browser.
• WebdriverIO E2E tests: cover complete user flows in the application.

A very practical reason for adding these configurations is to let Codex write test scripts, run them to verify, and continue fixing issues after making changes.

Otherwise, every change would require me to manually click through, and after a few rounds that gets tiring. With a test foundation, part of the functional verification can be done by Codex itself, and I can focus on the code and the final page effect.

Of course, I still open the app myself to confirm whether the page looks good and whether interactions feel natural. Both tests and actual experience matter.

A few thoughts from using it

What felt comfortable this time was not having to think through every detail before starting.

Give a direction first, let Codex produce an actual page, then give feedback based on the result. For situations where you have a redesign idea but no complete design mockup, I found this quite smooth.

I didn’t run a controlled test on how much each of the three skills contributed, so I can’t draw a firm conclusion. But the theme system adaptation, and the fact that after filling in the test foundation it could verify functionality on its own, were the things that impressed me most during this process.

The bulk of the implementation was left to Codex, while I mainly set the direction, reviewed code, and accepted the pages. I’m quite satisfied with the final result. The before/after comparison is above; have a look.