Everyone has heard of ChatGPT by now. We also assume you've played around with prompts testing the platform's magical abilities, haven't you? Although it's been a few months since its release, the hype around ChatGPT is far from subsiding. OpenAI's invention has simply startled the world and is not likely to drop out of the spotlight after a few weeks.
Millions of users, thousands of experiments and numerous articles — whether it’s to write copy or generate code, you’ll find dozens of studies describing how ChatGPT can assist you. Of course, at weave.ly we’re fascinated by ChatGPT's capabilities too. We didn't want to clutter the web with yet another clickbait ChatGPT post. Instead, we wanted to detail our experiments in using ChatGPT to prototype the UX and UI of new digital products. No “how to make €1000 using ChatGPT” or “10 awesome prompts” here!
In this article we’ll run you through a reproducible set of steps to generate Figma prototypes from ChatGPT output.
A Brief Summary
The core of generating prototypes using ChatGPT revolves around its ability to generate HTML (and CSS). However, the output is rather modest due to ChatGPT's UX and UI limitations. This being said, in some cases the raw HTML output of ChatGPT might suffice for you. We personally recommend you to start here if you want to purely generate HTML.
In our experiments we wanted to take prototyping using ChatGPT a step further, and incorporate its output in Figma. We essentially found a three-step procedure to 1) generate HTML code and translate it to a design in Figma, 2) adjust the design to your brand/design system and 3) convert the design into a functioning web app. You might argue that the result is not worth the effort. Indeed, it's not the most efficient way of work, but we're only experimenting here and exploring OpenAI model's potential. As generative AI’s capabilities continue to increase we see a huge potential for methodologies like ours to become commonplace in digital product design. At the same time, you'll see how much better ChatGPT's raw output can get when using this approach.
Speaking of ChatGPT's coding abilities, in principle it is able to generate HTML and CSS for separate pages and sometimes even buttons. However, it cannot develop an entire app. When giving concrete instructions and being precise about each element of the app you want it to generate code for, the output is pretty impressive. So, one of our main takeaways from this case is to be as specific as possible in your prompts.
The Setup: Choosing an Idea
This step might be obsolete, as you’re probably already working on a new product, feature, platform, etc. In our case we decided to completely start from scratch, armed with nothing but an idea: creating a marketplace app for home-cooked meals. To elaborate on this idea, we asked ChatGPT to describe the concept of the app and its structure. For example, what pages and content it must contain. That shouldn't be hard for an AI language model like ChatGPT and it indeed did an excellent job. It also helped us to choose a name for the app - "HomeBite". Quite creative!
Generating HTML with ChatGPT
When it comes to generating code, ChatGPT is less talented in development than it is in copywriting. We asked the model to generate an HTML code for our app, yet it was not able to implement this. This isn’t surprising, developing an entire app is a daunting task. Completely automating this is beyond the reach of what you can do with ChatGPT. Nevertheless, if you sub-divide your product in its various pages and functionalities you can get ChatGPT to generate the necessary code.
The result substantially improved when we asked ChatGPT to "act as a UI designer and frontend developer" and gave it a more specific prompt, such as generating the HTML and CSS for a specific page in our application.
In addition, we asked to generate HTML and CSS for a communication and a cart pages as well as a homepage of the app that needed to be redirected to each page of the app's structure.
User Interface: Colours, Fonts, Logos
ChatGPT came up with a colour palette for our HomeBite app. Colours like yellow, orange and red are the most used in food branding. So, here ChatGPT gets a credit for understanding consumer psychology and selecting a combination of several shades of orange.
We then asked it to generate a more visually appealing CSS for all the above mentioned pages of the app using the new colour palette. Finally, we had to ask it to update the HTML to match the new CSS. Pro tip: avoid this by first starting with copy and UI design before moving to HTML generation!
When choosing a font for HomeBite, ChatGPT gave us several suggestions. Although we didn't do this, it is possible to ask the AI model to generate CSS including both a colour palette and a font. As far as we're concerned it can only incorporate fonts available in Google.
Since ChatGPT is not capable of generating images, it did not help us with creating a logo. The model did recommend a list of tools we could use to create one though. It also provided a prompt to use in Canva's new AI-powered logo generator for creating a logo with HomeBite's colours.
Raw ChatGPT Result
Here we go - that's how a prototype of HomeBite made by ChatGPT looks like. It is partially functioning, but doesn't exactly resemble a final product or a prototype you'd like to share with your users.
The buttons you can see on the page are clickable but they do not trigger any action. This means that it’s only an indication that a button is supposed to be clicked, but in the given prototype it doesn't lead to the opening of a different page. Check it out for yourself.
Speaking of the design, the prototype is not exactly remarkable in terms of UI. To be fair, it doesn't look particularly bad, but definitely can't compare to what a real designer would create. (UX/UI designers sighed with relief ;))
Taking it a Step Further: from HTML to a Figma Design
As you could see, a raw result by ChatGPT is fairly limited from a design perspective despite us trying to make it as visually appealing as possible. Its functionality is far from advanced either.
Therefore, why not use the AI-produced output as a base and at the same time improve the design by tweaking it in Figma and then launching it as a fully functioning web app with real data and conditional interactions?
Thanks to HTML to design, we converted the code into a fully editable Figma design. Now we're free to make any changes to our design. By the way, the tool works as a plugin for Figma and is super convenient for redesigning old websites or getting inspirations from other websites for your own design.
It took us less than an hour to alter the design and make it look more eye-catching. Normally, you would need more time to come up with a design like this if you started totally from scratch.
Launching a Web App from the Updated Design
We're arriving at the final stage of the experiment. So, our design is ready, and we now want to launch a prototype. (Yes, it is a bit of an extra effort compared to simply taking ChatGPT's output, but the quality of the prototype you receive in the end-result is worth it)
What we'll need to do is to use the weave.ly plugin for Figma to assign functionalities to our design and deploy it as a full-fledged web app.
What's exactly the difference between the prototype made by ChatGPT and the prototype launched with weave.ly? For instance, on a meal listing page in a HomeBite app you see a meal and an order button below. With the ChatGPT raw result it’s not possible to press "order" and get redirected to the cart page. However, it is be possible to do so with weave.ly. Therefore, such a prototype is perfectly suitable for user testings.
Check out the prototype here.
In case it's not yet clear how to use weave.ly to create advanced prototypes directly in Figma, in the weave.ly academy you can find a bunch of lessons and tutorials that will help you start and eventually become a pro in prototyping.
Conclusion
We’re not the first ones to conclude that you can’t simply delegate the entire task of development or even prototyping to ChatGPT. However, it does enable you to hit the ground running during prototyping and generate baseline pages and designs.
To summarise its limitations:
- Output requires modifications (regarding both design and functionality)
- Only provides solutions or suggestions, cannot implement them on its own
- Is not able to access external information or perform actions in real-time
- Limited ability to debug complex code or solve coding problems
Overall, ChatGPT does produce a pretty decent HTML for individual pages and perfectly understands information architecture of digital products. This raises a question, whether its inability to generate a source code for an entire app is practically an OpenAI's restriction (their servers are already overwhelmed as it is) or purely because of the complexity of the task itself.
Although there are still limitations here and there, ChatGPT is learning at a very fast pace. So, who knows what it’s got up its sleeve and will be able to do just in a few months?
