What is prompt engineering? Prompt engineering tutorial
The influx of generative AI tools, such as Uizard Autodesigner and OpenAI’s ChatGPT, have been taking the world by storm. But in order to generate a certain output, such as a UI design, content or code, AI tools require prompts to learn more about a topic or project. The more detailed and explanatory the prompt, the better the result. And this is where prompt engineering comes in.
Prompt engineering is used to create a prompt that AI tools can easily use to generate an output for a user. Uizard Autodesigner uses prompts to generate multi-screen UI design projects that are fully-customizable and editable. In this article we will look at what prompt engineering is, why it’s important, and how you can use it to create some amazing AI UI design projects in Uizard.
Skip to section:
Why is prompt engineering important?
How to create a prompt for Autodesigner
Examples of prompt engineering when using Autodesigner
Other Uizard features that require prompts
What is prompt engineering?
Prompt engineering is the practice of crafting prompts that are used by AI tools to generate a certain output. Prompts are used to generate content, images, designs, code and much, much more. But in order to receive the best output, you have to structure a prompt so it can be properly understood by the AI. Engineering prompts to provide contextual knowledge, as well as to be as descriptive as possible, ensures that the AI will understand your goal.
For conversational generative AI tools such as OpenAI’s ChatGPT or Anthropic’s Claude, in which a user talks to the AI as if they were having a conversation, a thread of detailed prompts can improve the output significantly. This is where you would feed snippets of contextual information that may help to receive a more detailed output. Whilst other generative AI tools, such as Uizard Autodesigner, rely on several descriptive prompts to create fully-editable UI designs.
Why is prompt engineering important?
Much like a human learning a new skill, it takes time for an AI to understand exactly what you want it to do. That’s why going straight in with a prompt such as ‘Write me a product description for a pair of shoes’ may not result in the output you were hoping for. Priming the AI with contextual knowledge about a subject, your brand, or anything else regarding what you would like the AI to do for you, will improve the output result.
For a generative AI such as Autodesigner, detailed prompts can truly improve the final UI design. Describing the likes of design styles, and color choices, can ensure that the AI understands what you want it to create.
How to create a prompt for Autodesigner
Depending on the type of output you are requiring, engineering a prompt will differ. For instance, formulating a prompt for an image would be different in comparison to generating code. However, when working with Autodesigner to generate a UI design, there are a few best practices to follow.
First, identify your goal: It’s important to have a clear goal in mind before you begin, and this will help to create prompts to formulate the solution. What are you wanting to generate? Is it a dating app, or maybe a pet shop website? What colors and design styles do you want to see? These are the kind of questions you should be thinking about.
Learn how to instruct the AI: Prompts act like instructions for Autodesigner. So you need to understand how to instruct the AI. Use clear and simple language to explain what your design ideas are, and how your design should look.
Design prompts thoughtfully and logically: Use the right keywords in your prompts, for example if you want a certain design style, or buttons in a specific color, this should be explained in your prompts. This will help you to achieve the results that you desire.
Tweak prompts: Spend as much time as you need tweaking your prompts before generating your project with Autodesigner. You can also keep generating with slightly different prompts until you reach the output you require.
Examples of prompt engineering when using Autodesigner
Below are two examples of how prompt engineering can impact the outcome of your UI design when creating with Uizard Autodesigner.
Using a generic and basic prompt
Here the prompt ‘An app for people looking to meet others in their city’ was used, along with the design style description ‘Bright, clean’.
Uizard Autodesigner output:
The output here is relatively generic and the colors have been picked at random — which is to be expected as there were no color choices in the style prompt section. The generated content matches the overall idea, with a focus on finding people to connect with in a city.
Using a detailed and descriptive prompt
Here the prompt ‘An app for people in their 20s looking to make friends in their city’ was used, along with the design style description ‘Orange elements, preppy style, rounded buttons’.
Uizard Autodesigner output:
This output is much more detailed, and the style is exactly what was asked for. Autodesigner has made each element orange, and the buttons are also rounded. There is also content that is specific to the prompt, with the first page using the line ‘Discover potential friends in your city, chat with them and share common interests and hobbies’.
If you’d like to learn more about engineering a prompt for Uizard Autodesigner, check out the video below:
Other Uizard features that require prompts
Prompt engineering is used widely in Uizard to fuel specific design outputs. Other than Uizard Autodesigner, there are other instances in which you may need to enter prompts in Uizard. From theme and image generation from a simple text prompt, let’s dive into how else you can use prompts in Uizard.
Theme Generator
Using prompts, you can generate and apply a new design theme to your entire project using the Theme Generator. Within the Autodesigner widget at the bottom of the editor, you can use the dropdown to select the ‘Generate Theme’ function. Here you will find a number of theme generation options, one of which is theme creation from a prompt. So, all you have to do is enter your desired prompt such as ‘Pink vibrant startup style’ and use a few keywords to supplement your choice. When you click ‘Generate’ you will get to preview your new design theme before applying it to your whole project.
Screen Generator
Generate a new screen from a prompt and add to your Uizard project via the Screen Generator function. Head to the Autodesigner widget at the bottom of the editor, and use the dropdown to select ‘Generate Screens’. Select the ‘Prompt’ option and type in a simple description of the screen you want to generate, for instance ‘Generate a screen to showcase the statistics of profile visits’. Once you click ‘Generate’ you will receive five screen generations to pick from that you can easily add to your project.
Image generator
Within a Uizard project, you can generate images from text prompts using the Image Generator located in the Autodesigner widget at the bottom of the editor . Open up the widget, use the drop down to select ‘Generate Images’ and from here you can type in a prompt that describes your desired image, and then select an image style using the dropdown. Once you click ‘Generate, you will then be supplied with four AI-generated images, and these can be dragged-and-dropped onto the design screen of your choosing.
When engineering your prompt, think about what you want to see in your generated image. If you require specific colors and objects, include these in your prompt for a better, more personalized, output.
Color generator
Looking to include a specific color in your Uizard design? With the color generator feature you can use text to describe a color. All you need to do is select an element within your design, go to the ‘fill’ option and then click ‘generate’. From here you will need to input a prompt, and this will generate a page full of color palette options to pick from.
Make sure to use a prompt that fittingly describes the color you’re hoping for. For instance, the prompt ‘autumn leaves’ produces autumnal colors such as oranges and browns. If the output is not what you had in mind, simply type in a new prompt to generate new color options.
Ready to start your AI UI design journey? Waste no time and sign up to Uizard Pro today to gain access to Autodesigner. For more AI related content, check out our blog for more interesting articles.