Follow ZDNET: Add us as a favorite source On Google.
ZDNET Highlights
- I tested ChatGPT Images 2.0 on two active product UIs.
- AI found design problems and suggested practical solutions.
- For solo developers, AI design review can be a big deal.
For the past week or so, I’ve been digging into the depths of OpenAI’s new ChatGPT Images 2.0 release. This is a much more consequential release than it appears at first glance.
We’ve all been impressed by AI image generators. These tools produce beautiful images and can do some fun tricks. They can also generate very high AI slope. But, until now, their understanding of what they are producing has been limited.
Also: 7 AI coding techniques I use to ship real, reliable products faster
Images 2.0 adds content intelligence to image creation. This capability means that ChatGPT can receive assignments and produce high-value outputs.
In this article, we are going to look at one such type of assignment – updating the user interface. Previously, coding agents might try to clean up a UI element here and there. Chatbots can make text-based recommendations on what needs to be fixed. But they could not make the complete design.
Now, they can. I’ve fed two UI designs that I’m actively working on into ChatGPT Images 2.0 on my $20/month ChatGPT Plus plan. In just a few minutes, ChatGPT returned two redesigned user interfaces, resulting in a lot of design improvements that I plan to incorporate into our products.
Here are four recent articles that will give you an idea of what we’ve already got with this new tool:
I often use my non-ZDNET work as project fodder for ZDNET Search articles. I try to avoid sharing product names and links because I don’t want any conflict of interest. But it is important to show the names of the products in this article. The names are part of the existing UI design that I have asked the AI to work on. If I took them out, it wouldn’t make any sense. I will continue to avoid linking to the products themselves.
Also: I completed 4 years of product development in 4 days for $200, and I’m still shocked
let’s get started.
mac interface design
For this challenge, I had two interfaces that I wanted the AI to drive.
Also: I used Cloud Code to code a Vibe Mac app in 8 hours, but it was even more work than magic
The first one is a Mac app, I’ve been Vibe coding with Cloud Code since January. This project is taking a little time because I only have an hour or two a week to work on it, and it uses MacOS’s internal AI for image processing and analysis.
This is the design that exists in my app right now. A lot is happening here. I’m particularly invested in the large buttons on the left, as they reflect the brand colors of my wife’s e-commerce business. They also translate really well to the iPhone app:
I uploaded that screenshot to ChatGPT and prompted him, “Redesign this user interface to make it more attractive and easier to use.” Here’s what ChatGPT Images 2.0 did:
At first, I didn’t like the changes. The most obvious change was the loss of the colored buttons. But the AI didn’t even understand that there were viewing options below the grid view.
Also: How AI has suddenly become more useful to open-source developers
On the other hand, look at those red squares. These are the areas of the new mockup that I really like, and I plan to incorporate into my UI:
- The set of actions on the bottom left were icons on the iPhone app, but it looks far better with the AI-rendered UI.
- Similarly, AI added a more pronounced header zone at the top of the grid view, as shown in the top middle red box.
- The AI also spread out the pattern thumbnails, giving them more breathing room to make the selection boxes clear and attractive, as shown in the lower red box in the middle.
- The AI has added a favorite option that I haven’t included, but really like.
- Finally, I like the idea of constantly added/updated fields below the details view.
My big learnings from this exercise are five new design notes that I plan to incorporate into my product. I am not redesigning the entire app to reflect the suggested UI. However, the image contained some great ideas.
Plus, having a mockup like this will make it much easier to make the cloud code appear to do what I want it to do. This exercise is a great example of using the $20/month ChatGPT Plus plan and the $100/month Cloud Code Max 5x plan to build better software.
web interface design
Next is the UI for the start page of my security product. My design is clean but quite rudimentary, which mostly reflects the fact that I don’t like coding in CSS.
Also: I did 24 days of coding in 12 hours with a $20 AI tool – but there’s a big disadvantage
Last time, in my first agent-based Vibe coding project, I used OpenAI’s codecs in my ChatGPT Plus plan (which exhausted the AI allocation quite quickly) to redesign the UI from fairly ugly to non-objectionable. This is the result of its first-ever passage last fall. I designed the codex telling me where and how to place the CSS:
My test results this week were interesting. I pasted the screenshot into ChatGPT, but accidentally hit Return before it was prompted. ChatGPT decided to analyze the page itself and concluded that “the biggest issues are weak visual hierarchy, too much gray, a very long intro block, and three bottom cards that compete for attention, even if they are not equally important.”
It also recommended “more modern admin aesthetics”, including:
- White card background instead of large gray panels.
- Soft boundaries.
- More spacing between sections.
- A strong accent color is used consistently for buttons, links, and active statuses.
- Short line length for the main text.
- Better differentiation between headings, subtitles and body copy.
Also: Cloud Code Made an Amazing $1B in 6 Months – and My Own AI-Coded iPhone App Shows Why
At this point, I decided to attach Images 2.0 and instructed, “Provide me with an image of the redefined interface.” Here’s what the AI produced:
This output also provides some design notes with which I can refer back to the codec. I use OpenAI’s Codex with the web product and Cloud Code with the Mac product, primarily to give me experience with the two agentive coding tools so I can write about them. If writing wasn’t my primary goal here, I would have chosen some other tool. I have found both equally useful.
Also: How Cloud Code’s new Auto Mode prevents AI coding disasters — without slowing you down
ChatGPT Images 2.0 decided to invent a logo (mostly because I didn’t provide one in my first image). The AI added several features that I liked.
First of all, I really like the overall design aesthetic it recommends. It might be a lot of work to promote it through the rest of the product (it’s a huge product), but I liked the design.
Additionally, I liked how the AI promoted three distinct user-assistance areas: the quick setup area, the need help area, and the Configure Privacy/View Documents section at the top. While the basic interface gave users access to information, it didn’t really make it clear where to start.
I also liked the Site Status section at the bottom. I’ve often thought about adding a feature like this, but was a little put off by the coding requirements, as positioning elements would have to change depending on which freemium plugins the user has installed. Still, seeing the representation of that feature made me want to add it.
This is game-changing
I think this capability is as game-changing as ChatGPT was when it first came out, and agentic pair programming was when it came out last summer.
Also: I created two apps with just my voice and a mouse – are IDEs already obsolete?
I submitted two product user interfaces to the AI and essentially received peer-reviewed commentary along with a set of prototype designs. As a single programmer, this output is invaluable.
Even if I had an entire in-house team with programmers and designers, it would probably take a week or more to run this analysis and create a prototype for review. The payroll expense alone for that project would be quite large. But for $20, I was given two very useful, very creative, and not-at-all-AI-stupid redesigns that included actionable information that would make my products better.
Just wow.
If you were pairing ChatGPT Images 2.0 with Cloud Code or Codex, would you use the image mockups as a design brief for the coding agent? Let us know in the comments below.
You can follow my daily project updates on social media. Be sure to subscribe My weekly update newsletterAnd follow me on Twitter/X @davidgewirtzon facebook Facebook.com/DavidGewirtzon instagram Instagram.com/DavidGewirtzon bluesky @DavidGewirtz.comand on youtube YouTube.com/DavidGewirtzTV.
