What's a good prompt for AI coding tools to get better UIs?
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,