I asked ChatGPT Images 2.0 to redesign my app UIs - and wow

1 hour ago 5

Can ChatGPT Images 2.0 amended your product's idiosyncratic interface?

Follow ZDNET: Add america arsenic a preferred source on Google.

ZDNET's cardinal takeaways

I tested ChatGPT Images 2.0 connected 2 progressive merchandise UIs.
The AI recovered plan issues and suggested applicable fixes.
For solo developers, AI plan reappraisal could beryllium a large deal.

For the past week oregon so, I've been exploring the depths of OpenAI's caller ChatGPT Images 2.0 release. This is simply a overmuch much consequential merchandise than it archetypal appears.

We've each been impressed with AI representation generators. These tools marque beauteous pictures and tin bash immoderate fun tricks. They tin besides nutrient a batch of AI slop. But, truthful far, they've been constricted successful their knowing of what they're producing.

Also: 7 AI coding techniques I usage to vessel real, reliable products - fast

Images 2.0 adds subject-matter quality to representation generation. This capableness means ChatGPT tin person assignments and nutrient high-value outputs.

In this article, we're going to look astatine 1 specified benignant of assignment, updating a idiosyncratic interface. Previously, coding agents could instrumentality a changeable astatine cleaning up a UI constituent present and there. The chatbots could marque text-based recommendations connected what needed fixing. But they couldn't bash the afloat design.

Now, they can. I fed 2 UI designs I'm actively moving connected into ChatGPT Images 2.0 connected my $20/month ChatGPT Plus plan. In a fewer abbreviated minutes, ChatGPT returned 2 redesigned idiosyncratic interfaces, some of which resulted successful a full clump of plan improvements I program to incorporated into my products.

Here are 4 caller articles that volition bring you up to velocity connected what I've already recovered with this caller tool:

I often usage my non-ZDNET enactment arsenic task fodder for ZDNET find articles. I effort to debar sharing merchandise names and links due to the fact that I don't privation immoderate struggle of interest. But successful this article, it's indispensable to amusement the merchandise names. The names are portion of the existing UI plan that I've asked the AI to enactment on. If I pulled them out, it wouldn't marque arsenic overmuch sense. I'll proceed to debar linking to the products themselves.

Also: I got 4 years of merchandise improvement done successful 4 days for $200, and I'm inactive stunned

Let's get started.

Mac interface plan

For this challenge, I had 2 interfaces I wanted to tally by the AI.

Also: I utilized Claude Code to vibe codification a Mac app successful 8 hours, but it was much enactment than magic

The archetypal 1 is simply a Mac app I've been vibe coding with Claude Code since January. This task is taking a portion due to the fact that I lone person an hr oregon 2 a week to enactment connected it, and it uses MacOS's interior AI for representation processing and analysis.

Here's the plan arsenic it exists successful my app close now. A batch is happening here. I'm peculiarly invested successful the large buttons connected the left, due to the fact that they bespeak the marque colors for my wife's e-commerce business. They besides construe truly good to the iPhone app:

I uploaded that screenshot to ChatGPT and fed it the prompt, "Redesign this idiosyncratic interface to marque it much charismatic and easier to use." Here's what ChatGPT Images 2.0 created:

At first, I didn't similar the alterations. The astir evident alteration was the nonaccomplishment of the colored buttons. But the AI besides didn't rather recognize that determination are viewing options astatine the bottommost of the grid view.

Also: How AI has abruptly go overmuch much utile to open-source developers

On the different hand, look astatine those reddish squares. Those are the areas from the caller mockup I truly like, and program to incorporated into my UI:

The acceptable of actions connected the little near were icons connected the iPhone app, but look acold amended with the UI presented by the AI.
Likewise, the AI added a overmuch clearer header portion astatine the apical of the grid view, arsenic shown successful the apical mediate reddish box.
The AI besides dispersed retired the signifier thumbnails, giving them much breathing country to marque the enactment container wide and attractive, arsenic shown successful the little reddish container successful the middle.
The AI added a favorites enactment that I haven't wired in, but truly like.
Finally, I similar the thought of a persistent Added/Updated tract astatine the bottommost of the item view.

My large takeaway from this workout is those 5 caller plan notes I program to incorporated into my product. I'm not redesigning the full app to bespeak the suggested UI. However, the representation included immoderate large ideas.

Plus, having a mockup similar this volition marque it overmuch easier to amusement Claude Code what I'd similar it to do. This workout is simply a large illustration of utilizing the $20/month ChatGPT Plus program and the $100/month Claude Code Max 5x plan to physique amended software.

Web interface plan

Next up is the UI for the starting leafage for my information product. My plan is cleanable but rather rudimentary, mostly reflecting the information that I dislike coding successful CSS.

Also: I did 24 days of coding successful 12 hours with a $20 AI instrumentality - but there's 1 large pitfall

Last fall, successful my archetypal agent-based vibe coding task ever, I utilized OpenAI's Codex successful my ChatGPT Plus program (which ran retired of AI allotment rather fast) to redesign the UI from reasonably disfigured to unobjectionable. Here's the effect of that archetypal walk past fall. I did the design, telling Codex wherever and however to laic retired the CSS:

The results from my investigating this week were interesting. I pasted the screenshot into ChatGPT, but accidentally deed instrumentality earlier I could springiness it a prompt. ChatGPT decided connected its ain to analyse the page, deducing that "The biggest issues are anemic ocular hierarchy, excessively overmuch gray, a precise agelong intro block, and 3 little cards that vie arsenic for attraction adjacent though they are not arsenic important."

It besides recommended a "more modern admin aesthetic," including:

White paper backgrounds alternatively of ample grey panels.
Softer borders.
More spacing betwixt sections.
One beardown accent color, utilized consistently for buttons, links, and progressive states.
Shorter enactment lengths for assemblage text.
Better opposition betwixt headings, subheads, and assemblage copy.

Also: Claude Code made an astonishing $1B successful 6 months - and my ain AI-coded iPhone app shows why

At this point, I decided to prosecute Images 2.0 and instructed, "Provide maine an representation of the redefined interface." Here's what the AI produced:

This output besides provides immoderate plan notes I tin spell backmost to Codex with. I usage OpenAI's Codex with the web merchandise and Claude Code with the Mac product, chiefly to springiness maine acquisition with the 2 agentic coding tools truthful I tin constitute astir them. If I didn't person penning present arsenic my superior goal, I'd take 1 instrumentality oregon the other. I've recovered some to beryllium arsenic helpful.

Also: How Claude Code's caller car mode prevents AI coding disasters - without slowing you down

ChatGPT Images 2.0 decided to invent a logo (mostly due to the fact that I hadn't provided it with 1 successful my archetypal image). The AI added respective features I liked.

First, I truly liked the wide plan aesthetic it recommended. It mightiness beryllium a batch of enactment to propagate that done the remainder of the merchandise (it's a elephantine product), but I did similar the design.

Additionally, I liked however the AI promoted 3 abstracted user-help areas: the Quick Setup zone, the Need Help zone, and the Configure Privacy/View Docs conception astatine the top. While the archetypal interface gave users entree to information, it truly didn't marque it evident wherever to begin.

I besides liked the Site Status conception astatine the bottom. I've often thought astir adding a diagnostic similar that, but was a spot daunted by the coding requirements, due to the fact that the presumption elements would person to alteration based connected which freemium plugins the idiosyncratic had installed. Still, seeing a practice of that diagnostic made maine privation to adhd it.

This is game-changing

I consciousness this capableness is arsenic game-changing arsenic ChatGPT was backmost erstwhile it archetypal came out, and arsenic agentic brace programming was erstwhile it landed past summer.

Also: I built 2 apps with conscionable my dependable and a rodent - are IDEs already obsolete?

I submitted 2 merchandise idiosyncratic interfaces to the AI and received fundamentally peer-reviewed commentary, on with a acceptable of prototype designs. As a solo programmer, this output is invaluable.

Even if I had a afloat in-house team, with programmers and designers connected staff, it would astir apt person taken a week oregon truthful to tally this investigation and conception prototypes to review. The payroll expenses unsocial for that task would person been reasonably substantial. But for $20, I was fixed 2 precise helpful, precise constructive, and not-at-all-AI-stupid redesigns that contained actionable nuggets that volition marque my products better.

Just wow.

If you were pairing ChatGPT Images 2.0 with Claude Code oregon Codex, would you usage the representation mockup arsenic a plan little for the coding agent? Let america cognize successful the comments below.

You tin travel my day-to-day task updates connected societal media. Be definite to subscribe to my play update newsletter, and travel maine connected Twitter/X astatine @DavidGewirtz, connected Facebook astatine Facebook.com/DavidGewirtz, connected Instagram astatine Instagram.com/DavidGewirtz, connected Bluesky astatine @DavidGewirtz.com, and connected YouTube astatine YouTube.com/DavidGewirtzTV.

Read Entire Article