UI Design with ChatGPT 4o. Is it possible to use ChatGPT to… | by Nick Babich | Apr, 2025

Is the use of a chatgot to develop a UI design? Yes!

Would this be a well -designed design? This article will answer this question. And Chat offers some practical points about ways to make more UI design with GPT4O.

Short evolution of the Chattgapat UI generator

This is not the first time I have tried to use Chat GPT to produce the UI design. My first attempt to use this device for this purpose was back in 2023, when it did not even have a built -in image generator. Therefore, I mainly used a tool to produce layout design ideas.

The next attempt was when Dal · E -E was integrated into Chat GPT. However, the production he produced was not so good, the main reason is that Dell · E3 produced photos with the text of oppression.

Step Guide to develop a UI design using Chat GPT4OO

Open has recently made an important update for Chat GPT, so now 4O is capable of producing a sophisticated UI design with real text.

The process of producing the UI design begins with a good indicator. In my case, I will design the Foods (Foods (Food Delivery app’s) home screenFantastic app) And Mark Downs will use the prompt.

Why Mark Down?

Mark Dowan naturally is a content rating (with titles such as ## Header), offers a logical grouping of UI parts, and provides better reading for both humans and AI models.

# Foodiez – Home Screen (iOS UI Design)
Design a clean, modern mobile UI screen for an iOS app titled Foodiez – 
Local Food Delivery. The layout should have the following sections:
---
## 1. Status Bar (Top)
- **Style**: Standard iOS layout (top safe area)
---
## 2. Header Section
- **Centered Logo**: Foodiez
- **Font**: Medium weight, small size
- **Color**: Orange text
---
## 3. Location & Search Row
- **Left**: Location indicator (Los Angeles)
- **Right**: Notification icon (rounded, 32px)
- **Below**: Search bar with placeholder Search restaurants or dishes...
- Rounded corners, light gray background
- Search icon aligned left
---
## 4. Featured Restaurants Carousel
- **Style**: Horizontally scrollable cards with rounded corners and 
soft shadow
### Card Items
- **Card 1**
- Title: Sushi Master
- Subtitle: *20–30 min • Free delivery*
- Visual: Sushi photo thumbnail
- **Card 2**
- Title: Pizza Mia
- Subtitle: *15–25 min • $5 delivery*
- Visual: Pizza image thumbnail
---
## 5. Filter Row
- **Dropdown Filters**:
- Delivery Time – e.g., "Under 30 min"
- Cuisine – e.g., "All Types"
- Rating – e.g., "4+ stars"
---
## 6. Popular Nearby Restaurants List
### Layout
- Vertical stack of repeatable items
### Restaurant Card Item
- **Left**
- Restaurant image (rounded, 64x64)
- **Center**
- Name (e.g., Burger Zone)
- Subtitle: Cuisine + delivery time (e.g., *Burgers • 20–25 min*)
- Rating: Star icon + score (e.g., ⭐ 4.7)
- **Right**
- Favorite icon (♡ outline)
- **Bottom Row**
- Delivery fee (e.g., $5 delivery)
- Promo badge (if applicable): 10% Off Today!
---
## 7. Bottom Navigation Bar
- **Tabs** (Icons on top, labels below):
- **Home**
- State: Active
- Style: Highlighted icon and label (orange)
- **Search**
- State: Inactive
- Style: Default gray icon and label
- **Orders**
- State: Inactive
- Style: Default gray icon and label
- **Profile**
- State: Inactive
- Style: Default gray icon and label
- **Spacing**: Equal horizontal spacing
- **Padding**: Bottom safe area included

Some practical points to write quick writing:

✅ ✅ Use of number parts. This will give a clear series of setting construction. This will benefit both you and the AI.
Use bold (ie, ** text **) for Possibis emphasis. This will increase the explanation.
Provide a clear explanation of style style and behavior. Explicitly explains how some elements should look and work (For example, “scrubable cards horizontally with round corners and soft shadows”). This is the most difficult part of the process, because you need to clearly understand how something should look and work.

Once you point to Chat GPT4O, the process of creating the image will begin. The process of image generation is not too fast (at least for Chat GPT Plus users) – usually takes one or two minutes in the AI ​​to produce a picture. It is funny that the open image uses a very old effect for the generator. This picture slowly “loads” from top to bottom. Somehow, it reminds me of the early days of the Internet when all the pictures were filled in the same way because of the slow connection to the Internet.

Below, you can see the raw output of the design chat gutes made based on our indicator.

There is a strong connection between the indicators and its output, but still, some things need to be fixed, such as Tech (ie, LA or Los Angeles in the top left corner, twice in the “orders” tab bar).

Here is a follow -up gesture I offer to Chat GPT in an attempt to fix matters:

Remove extra Orders navigation option from the bottom Tab bar and 
change "Los" in the top left to "LA"

And this is what the Chattgat has developed (Note: I did not harvest the image. This is still a raw output).

As you can see, Chattgupt turned “Los” into “LA” but failed to remove the extra “orders” option (it completely removed the “orders” from the tab bar). It has also introduced minor changes to the UI design, such as changing imagery, text management, and some UI control (such as all types).

UI design process with Chat GPT

It is possible to establish a new process for the UI design where AI tools play a role. Here is a process that follows I follow for the IDS phase:

1. Identify what you want to make (UI design purpose)
2. Write and verify the prompt (make sure it resonates well with the purpose of your UI design). Read it loudly!
3. Submit your gesture to Chat GPT to imagine your design.
4. Review the design created by AI to understand whether it works for you.
5. Improve quick and repetition

If you are looking for a solution that produces a final, pixel perfect design, Chat GPT is not correct (at least at this time). But if you are looking for a device that will help you experience quickly and test different ideas, Chat GPT can be a great helpful for it.

Remember that you still need to improve your design in Figma. There are two ways you can. Use the design made by Chat GPT as a visual reference and rebuild it from Scratch (Arf Reverse Engineering) to Figma or use Figma plugin Corruga Promise to turn the picture into a fagma.

Coding sound using AI

One thing that becomes more and more clear to me is that the way we produce the product changes rapidly. I am sure that in the future of remote, we will spend less time on tools like Figma and more time on tools like Chat GPT and Cloud. It is also possible that all steps will be obsolete for many of the product design works, and we will use AI not only the design but also the code to produce the code.

A tool I personally like to use for this purpose is the cursor AI. I have shared my experience to make this tool completely easier through the Functional Mobile and Web app using this tool:

And if you are interested in getting more information about web coding, I invite you to join my free power lesson at the end of April, where I will show you how to use tools in real time.: