I made an App UI with ChatGPT...

Join me on a fascinating journey into the world of creativity and design. This adventure is set in the realm of creating a mail app UI with the aid of the impressive capabilities of Chat GPT. Let's use ChatGPT for coding! Whether you're a design enthusiast or simply curious about the potential of AI in UI design, this exploration offers an engaging insight into the possibilities that emerge when human imagination meets the power of language models.So let's take a look at some ChatGPT coding examples!

With the Chat GPT at our disposal, let's see if we can build this UI together.

Designing with Chat GPT

To begin, we navigate through the intricacies of crafting a sleek and user-friendly mail app interface with the help of ChatGPT coding. We start with a brand new Chat GPT mail app, opening up Chat GPT and starting to type. Our goal is to create a sectioned list in SwiftUI, complete with icons, navigation, and text. We also aim to add an edit button, a "just now" update text at the bottom, and a button to create a new mail.

Mail App UI Screenshot

Exploring Mentoring Services

At rebeloper.com/mentoring, I offer mentoring services tailored to guide and empower individuals on their journey in software development. As a mentor, my mission is to provide personalized one-on-one guidance to help you navigate the intricacies of coding app development and software architecture.

Building the Mail App

After providing the desired design to Chat GPT, it assists us by providing the corresponding SwiftUI code. We copy this code and insert it into our Xcode project. We then build and run the application to see the result.

ChatGPT prompts

Making Adjustments

As we progress, we make various adjustments to the code provided by Chat GPT, enhancing the UI of the mail app. We add a toolbar item at the bottom of our view, insert a button to create a new mail, and add the "updated just now" text to the bottom bar.

Final Touches

After making the necessary adjustments, we add final touches to the mail app UI. We add icons to the navigation links, change the elements' numbers, and add a section header to the second section. We also add numbers to the inbox cell and tweak the color scheme for a better visual appeal. Now, is ChatGPT alternative for coding? I'll leave that up to you to decide.

Side by side comparison of the prototype and Xcode simulator

Wrapping Up

With a few prompts and some adjustments, we manage to create a sleek and user-friendly mail app interface using Chat GPT. This exploration showcases the potential of AI in UI design and the exciting possibilities that arise when human imagination collaborates with technological advancements.