How I use AI for UI/UX mockup

As a frontend engineers we spend our time creating, modifying and developing responsive layouts daily and This plays very important role in bringing any webapp to the life and the most important part is played by the UI/UX designer who helps us creating stunning visually appealing UIs.

But for some personal fun project or some quick mockup we might need a few designs. For finding few UI designs we can use the websites like Product Hunt, Dribbble or many other similar sites.

The above website shows us the stunning designs but integrating the designs we see on these platforms can be overwhelming and for finding the color combinations and color contrasts so the text should be visible and all these things are part of the design. Along with all these things finding design, mixing and matching with our idea will be hard for many developers to design and it is time consuming.

Also, the freshers who gets started with the Frontend they struggle with creating a visually stunning UIs hard as a beginners.

---

My company had an old website they needed it to be completely revamped and we didn’t have any UI/UX designers and they were asking for suggestions on how to we make the colors good and which should be around our company color theme.

But we tried to show many of the designs online but most of them might needed a complete rework as we might need to redesign the all the components of the webpage.

We didn’t want to spend time on completely rewriting the components and re-designing the web pages and The only requirement by manager was it needs little revamp from the perspective of colors.

---

That’s when I started looking around for the option to generate something colors from the company logo and I use this website from Adobe for the extracting the color theme from the logo.

Then I started looking for changing the current UI with some color change as per the logo theme I have been using the Uizard which is a great tool for taking screenshot and converting it to UI, but after few free trails. It got locked behind a paywall.

Then, I thought of trying the ChatGPT after giving just logo and the screenshot of the old website with proper prompt I started getting UI/UX mockups and After generating multiple mockups. I selected a mockup and asked it to generate the color palette used in this generated UI/UX of my selection and it gave me the list of the color.

After this I just changed the given color code by the AI and the UI was completely changed with proper contrast and added few box shadows to make it modern.

---

Another time, I was working on different UI design had a card which needed some changes in the images that is they wanted to change the illustration images to the icon based images. After making the changes to the given icon the page was not looking visually appealing and was lacking some color.

That when I took the screenshot of the web app and ran through it through ChatGPT and asked it to add some background color to the icons and that when after generating multiple option I added the color given by AI. The generated color were taken from the icons itself and the AI gave a lighter version of color used in icons it made the things more visually appealing.

I shared the latest version of the design with the team and they were happy with the changes.