5 AI generated UI designs that will blow your mind

5 AI generated UI designs that will blow your mind

AI tools can improve your workflow, productivity and more. But they can also help both designers and non-designers to create amazing UI designs. So, what if you could use a few lines of text to create a UI design for an app or website? Well, with Uizard Autodesigner you can.

Simply select the device that you’re designing for, and describe your project. You can then describe a design style, pick a few keywords, or do both, to ensure that Autodesigner has everything needed to generate your design.

app design using autodesigner
An app design created using Uizard Autodesigner

Skip to section:

What to expect from Uizard Autodesigner

5 AI generated UI design examples

1. Plant shop web design

2. Sci-fi movie streaming app design

3. UK hotel booking app design

4. Chocolate tracking app design

5. Charity donations web design

What to expect from Uizard Autodesigner

Every UI design generated by Autodesigner is unique, and tailored to the prompts provided. However, the steps you take before the generation process, and the results you can expect after, will share the following similarities:

Text prompts: Autodesigner will need a few things from you before it can create your UI design. You will need to input text prompts to describe both what your project is, and its design style. The more specific you are, the more specific the AI can be when generating your UI design.

Keywords to describe a design style: There are a few different keywords you can pick from to tailor your UI design even further. You can even skip the design style prompt, and just use keywords, or vice versa.

prompts in uizard autodesigner
Inputting prompts into Uizard Autodesigner

Several pre-built design screens: Each UI design will come equipped with multiple design screens featuring various components and elements. These can then easily be modified using the drag-and-drop editor, or through one of Uizard’s magic tools.

User flow mapping: Autodesigner will automatically link elements to other design screens to represent user flow. For instance, a ‘Sign up now’ button will be linked to a sign up page. This helps to show the user journey on your design.

design screens created by autodesigner
Four design screens created by Uizard Autodesigner, complete with user flow mapping

Text and image assistants: Auto generated text and images will be added to your design screens, and the results of this will depend on the prompts you have originally provided. If you want to change these, all you need to do is select the image or text and click ‘Suggest’ to generate more options. Or edit them manually.

uizard text assistant
The text assistant in Uizard generating new copy

Regeneration options: If your design is not what you had envisioned, you can regenerate using the pop up message, or start again and generate a new design. (The message will look like the image below.)

generate or regenerate message in uizard

5 AI generated UI design examples

You don’t need to be a professional designer to get amazing design results. Using a simple prompt you can take an idea and turn it into a fully-fledged design. To give you an insight into the magic of Uizard Autodesigner, here are five AI generated UI design examples.

1. Plant shop web design

plant shop web design
A plant shop web design created using Uizard Autodesigner

Device: Web

Description: A plant shop e-commerce website

Design style: Green colors, clean aesthetic

Keywords: Light, modern and young

For this design, the idea was to create a plant shop web design. Once entering the prompt, and describing the design style, five screens were generated. They include a landing page, a search results page, a screen for product details, and more. For this web design, simple prompts were used, but you can of course use more detail when generating with Autodesigner.

As requested, the colors on the web design are green, and the overall aesthetic is very clean and bright. You will notice that snippets of text and some images are added into the design, and these can be kept as they are, or edited to better fit the design.

2. Sci-fi movie streaming app design

app design creation using autodesigner
A sci-fi movie app design created using Uizard Autodesigner

Device: Mobile

Description: Sci-fi movie streaming app

Design style: Dark colors, like Netflix

Keywords: Modern and techy

This next AI UI design is an app that gains inspiration from a popular streaming service, but is slightly more niche in its offerings. Think Netflix, but purely for sci-fi movies. SciFiStream has seven generated screens that can be used either straight out of the box, or edited using the drag-and-drop editor.

As requested in the design style prompt, this app design contains black design screens, with red buttons and icons, to fit the Netflix aesthetic. With auto generated text and images relating to the sci-fi genre, only a few simple tweaks are needed to perfectly suit the desired project.

3. UK hotel booking app design

hotel booking app design
A UK hotel booking app design created using Uizard Autodesigner

Device: Mobile

Description: An app for booking hotels in the United Kingdom

Design style: Modern, light blue button and icon colors

Keywords: Light and modern

Ever feel overwhelmed by the choices of destinations on a booking app? With this Autodesigner creation a user can get information regarding hotels solely in the UK. Seven design screens document the user journey all the way from sign up, to booking and payment. With a pre-mapped user flow between design screens, it’s easy to test various user interactions on this design.

Using the ‘Preview’ function in Uizard, you can click through your AI UI design as if it were an interactive app. From here, you can make small edits to the user flow using the interaction mapping tool. To do this, all you need to do is click on an element, and select the lightning bolt icon next to it. This allows you to connect your element with another design screen to represent the user journey.

4. Chocolate tracking app design

app design created with autodesigner
An app design created using Uizard Autodesigner

Device: Mobile

Description: An invoice tracker for someone addicted to chocolate

Design style: Like an insurance company

Keywords: Dark and formal

Stuck for ideas? Uizard Autodesigner has a handy feature that can auto generate ideas and design styles for you. Simply click the ‘Try example’ button on the Autodesigner screen to give it a go. Using this feature, prompts for a chocolate tracking app were implemented. For this particular design, the prompts were left as they are, but they can also be edited to your liking.

ChocoTracker consists of seven design screens, with a purple and black theme throughout. There is also text that relates directly to the topic. If you decide that this AI generated app design isn’t what you’re after, you can use the pop up message to regenerate the same design, or start from scratch with new prompts. This pop up will appear as soon as your UI design has been generated, so be sure not to close it.

5. Charity donations web design

charity web design created with autodesigner
A charity donations web design created using Uizard Autodesigner

Device: Web

Description: A website for donating clothes and furniture to charity

Design style: Red colors, white background, black text

Keywords: Corporate, formal, and light

Allow users to donate clothes and furniture to a good cause with this web design. For this next AI generated UI design, the design colors described were slightly more specific, and Autodesigner created a design that matched perfectly. With a red theme throughout, and evenly spaced elements and components, this web design has everything a UI designer needs to get started with their project.

However, if you decide that you want to expand your Autodesigner project, you can add a new screen and design it from scratch. Select ‘Screens’ in the right control panel in Uizard, and then click ‘Add new screen’. From here you can drag-and-drop as many premade components, and singular elements, as you would like to create your new design screen. Your new design screen will be the same color as the other screens generated, but you can also change this if you decide to.

Looking for more Autodesigner information?

For an in-depth look at Uizard Autodesigner, including tips and tricks, check out the video below.

Interested in creating your very own AI generated UI design? Get ahead of the design curve and sign up to Uizard Pro to use Autodesigner today. For more articles like this one, check out our blog.