Is it possible to use ChatGPT to generate UI design? Yes!
Will it be a well-crafted design? This article will answer this question. And offer some practical tips on how to make the most of UI design with ChatGPT 4o.
Brief evolution of ChatGPT UI generator
It’s not the first time when I have tried to use ChatGPT to generate UI design. My first attempt to use the tool for this purpose was back in 2023, when it didn’t even have a built-in image generator. So, I used the tool primarily to generate layout design ideas.
Designing a landing page using ChatGPT
The next attempt was when DALL·E was integrated into ChatGPT. However, the output it generated was not good enough, mainly because DALL·E 3 generated images with gibberish text.
Step-by-step guide to generate UI design using ChatGPT 4o
OpenAI recently made a significant update for ChatGPT, so now 4o is capable of generating sophisticated UI designs with real text.
The process of generating UI design starts with a good prompt. In my case, I will design a home screen of a food delivery app called Foodiez (fictional app) and will use a markdown prompt for that.
Why markdown?
Markdown naturally has a content hierarchy (with headings like ## Header), offers a logical grouping of UI sections, and provides better readability 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 tips for writing prompt:
✅ Use of numbered sections. It will give a clear sequence of layout construction. This will benefit both you and AI.
✅ Use bold (i.e., **text**) for emphasis. It will enhance clarity.
✅ Provide clear descriptions of style and behavior. Clearly explains how certain elements should look and work (e.g., “Horizontally scrollable cards with rounded corners and soft shadow”). This is the trickiest part of the process, as you clearly need to understand how something should look and work.
Once you submit the prompt to ChatGPT 4o, the process of generating imagery will start. The image generation process is not very fast (at least for ChatGPT Plus users) — it generally takes around a minute or two for AI to generate image. It’s quite funny that OpenAI uses a very nostalgic effect for the image generator — the image gradually “loads” from top to bottom. Somehow, this reminds me of the early days of the internet when all images were loaded in a similar manner because of a slow internet connection.
Below, you can see a raw output of the design ChatGPT generated based on our prompt.
There is a strong correlation between the provided prompt and the output it generated, but still, there are a few things that need to be fixed, such as text (i.e., “Los” in the top left corner instead of LA or Los Angeles, “Orders” two times in bottom tab bar).
Here is a follow-up prompt that I submit to ChatGPT in an attempt to fix the issues:
Remove extra Orders navigation option from the bottom Tab bar and
change "Los" in the top left to "LA"
And here is what ChatGPT generated (Note: I didn’t crop the image; it is still raw output).
As you can see, ChatGPT changed the “Los” to “LA” but failed to remove the extra “Orders” option (it completely eliminated “Orders” from the bottom tab bar). It also introduced minor changes in UI design, such as changed imagery, arrangement of text, and style of some UI controls (such as All Types).
UI design process with ChatGPT
It’s possible to establish a new process for UI design where AI tools play an integral role. Here is a process that I follow for ideation phase:
- Identify what you want to build (UI design goal)
- Write & validate the prompt (ensure it resonates well with your UI design goal). Read it out loud!
- Submit your prompt to ChatGPT to visualize your design.
- Review the design generated by AI to understand whether it works for you or not.
- Refine prompt and iterate
If you’re looking for a solution that will generate a final, pixel-perfect design, ChatGPT is not the right one (at least at this time). But if you’re looking for a tool that will help you quickly experiment and try different ideas, ChatGPT can be a very good helper for that.
Remember that you still need to refine your design in Figma. There are two ways you can do it. Either use a design generated by ChatGPT as a visual reference and rebuild it in Figma from scratch (aka reverse engineering) or use Figma plugins like Codia that promise to turn image into Figma.
Vibe coding using AI
One thing that becomes more and more evident to me is that the way we build products quickly changes. I believe that in the not-so-distant future, we will spend less time on tools like Figma and more time on tools like ChatGPT and Claude. It’s even possible that the entire step with pixel pushing in Figma will be obsolete for many product design tasks, and we will simply use AI to generate not only design but also code.
One tool that I personally love to use for this purpose is Cursor AI. I’ve shared my experience creating a fully simple by functional mobile and web app using this tool:
And if you’re interested in learning more about vibe coding, I invite you to join my free Lightning Lesson in late April, where I will show you how to use the tools in real-time:
Vibe Coding for Product Creators
UI Design with ChatGPT 4o was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.