Thanks! Odd that I couldn't find any prompts before that prompt in my ChatGPT's chat history. I may have just provided ChatGPT a basic app idea and asked it to put together a prompt for me to be used for UI generation, then I removed the unnecessary details from its answer.
Whatttt!!! This is incredible! I’m so going to try that. You think if I have low fi mocks I can add it to ChatGPT and it can create a design system for me…probably not but maybe there’s a tool that can and directly link to FIGMS
The evolution of AI-generated UI is fascinating to track - what a leap from those cartoonish mockups to something actually usable! As someone who's worked extensively with e-commerce platforms, I'm seeing huge potential here for rapid prototyping different purchase flows and testing variant designs without the traditional design bottlenecks.
What strikes me most is how this combines with other tools like Figma to create a complete workflow - generate, refine, implement. This mirrors the pattern I've found in product development where the ability to quickly visualize concepts dramatically accelerates stakeholder alignment.
Nice work! And well done on applying it to something useful ha! I was wondering what you think this means for no/low code prototyping tools? Do you prefer this workflow and tech stack over something like Bolt?
Good question! I think tools like Bolt have their specific use cases and I would still rely on them to do so. For ChatGPT in the short term, I see this kind of UI generation task more of an experiment and don't expect it to generate prototypes (or even high-quality UI). But if one day, ChatGPT can do it equally well, that would be convenient without dealing with multiple tools.
Thank you! Haven't quite thought of that. I think I probably just provided something that was around: "Can you help me generate an effective prompt for ChatGPT to create a realistic user interface for a mobile app that [achieve certain user goal]. Here is my basic idea: [simple layout description]."
Thanks Eric! I think in my case, I had to wait for one minute after some iterations. And sometimes it stopped after generating half of the image, so I had to restart ChatGPT. There were certainly odd things that happened.
Thanks for the reply! Yeah I think Sam was “complaining” all these image generations were melting their GPUs so they had to add some rate limiting measures.
Thanks Brad! The article you shared got me thinking. I was actually in the middle of building a Ghibli art generator, but given the controversies, I took a pause.
There may be controversies in the UI area too, once it gets enough attention and scrutiny.
Ha! The fact that you wanted to use Figma seems to be quite the controversy these days too 8-) I really appreciate how you investigated the issue through your own lens and brought some application to the conversation, while acknowledging nothing is perfect but sometimes its useful.
Very cool! Can you elaborate on how you use ChatGTP to generate that first prompt with markdown?
Thanks! Odd that I couldn't find any prompts before that prompt in my ChatGPT's chat history. I may have just provided ChatGPT a basic app idea and asked it to put together a prompt for me to be used for UI generation, then I removed the unnecessary details from its answer.
Can't you get it to stop with the typos?? The screens are littered with them!
Did you try with Claude too?
Yeah, but not for this test—as I know Claude can generate a "code-backed" UI, but not "image generation".
Whatttt!!! This is incredible! I’m so going to try that. You think if I have low fi mocks I can add it to ChatGPT and it can create a design system for me…probably not but maybe there’s a tool that can and directly link to FIGMS
Both V0 and Bolt can do what you described. You can try them out. Just ask to create a design system based on the snapshots of your low-fi mocks.
It won't be as comprehensive as a a design system, but you may be surprised by the outcome.
Fantastic outcome. Thank you for your invested time.
Thank you! 🙏
The evolution of AI-generated UI is fascinating to track - what a leap from those cartoonish mockups to something actually usable! As someone who's worked extensively with e-commerce platforms, I'm seeing huge potential here for rapid prototyping different purchase flows and testing variant designs without the traditional design bottlenecks.
What strikes me most is how this combines with other tools like Figma to create a complete workflow - generate, refine, implement. This mirrors the pattern I've found in product development where the ability to quickly visualize concepts dramatically accelerates stakeholder alignment.
For anyone building digital solutions, this kind of AI-powered visual thinking tool fundamentally changes the conversation from "describe what you want" to "react to what you see." I recently explored this collaborative intelligence approach in depth at https://thoughts.jock.pl/p/collaborative-intelligence-spectrum-ai-human-partnership-framework.
Nice work! And well done on applying it to something useful ha! I was wondering what you think this means for no/low code prototyping tools? Do you prefer this workflow and tech stack over something like Bolt?
Good question! I think tools like Bolt have their specific use cases and I would still rely on them to do so. For ChatGPT in the short term, I see this kind of UI generation task more of an experiment and don't expect it to generate prototypes (or even high-quality UI). But if one day, ChatGPT can do it equally well, that would be convenient without dealing with multiple tools.
Great post Xinran, can you share some good references on pre-prompt formatting that guided the final chatGPT UI prompt?
Thank you! Haven't quite thought of that. I think I probably just provided something that was around: "Can you help me generate an effective prompt for ChatGPT to create a realistic user interface for a mobile app that [achieve certain user goal]. Here is my basic idea: [simple layout description]."
This is great especially seeing your workflow. Did you get rate limited along the way? I got to wait five minutes after generating 3 images
Thanks Eric! I think in my case, I had to wait for one minute after some iterations. And sometimes it stopped after generating half of the image, so I had to restart ChatGPT. There were certainly odd things that happened.
Thanks for the reply! Yeah I think Sam was “complaining” all these image generations were melting their GPUs so they had to add some rate limiting measures.
I see. Yeah, I can see that happen. Might be a sweet pain for OpenAI :)
And the rate limit message seems to be a quick fix from them, which is not perfect.
Yeah. Gotta buy more GPU or optimize their model
Way to take it beyond the Ghibli debate Xinran.
Thanks Brad! The article you shared got me thinking. I was actually in the middle of building a Ghibli art generator, but given the controversies, I took a pause.
There may be controversies in the UI area too, once it gets enough attention and scrutiny.
Ha! The fact that you wanted to use Figma seems to be quite the controversy these days too 8-) I really appreciate how you investigated the issue through your own lens and brought some application to the conversation, while acknowledging nothing is perfect but sometimes its useful.
Thank you! 🙏
4o is so much better with images now
You are so fast, Anfernee! Yes, I was surprised by the update.
Happen to be on Substack and your post popped up.
😁
"incel for freelancers" lolol