By skyforbes 
Generative UI is evolving at lightning speed, and nowadays we can achieve impressive results simply by asking AI tools to generate UIs for us. And the great thing is that you don’t need to switch from ChatGPT to any other tool to generate UI.
In this article, I want to experiment with ChatGPT 5 and generate UI for a mobile application.
Product details and writing the initial prompt for ChatGPT
What I will do is simply complete the same experiment I did in April 2025 with ChatGPT 4o. I will be building a food delivery mobile app. If you’re interested in learning more about a previous experiment, please check the following article:
And I will use the same prompt as before
# 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
Prompt writing is one of the most (if not the most) challenging parts of the design process with AI. To make things easier for you, I will provide some tips that will help you make the most of ChatGPT. Some practical tips for writing a prompt:
✅ Use markdown format. Markdown gives your prompt a structure and makes it easier to scan for both you and AI.
✅ Describe layout, purpose, style, and even platform. Clearly state what you’re building—web app, iOS, Android. It will guide AI on what interaction patterns it should use.
✅ Mention visual styles explicitly if you’re looking for a particular look (i.e., rounded icon, 32px)
✅ Use of numbered sections. This is a nice addition to Markdown that gives a clear sequence of layout construction. This will benefit both you and AI.
✅ Use bold (i.e., **text**) for emphasis. It will enhance clarity. Try to use markdown styling consistently (i.e., in my example, I use bold for top-level attributes of a section.
✅ Use up to 3 levels of elements in markdown hierarchy. Using more than 3 levels ( #, ##, ### ) might distract from the intent. GPT might simply fail to parse the complex hierarchy correctly.
✅ Provide clear descriptions of a style and functional 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.
💡Quick tips:
- Instead of writing markdown text yourself, you can provide a prompt in a plain text format and ask ChatGPT to format it using markdown.
- If you want to achieve the exact structure of I’ve used in my example, you can provide the prompt I’ve shared above to ChatGPT as a reference (copy and paste it to the input field) for ChatGPT, along with your prompt in plain text and ask ChatGPT to use it when turning your prompt into markdown-formatted text.
Generating UI step by step
Now, let’s move from a general idea to a coded implementation of our app, all without leaving ChatGPT.
Step 1: Submitting prompt to ChatGPT
Once you submit the prompt, ChatGPT starts to analyze what you want to build. Unlike ChatGPT 4o, ChatGPT 5 starts small. Instead of opening a visual canvas for creating a mock right away, it begins by writing a description of the design that the AI plans to implement.
Quite interestingly, ChatGPT invites us to generate UI in Figma or as React Native/SwiftUI code. Recently, ChatGPT made it possible to tag Figma right in the prompt and ask it to generate something. I will test Figma integration later in this article.
Step 2: Asking ChatGPT to mock UI
Once we check a detailed description generated by ChatGPT and ensure that the tool understood what we want to build correctly, we can move to the next step and ask it to generate a mockup of UI for us.
All we need to do is provide a follow-up prompt
create a visual mock of this screen
And ChatGPT will do exactly what we asked it to do—it will launch image generator and create a mockup of our future screen.
If we compare the design generated by ChatGPT 5 with a previous version of a tool, we will see that the output is much better now. Not only do we not have trims at the top and the bottom of the frame, but ChatGPT also followed our instructions more precisely, and as a result, we have a better output.
However, if you look closely, you will see some visual defects here and there. Such as — extra Back button at the top left corner of the screen, lack of visual indication for interactive elements like location selection and Search field, unnecessary elements for rating and price
Depending on the nature of the defects, we can either provide a follow-up prompt for ChatGPT, asking it to fix them, or send the design to Figma or the code to do that.
Step 3: Sending design to Figma
What I will do next is send this design to Figma to fine-tune it. To do it, we will ask ChatGPT to generate this UI in Figma using a prompt.
Generate this UI in Figma using a prompt (as a ready-to-import layout)
ChatGPT will ask you a few questions to clarify the design, such as the type of design artefact you want to create, the viewport size, and the screen mode.
Once you do this, Figma will generate you a .fig file that you can download and open in your Figma.
Knowing that OpenAI is actively working on integrating tools in ChatGPT, I think this step, with downloading the Figma file, will be obsolete in the next iterations of ChatGPT. So in ChatGPT 6, we will likely see Figma canvas, where we will have our design.
But for now we need to download file and open in Figma.
Quick note: Figma .fig generation isn’t stable in ChatGPT 5 (at least for me), so if you see an error message like “File not found” when trying to download it, you can download raw image, launch Figma, and use a plugin called Codia to convert the image into Figma.
Step 4: Getting a code for our design
What I really like about ChatGPT is that it can generate not only a visual mock but also code your solution. If I provide a follow-up prompt like
Generate this in ChatGPT code canvas
ChatGPT will start doing exactly that.
And when you click the Preview button, you will enter a preview mode where you can actually see your prototype (not just a visual, but an actual product). Quite interesting is that this design is more aligned with the original prompt. And you can download and use this code when you want to show how your product will work for demo purposes.
Evolution of vibe product building using AI
Many people use the term “vibe coding,” but I think that this is not the right term for building products. It’s no longer just ‘vibe coding’ but rather ‘vibe product building.’ In the not-so-distant future, we will spend less time on tools like Figma or VS Code and more time on tools like ChatGPT and Claude when we are building our products. It’s even possible that the entire step with pixel pushing in Figma and coding solution in VS Code will be obsolete for many product design tasks, and we will simply use AI to generate the final output.
🚨 New AI-powered product design community 🚨
If you’re passionate about building digital products and want to make the most of latest tools (including AI tools), I’d love for you to join me in the Product Design Community on Skool. You will have access to tutorials and cheatsheets for design and automtion tools as well as live Q&A sessions with me
👉 Join here: https://lnkd.in/dS-FTQ-G