Write prompts for AI Generates UI

Prompts are your bridge to communicating with AI. They use natural language to provide task guidance to large language models (LLMs). Effective prompts help AI understand your needs more precisely and generate high-quality UI designs that meet expectations.

Key parts in prompt

Effective prompts typically consist of the following key parts. The clearer your input prompt, the better the result will match what you aim for.

• App type: Specify the app types and target users to make sure it meets industry standards.
• Screens: Describe the core function of the interfaces and clarify the purpose of the page.
• Detailed sections: Outline the main section and functional modules.
• Styles: Specify design styles and visual elements, including theme colors, fonts, and patterns.

Common practices

Explore creative ideas

When you need to brainstorm ideas quickly, use short prompts and the auto mode to generate multiple design styles for your reference. This is very useful in the brainstorming phase.

Motiff generates two reference interface options each time. You can choose the style and layout best fits your needs for different scenarios.

• Mobile: A Recipe page of a health and fitness app for individuals focused on nutrition, providing featured recipes and meal planning options.

• Web: A CRM dashboard page for a gym called GymFlow.

Generate drafts

When you already have a clear idea for your interface, you can use specific and detailed prompts or upload reference images to quickly generate a draft that matches your thoughts.

Text prompt

You can refer to key parts in prompts to refine your descriptions. By using precise prompts, you can generate drafts that align with your expectations.

Here is an example of a music library page to help you quickly create a draft and explore more design ideas:

• App type: A music streaming app for teenagers.
• Screens: Music library page.
• Detailed sections: The top navigation bar has the title “Your library”. Section which users can easily access their favorite playlists, podcasts, and artists. The bottom navigation bar has tabs for “Home,” “Search,” “Library,” and “Profile”.
• Styles: Dark mode with a purple theme color.

Upload images

When you have already sketched out your requirements as wireframes or found a suitable reference image, you can upload the image. The AI will analyze and try to replicate the layout structure, content, and design style from the image.

• If you want to recreate the design style and elements of the interface, you can only upload the image as your input.
• If you want to reference the layout and content of an image, you can upload the image and include a text prompt to clarify your intent.

Generate a complete set of interfaces

When you need to design a full set of interfaces, you can input prompts step by step to generate the design for each page and ultimately build a complete set of product interfaces.

For example, you can follow the steps listed below to generate a complete set of interfaces for a plant care management app.

1. 1.

   Input text prompt for the homepage:

   A mobile app designed for plant enthusiasts to manage and care for their indoor plants.
   
   The homepage features sections for plant health status, recent watering reminders, and seasonal care tips. Each section is designed to provide a quick overview of essential plant care information.
   
   The bottom navigation bar includes the following options: Home, Plants, Add, Search, and Profile. The current selection is Home.
   
   The visual style is clean, minimal, and nature-inspired.
   

   

2. 2.

   In the Styling Presets section, select Material Design to remix styles. Enter the style name “Material Design - Plants”, choose the corresponding mode, corner radius, color and font.

   Tip: When generating the first interface, you can refine the output by continuously adjusting the prompts. Effective prompts will facilitate the creation of a complete set of interfaces.

3. 3.

   Only minor adjustments to the layout description are required when generating a complete set of interfaces. For instance, when creating a plant lists page, you only need to change the prompt descriptions regarding page layout and the selected state of the bottom navigation bar.

4. 4.

   Repeat the above steps to generate a complete set of interfaces, including the homepage, plant lists page, Add plants page, Search results page, and profile page.

   Tip: Motiff supports comprehensive design features. You can design high-quality interfaces by adjusting details and editing layers manually.

Sample prompts

You can use the following prompts to generate a complete set of interactive interfaces for a plant care management app.

• Homepage:

  A mobile app designed for plant enthusiasts to manage and care for their indoor plants.
  
  The homepage features sections for plant health status, recent watering reminders, and seasonal care tips. Each section is designed to provide a quick overview of essential plant care information.
  
  The bottom navigation bar includes the following options: Home, Plants, Add, Search, and Profile. The current selection is Home.
  
  The visual style is clean, minimal, and nature-inspired.
  

• Plant lists page:

  A mobile app designed for plant enthusiasts to manage and care for their indoor plants.
  
  The plant lists page includes a grid or list view of all plants, with each item displaying a thumbnail, name, health indicator, and last care time. Filters for plant type, environment, and care difficulty are available at the top of the page for easy navigation.
  
  The bottom navigation bar includes the following op tions: Home, Plants, Add, Search, and Profile. The current selection is Plants.
  
  The visual style is clean, minimal, and nature-inspired.
  

• Add plants page:

  A mobile app for plant enthusiasts to manage and care for their indoor plants.
  
  The add plant page contains sections for entering plant details such as name, type, and care preferences. A photo recognition module is included for identifying plants and generating care suggestions. A preview section displays the plant's profile before saving.
  
  The bottom navigation bar includes the following options: Home, Plants, Add, Search, and Profile. The current selection is Add.
  
  The visual style is clean, minimal, and nature-inspired.
  

• Search results page:

  A mobile app designed for plant enthusiasts to manage and care for their indoor plants.
  
  The search results page displays a list of plants matching the search query. Each result includes a thumbnail, name, key details, and a suitability score. A search bar and filters for traits or care needs are positioned at the top for refining results.
  
  The bottom navigation bar includes the following options: Home, Plants, Add, Search, and Profile. The current selection is Search.
  
  The visual style is clean, minimal, and nature-inspired.
  

• Profile page:

  A mobile app designed for plant enthusiasts to manage and care for their indoor plants.
  
  The profile page includes sections for plant collection statistics, care achievements, and user skill levels. Additional modules display historical care data and tailored plant recommendations. A settings section allows customization of reminders and preferences.
  
  The bottom navigation bar includes the following options: Home, Plants, Add, Search, and Profile. The current selection is Profile.
  
  The visual style is clean, minimal, and nature-inspired.