Guide to Autodesigner

Streamline your UI design process and create stunning visuals effortlessly. Learn how to access Autodesigner and how to use it!

Updated over a week ago

About Autodesigner

Who can use this feature? ๐Ÿง™

Are you curious about what Autodesigner is, how to access it, or how to use it? You've come to the right place!

Autodesigner harnesses the power of Artificial Intelligence to generate multi-screen mockups for apps and websites from a simple text prompt. How's that for magic? ๐Ÿ”ฎ


What is Autodesigner?

Introducing Autodesigner - the newest AI design tool from Uizard that empowers you to create multi-screen mockups effortlessly by typing out your project ideas in plain English. Autodesigner can also modify existing sections!

Think of Autodesigner as the ChatGPT of UI/UX design! With just a few basic sentences, this innovative tool uses AI to generate your app or web design in seconds.

Let Autodesigner take your design process to the next level as fast as you can say abracadabra โœจ


Best use cases for Autodesigner

Autodesigner is a very powerful tool to get started with your design ideas! Have you been wondering what some of the best use cases are? Have a look down below ๐Ÿ‘‡

1) Ideation๐Ÿ’ก

  • Go from abstract idea to multi-screen prototype

  • Overcome the "Blank Page" syndrome

  • Speed up ideation instantly with colleagues and clients

  • Generate a custom starting point for your project

2) Workshops ๐Ÿค

  • Great for design sprints between designers and nondesigners to collaborate on ideas rather than specifically UX/UI

  • Prompt different projects with the group and change them to suit your design needs and style


Using Autodesigner to create a new project

Autodesigner is easy and fast to use! We'll walk you through the ins and outs of how to start taking the first steps of going from an idea to a design with Autodesigner.

Watch a comprehensive walkthrough video above, where our CEO Tony demonstrates how to use Autodesigner. Alternatively, follow the steps below to get started with Autodesigner right away:

1) Log into your Uizard account and click "Generate with Autodesigner" from the Start creating section:

3) Choose which device you would like to have your design made for:

4) Type in your project idea or click "Try example" if you're not sure and you just want to test it out:

6) Click 'Continue':

7) Select how you would like to generate the style of your project (a screenshot, prompt, or URL).

A) Generating by a screenshot:

1) Click 'Screenshot':

2) Drag the image into the blue field to upload your screenshot:

3) Next, click 'Generate my project':

B) Generating by a prompt:

1) First, click 'prompt':

2) Type in the style that you'd like, or if you're unsure you can click 'Try example' to get ideas:

3) Select relevant tags for your style:

4) Finally, click 'Generate my project':

C) Generating by a URL:

1) First, click 'URL':

2) Next, type in the website that you'd like to have your style influenced from:

3) Type 'Get website':

4) Finally, click 'Generate my project':


Regenerating a design

Once you've generated a design, you can easily regenerate it if you're unhappy with what you've gotten.

As soon as you've generated a design, a dialogue box will pop up. You can click "Regenerate design" to do so. Please see below:

You can also click "Generate another" if you want to use a different prompt!

Please be aware that if you close this dialogue box, you'll have to make a new project with Autodesigner with the same prompt to be able to regenerate it ๐Ÿ‘


Describing a project

Writing a prompt for Autodesigner should be creative and fun, but we understand that it may be challenging at times. That's why we're here to help you with the ingredients for the magic potion of success when writing your prompt! ๐Ÿ“œ

1) Specify whether you want an app (or web app in desktop) or website to avoid surprises ๐ŸŒ

If you want an app:

  • โœ… - "A web app to track invoices"

  • ๐Ÿšซ - "A website to track invoices"

If you want a website:
โ€‹

  • โœ… - "A website to order food"

  • ๐Ÿšซ - "An app to order food (Desktop)"

2) Add some specifics, for example:

  • โœ… - "A landing page for a design tool SaaS"

  • โœ… - "A grocery ordering app"

  • โœ… - "An invoice tracking website"

  • ๐Ÿšซ - "Design tool website"

3) Let Autodesigner work its magic! Don't be too controlling and leave room for creativity. ๐Ÿง™ Autodesigner usually won't follow strict guidelines, such as the number of screens, specific flows, or placement of components:

  • โœ… - "A landing page for a design tool"

  • ๐Ÿšซ - "A landing page for a design tool with a big title centered in the screen that says" โ€œThe best design toolโ€, with a glowing button that says signup (โ€ฆ)"

4) Focus on your design end goal, not specific screens and flows as this could lead to inconsistent behavior. Autodesigner is designed to create simple flows from your idea๐Ÿ’ก

  • โœ… - "Dating app for people with magical powers"

  • ๐Ÿšซ - "A signup flow with login, signup, and onboarding screens."

5) Are you still having trouble? No worries! You can click "Try example" and Autodesigner will give you some prompts to test out first:

With these tips, you'll be well on your way to creating a visually stunning design with Autodesigner in no time! ๐Ÿš€


Describing a design style

Thinking of inspiration and keywords when writing your prompt is half the fun! Draw inspiration from other companies, colors, and adjectives ๐ŸŽจ

Here are some tips to get the best results when using tags and text in your design style prompt:

1) Come up with the initial thoughts of what you want your app or website design to look like!

2) Use tags as much as possible:

  • โœ… - Young, Light, Modern

  • ๐Ÿšซ - Avoid selecting conflicting tags (e.g. Light and Dark).

3) These are some things you can try when using free text:

  • Try adding extra adjectives: (e.g. gloomy, serious, fresh, chill)

  • Mention big companies' styles (e.g. Airbnb, Facebook, Netflix, Microsoft, etc.)

  • Use colors (e.g. pink, red, blue)

  • Mention specific styles (e.g. without borders, rounded, with shadows)

  • Use nouns commonly associated with a color (e.g. sky, avocado, plant).

4) Here are some examples of good prompts:

  • โœ… - "Gloomy and red"

  • โœ… - "Rounded with sunset color"

  • โœ… - "Like Airbnb with eggplant color"

  • โœ… - "Google but more corporate"

We can't wait to see what you come up with and how your design will look ๐Ÿคฉ

*Please note that regardless of your subscription tier, the character limit for Autodesigner is 300 characters.


Generating additional pages

You can iterate on existing designs by adding additional pages to your pre-existing projects with Autodesigner!

Here's how you can add additional pages:

1) Click on the 'How can I help you/Use Autodesigner 1.5' prompt at the bottom of your screen:

2) Click on 'Generate a screen':

3) Next, select 'Text':

4) Select the type of device screen you want to generate:

5) Type in your prompt and click the send icon:

6) Choose between 'high precision' for something more exact to your prompt or 'Creative exploration'.

7) Once it's generated, you will have a few screens to choose from. Scroll down to take a look at the other screens and once you find one you like, click 'Use screen':

*Please note that if you'd like to use the other screens as well, you can always open the 'How can I help you' menu back up to choose another screen to use.

Additionally, with mobile generation only it gives you more control over the pages you create! You can add details such as placement of components, including sections, titles and descriptions, a list of articles, and more!


Modifying a selection

You can use Autodesigner to easily modify a section of your design!

1) Select the components/section of the design that you'd like to modify.

2) Click on the 'How can I help you/Use Autodesigner 1.5' prompt at the bottom of your screen:

3) Click 'Modify selection':

4) Finally, click 'Replace in design' to use it or 'Make changes' to adjust again through a prompt:


Starting a new Autodesigner chat

Anytime that you would like to create more or start the flow over, you can follow these steps:

1) Click on the 'How can I help you/Use Autodesigner 1.5' prompt at the bottom of your screen:

2) Click 'New chat' to start the flow over again:


Revisiting previous Autodesigner chats and prompts

1) Click on the 'How can I help you/Use Autodesigner 1.5' prompt at the bottom of your screen:

2) Click on the history icon on the top-right:

3) Click the chat from which date you'd like to revisit:

4) Optionally, you can even restore previous components by hovering over them in the chat and clicking 'Use in design':


Autodesigner FAQs

Do you have more questions about Autodesigner? We're happy to provide you with all of the answers!

Take a look below and see if we can get your question answered ๐ŸŒŸ

Does Autodesigner support prompts in other languages?

We're not optimizing for this and other languages are not officially supported, but you're welcome to try and generate a design in other languages! Please keep in mind results may vary. You can try:

  • Writing your prompt in another language.

  • Asking Autodesigner to write the content in other languages.

    • For example, "A news app where all the news is in Arabic."

While it may not yield perfect results, you're welcome to try and see what it generates! ๐Ÿ˜Š

Can I use Autodesigner to change/update an already-generated design?

Yes, you can use Autodesigner to modify existing sections!

Does having a Pro account grant me instant access to Autodesigner?

Yes, you should have access to Autodesigner as long as you have a Pro, Business, or Enterprise subscription!

Additionally, Free users do get 2 free Autodesigner generations per month.

Is there a trial for Autodesigner?

At this time, there is not a trial specifically for Autodesigner aside from Free users getting 2 generations per month.

If you'd like to use it more than twice a month, you can take a look at our Referral Program or upgrade to Pro.

Can I see how many Autodesigner generations I have left for the month?

There isn't a place on your account where you can look at how many generations you've done or have left. However, we're always working on improvements!

Did this answer your question?