An illustration of someone working with an AI to code an app for him.

In short:

  • Give it a reference as inspiration of a type of UI you like. For example Vision OS from Apple that has a lot of shadows and smooth animations. Ask

  • Ask it to use modals for the forms to add or edit elements

  • Ask it to put the navigation and buttons in a sidebar


The main prompt

Make the UI more modern and inspired by Vision OS and use #FF5C5C as the accent color, #F9F8F4 for the backgrounds, #E5E3DA for the button backgrounds.

Other things to ask

  • Modals: Put forms in modals that open with one button instead having the whole form on the main page

  • Sidebar: Put the navigation and main buttons in a sidebar

Example of result

I'll show below an example of an UI for a coaching impact tracker app prototype I've built using Canva Code. You'll see how the app looked before and after the prompt. I've used similar prompts in other tools like Lovable or Replit.

Before

After

The full prompt I used was here obviously a bit longer as I made also other changes. Here's the full prompt:

Make the following changes:

In the "Add new session modal: 
- Add in the form when adding a session ask for the type of impact: "I feel more..." or "I feel less" and then make the description of that feeling a one word input field.
- Add in the form a note field that is optional

In the dashboard part:
- Add two word clouds one for all sessions "I feel less" and one for all sessions "I feel more"
- Add an overview with the average percentage increase, the number of coachee, the number of sessions

In the recent sessions part:
- Make it possible to edit and delete the coaching impact measurements.
- Make the past coaching impact measurement list more compact

Overall
- Put the title of the app, it's description, the add new session button and manage coachee button all in a sidebar.
- Make the UI more modern and inspired by Vision OS and use #FF5C5C as the accent color, #F9F8F4 for the backgrounds, #E5E3DA for the button backgrounds,