Improving the UI of Canvas Power Apps with AI

Copilot is not (yet) capable of making Canvas Power Apps for us (Yes, I have tested the new Plan designer as well as the current Power Apps copilots). However, this does not mean that artificial intelligence cannot be utilized in making Power Apps.

But how could AI help us with one glaring problem that many Power Apps I see have?

In a horrible-looking interface.

The reason for unfinished-looking user interfaces is natural. Unfortunately, Power Apps rarely involve someone who specializes in user interface design and/or visual appearance. These two things often go hand in hand. This time, let’s focus purely on cleaning up the appearance of the application.

Example – Account Manager Mobile App

Let’s create an application that gives account managers access to all the information they need for their work.

The home screen consists of the following elements:

• Top banner with app name
• Account manager’s basic information (name, address, status)
• Accounts under the responsibility of the account manager
• Navigation in the footer (Home, My Tasks, My Hours, Settings)

A responsive application built using containers will probably look like this without any additional tweaks.

We don’t have a visual designer available, so we’ll use Copilot to assist us. Could it give us some tips on how to make the layout cleaner?

Cleaner UI – Copilot

Let’s give Copilot a picture of the user interface and instructions

• A brief description of what entities are on the screen
• Visually separate user information and customer list
• Add enough white space everywhere
• Use the given brand colors

Copilot provides written instructions for improving the appearance. Colors are included, but exact font sizes and margins are missing. The information that the top banner should have “Generous top and bottom padding” is not very helpful.

But we can ask Copilot for an example of the layout!

The end result is a bit surprising. We get a visually impressive proposal where the information is divided into two screens. Copilot has added new content to the screens, which is difficult to identify from the image. The address field on the home screen is too short (valued at “46”) and the content on the second screen is so messy that I don’t really know what it is supposed to show.

Not completely useless. However, this is more of an image that could be used as inspiration for the design phase. This is a bit late now. I would just like a suggestion on how to clean up the current screen.

However, I ask Copilot for a new version where all the information is on the same screen.

The end result is even wilder than first one.

Cleaner UI – Copilot (another company)

But oh no! I was using Copilot in the wrong place. That is, the old version.

Let’s go to https://m365.cloud.microsoft/chat where we’ll find a brand new version of M365 Copilot Chat. It should use a more advanced language model for image generation.

The end result is not any better.

Don’t be discouraged. Let’s try again with Visual Creator Agent.

Okay. I give up.

Cleaner UI – ChatGPT

In addition to Microsoft’s Copilot, I also use ChatGPT in my work. The reason is obvious. They have their own strengths.

Let’s give ChatGPT the original image of Power Apps and the same instructions as for Copilot.

ChatGPT starts, like Copilot, by giving instructions in text format. This time, the instructions also include margin amounts, font colors and sizes, and much more that Copilot’s answer was missing.

Finally, we ask for a picture of the proposed user interface.

This isn’t a masterpiece. But it’s exactly what I was looking for. A visually clean version of the app I’ve been working on.

Implementing changes suggested by ChatGPT

I first make the changes by following the instructions provided by ChatGPT. All this without looking at the example image I requested at the end.

After this, I will do another round using the example image generated by ChatGPT. From this, you can pick up any details that are missing or unclear in the instructions.

The app now looks like this. A definite improvement over the original. All of this took about 30 minutes.

But why settle for this? Let’s ask chatGPT for suggestions for improvements to the new version we just made.

And so the iteration continues.

Copilot/ChatGPT and YAML

Could the changes suggested by AI be implemented more easily? Canvas Power Apps is essentially YAML code.

The code for our original screen looks like this. 404 lines in total.

We ask Copilot to generate YAML code from the screenshot we provide. And it kindly generates one.

Unfortunately, the Copilot code does not work in Power Apps. The reason becomes clear when you compare it to the code in our original screen. The syntax is different and the length of the proposed code is only 58 lines.

The end result is not that much better with ChatGPT. Even if both were given the original screen code as a reference. Or links to documentation on the subject.

Well, maybe this will work again in the future.

Summary

If your visual eye is average and you don’t have a professional designer available, you can significantly improve the visual appearance of your Power Apps by utilizing these new tools. I recommend trying out several tools to achieve the best results.

There was a clear difference in the assistants I tested

• Microsoft Copilot can create mood images as a basis for design ideation
• ChatGPT is able to provide detailed instructions on how to improve the appearance of an already created application.

But this is a clear improvement with little effort. It’s not the work of a professional visual designr. But it is an improvement.