What's a good prompt for AI coding tools to get better UIs?

What's a good prompt for AI coding tools to get better UIs?

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.

Open the prototype

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,

Q&A: Prototyping and Service Design

Buy nowLearn more
  • How can I create a storyboard if I don’t know how to draw?
  • ▶️ How can I prototype a service if I'm not a designer or maker?
  • ▶️ What are advanced prototyping methods for Service Design?
  • Where can in find high quality stock videos and resources for my prototypes?
  • What's the difference between a test and a prototype?
  • What's one of the quickest service prototypes you can create?

Prototyping Planning and Strategy

  • How do you know if you're testing the right assumptions in prototyping?
  • How can you push yourself to test and iterate more?
  • How to use a Service Blueprint for better prototyping?
  • What are the different types of prototypes?
  • How many different prototypes should I build or test?
  • What should I do when I'm not sure how to prototype?

Theater prototyping

  • How can I make role-play or theatre prototyping much easier?

Digital Prototyping

  • How long does it take to create a working app with Replit?
  • What are tips when using AI code generators like Replit or Lovable to create a prototype of an app?
  • What no-code tools do I recommend for creating prototypes or pilots?
  • What's a good prompt for AI coding tools to get better UIs?
  • How I create video stories for new service ideas with AI
  • Why do I often prefer stock video over AI videos for my service prototypes?

Backstage Prototyping

  • How can you prototype and test stakeholder commitment?

Presenting Service Design prototypes

  • How to present Service Design prototypes in a mini exhibition format?