Article
Design process

updated on:

20 Nov

,

2024

A No-BS Guide to Product Design AI Tools From Working Designers

12

min to read

Table of contents

While countless articles list product design AI tools, product designers struggle to effectively integrate these tools into their workflow. 

Here’s what Daria Kornienko, a UI/UX designer at Eleken, has to say on this topic:

In fact, I realized that what matters most is not the number of tools you have but how you use them. For example, you can master your skills with GPT and cover 80% of your needs. In addition, many emerging AI tools are either still immature or do pretty much the same thing as GPT.

So, rather than overwhelming you with a long list of solutions that each solve only a small part of the problem, drawing from our product designers' hands-on experience, we'll share how to strategically use a few key AI tools to enhance your design process.

To keep things simple, we’ve divided the tools into three categories. Without further ado, let’s dive into the first one:

AI tools for UX design

AI in UX design excels at automating repetitive tasks and streamlining workflows. This way, AI allows product designers to focus on creativity and user-centric solutions. 

In this section, we'll pay special attention to ChatGPT, which our designers use daily to improve their UX process in many different ways. We'll also look at some helpful Figma plugins since Figma is our main design tool, and having AI assistance right inside it can really make your work easier. 

Chat GPT

using Chat GPT AI for product design
Source

There’s probably no working product designer in the world now who hasn’t heard about Chat GPT. So, instead of giving a definition of what it is, let's start with comments from our UI/UX designers.

Here’s the one from Nazar Neshcheret:

In general, I use ChatGPT for just about everything. That's because it has different custom versions for UI/UX designers – some help to write creatively, others help to identify UI patterns, others are savvy with technical knowledge, which helps to better understand developers and design documentation.

Daria Kornienko shares:

GPT generates ideas the human mind cannot quickly create. It helps explore user flows by imagining how a user might navigate a product and suggesting improvements. Designers then sort through the ideas to pick what works best.

So, let’s start by exploring situations where you can use this AI in product design.

Use cases for ChatGPT in design

ChatGPT is a versatile tool that can streamline many aspects of a designer's workflow, including:

  • Brainstorming Ideas: Quickly generate concepts for UI layouts, user flows, or creative elements.
  • Creating User Personas: Describe your target audience, and ChatGPT will generate detailed personas with goals, pain points, and behaviors.
  • Refining User Flows: Share your draft flows, and ChatGPT can provide suggestions to simplify or enhance the user experience.
  • Generating Content: Write placeholder or actual text for landing pages, app interfaces, or product descriptions with the right tone of voice.
  • Exploring UI Patterns: Get recommendations for layout ideas, navigation designs, or accessibility improvements.
  • Conducting Competitor Analysis: Use ChatGPT to create SWOT analyses for similar products, identifying strengths, weaknesses, opportunities, and threats.
  • GPT for UX research: Create interview scripts or usability testing questions tailored to your audience.

Custom GPTs for designers

Custom GPTs are specialized versions of ChatGPT that cater to specific needs. Designers can create or use pre-existing GPTs to save time and enhance precision. You can search for them on the internet and try out most effective for you specifically. Here, we’ll mention two that our designers use most often: 

UI/UX Designer GPT
custom GPT for designers UI UX designer

Purpose:
A GPT tuned for UI/UX designers, focusing on workflows, best practices, and actionable design recommendations.

What it does:

  • Suggests layouts, UI patterns, and navigation structures.
  • Provides feedback on wireframes or early prototypes.
  • Offers accessibility tips tailored to common design challenges.

Example Prompt:
"You are a UI/UX Designer. Suggest three UI patterns for a social media app that prioritizes visual content and user engagement."

Design Wizard GPT
custom chat GPT for product designers Design Wizard

Purpose:
Design Wizard GPT specializes in generating custom avatars, logos, and cover images tailored to your design needs. It simplifies the creation of visually appealing assets, allowing designers to quickly generate ideas and concepts for branding or presentation materials.

QoQo.ai

User journey map generated with QoQo AI

What it does:
QoQo.ai integrates seamlessly into Figma to generate everything related to UX, like customer journey maps, or user flows. It saves time by transforming text-based inputs into visualized UX elements. So, basically, you can use Chat GPT to generate a user persona and use it in QoQo AI to get a visualization right in your Figma file. 

How to use it:

  • Create user personas: Provide a basic persona description (e.g., "Frequent traveler looking for affordable flight options"). Add key scenarios, and QoQo.ai will visualize the journey map for you.
  • Visualize journey maps: Provide key scenarios and persona descriptions, and QoQo.ai transforms them into clear, actionable journey maps.
  • Design user flows: Use the tool to outline and structure user interactions for a seamless UX.

However, keep in mind that no AI UX research is effective only in combination with conventional user research

Why it’s great: The plugin combines AI-generated insights with the precision of Figma, making it easier to integrate AI into existing design workflows.

Wireframe Designer

What it does:
Wireframe Designer speeds up the creation of basic UX layouts. It interprets inputs about app goals and generates wireframes with structured user flows both for mobile and desktop.

How to use it:

  • Choose if you want to create a wireframe for mobile or desktop version.
  • Describe your project, providing details such as app purpose, target audience, and functionality.
  • The tool produces an initial layout with sections like navigation, key features, and user actions. Use the wireframe as a foundation, refining it to match the design goals.

Daria shared how, using Wireframe Designer, you can create a booking app's wireframe:

I described the app’s purpose and target user. In a matter of seconds, it delivered a wireframe of the homepage with relevant sections like search, upcoming events, and speakers. Adjustments took minutes instead of hours.
Prompt Daria gave to Wireframe designer
Mobile wireframe generated by AI
Desktop wireframes generated with Wireframe Designer for the event booking app

Why it’s great: It makes rapid prototyping during the ideation phase easier.

Figjam AI

What it does:
Figjam AI is a brainstorming assistant integrated into Figjam, Figma's collaborative whiteboard tool. It helps designers generate ideas, summarize discussions, and draft early concepts for UX designs.

How to use it:

  • Find a star icon in the top menu panel.
  • Write what you need help with and click “Generate”. You may use prompts like for example "Generate five ideas for improving onboarding flows" to jumpstart team discussions.
  • AI will visualize your request/idea.

For example, here's the result our designer Darina got when she asked FigJam AI to generate a user persona with details like goals, background, and motivations and then summarize that information.

Why it’s great: Designers used this as a starting point to refine their flow and usability strategies.

As a summary for this section, here’s an important thing to remember when using product design AI tools for UX: since AI is still in the early stages of development, it can make many mistakes. As a human, you should always double-check each answer artificial intelligence provides.

AI tools for UI design

From generating prototypes in minutes to crafting perfect color schemes, here’s how you can make your UI process faster, smarter, and more creative using AI for product design. The tools mentioned below will help you with those tasks, however as Daria says 

In most cases, AI-generated design won't be your final choice, but it makes finding creative ideas much faster.

Uizard.io

Source

What it does:
Uizard.io is a rapid prototyping tool that allows designers to create app or website interfaces quickly. It’s perfect for turning rough ideas into visual prototypes in minutes. 

How to use it:

  • Select mobile, tablet, or desktop as your base.
  • Provide details about the design purpose, style preferences (colors, fonts, etc), and features.
  • Uizard.io delivers clean, ready-to-use UI prototypes that can be further refined.
Mobile prototype version of an event booking app
AI-generated product design of a desktop podcast app depicting several screens of a main flow

Here’s one more use case that Daria shared from her experience using this tool: 

When you're at the ideation stage, you can use Uizard.io to present your client's product in various UI styles. Just upload a reference you like (using a screenshot, URL, or text prompt) and generate a similar theme for your app. The good part is you can edit the result by changing fonts, styles, and visuals.
The reference Daria used for her podcast app
The results she received
You can also test the prototype you created using heat mapping within Uizard.io. It will predict which areas of the interface users are most likely to focus their attention on.

Why it’s great: It’s an intuitive tool for ideation and prototyping, ideal for early-stage design exploration.

Foundation: Color Generation

What it does:
Foundation: Color Generator is a Figma plugin that helps designers create accessible and cohesive color palettes, making it easier to maintain consistency in UI design systems.

How to use it:

  • Pick a base profile: Orbit, Atlassian, Material, Ant Design.
  • Choose tone: Color, Dark, Surface
  • The plugin provides complementary colors and assesses their accessibility on light and dark backgrounds.
  • Add generated colors directly into your design system.

Why it’s great: It simplifies the creation of color palettes while ensuring adherence to accessibility standards. What is more, it can organize structured color palettes into a clear table that you can use for your UI kit/design system.  

Huemint

What it does:
Huemint uses AI to generate unique color schemes tailored for branding and UI designs. It works great for brainstorming color ideas for your product.

How to use it:

  • Input details such as project type (brand, website, graphic) and the desired mood (gradient, illustration, amount of accent colors).
  • Explore color combinations that suit your needs.
  • Use advanced options to adjust contrast or customize your palette further.

One more tip from Daria here:

Doublecheck if proposed colors are compatible with each other in terms of accessibility.

Why it’s great: Huemint is perfect for discovering fresh and innovative color ideas.

Magician

What it does:
Magician is a Figma plugin that creates icons, images, and other design elements using AI. It’s a lifesaver for designers who need quick assets without leaving their workspace. When is best to use it? Here’s an answer from Daria:

As for me, I find this plugin most useful for creating icons. Sometimes you may need an icon for a specific purpose and can't find a suitable one in any ready-made icon pack. You can request Magician to generate the needed icon for you.

How to use it:

  • Generate icons: Specify the style or theme of the icon you need.
  • Create images: Input a description to generate custom visuals.

Why it’s great: Magician eliminates the need to search externally for assets, keeping everything streamlined within Figma.

Cleanup.pictures

What it does:
Cleanup.pictures removes unwanted elements from images with remarkable accuracy.

Here’s a quote from Daria Kornienko:

There are situations when a client sends you images that have unnecessary details that need to be removed. From my experience, Cleanup.pictures does this job very accurately. The task is done quickly, and you can export your image.

How to use it:

  • Drag and drop your file into the tool.
  • Highlight objects or elements to erase.
  • Save the edited image for further use.

Why it’s great:
It’s quick, easy, and perfect for minor adjustments that enhance overall aesthetics.

Icons8 Background Remover

What it does:
The same as our previous tool, Icon8 simplifies the process of removing backgrounds from images, ensuring clean and professional results. Why do we need to mention two of them? Daria will explain:

I know there are dozens of plugins that remove backgrounds. The problem with most of them is that they often reduce image quality and fail to remove tiny details (like a hair) properly. Icon8 copes with both problems well.

How to use it:

  • Select a file from your computer or library.
  • The tool removes the background automatically.
  • Export the isolated subject for use in your designs.

Why it’s great:
It delivers high-quality results, especially for product photography or user avatars.

Gamma AI

Source

What it does:
Gamma AI is a dynamic presentation tool that uses AI to create visually stunning decks for product pitches, updates, or presentations.

How to use it:

  • Define the purpose of your presentation (e.g., product update, sales pitch).
  • Add text or bullet points, and Gamma AI generates polished slides with layouts and visuals.
  • Adjust colors, images, and layouts to match your branding.

Why it’s great:
Gamma AI is perfect for creating engaging presentations or pitch decks quickly, making it easier to showcase design concepts or updates to stakeholders.

Tools with AI for testing & copywriting

Creating seamless UX and eye-catching UI is only part of a product designer's job. From analyzing usability to generating content for realistic mockups, there are countless other tasks that are just as critical. Fortunately, combining AI and product design can be a game-changer for handling these responsibilities efficiently.

Attention Insight

What it does:
Attention Insight is a Figma plugin that provides heatmaps and focus maps that predict where users will look on a design. As well, it assesses your interface for accessibility (pay attention to the number in the lower right corner on a screenshot).

How to use it:

  • Upload a design or connect the plugin to your Figma file.
  • Examine areas with the most and least user attention.
  • Tweak layouts to ensure users focus on the right elements.

Why it’s great: It eliminates guesswork in visual hierarchy, making it easier to improve user engagement.

Clueify

What it does:
Clueify evaluates designs and performs A/B testing to determine which variations resonate best with users. It provides data-driven insights to enhance design decisions.

How to use it:

  • Upload multiple versions of a layout.
  • Gather feedback from real users or predictive AI models.
  • Identify the most effective design based on engagement metrics.

Why it’s great: Clueify simplifies decision-making by delivering actionable insights for iterative improvements.

Content Reel

What it does:
Content Reel Figma plugin allows designers to quickly populate designs with realistic placeholder content such as names, avatar images, and data sets. This helps make mockups more visually aligned with real-world applications.

“Finally, I don’t have to put ten John Does in the table in my interface,” – says Daria about this tool. 

How to use it:

  • Open the Content Reel plugin within Figma.
  • Select the type of content you need (e.g., avatar photos, names, job titles).
  • Drag the chosen content directly into text or image layers in your design.

Why it’s great:
It saves designers significant time by automating the repetitive task of adding placeholder data. Instead of using generic text or empty images, Content Reel ensures your designs feel complete and presentation-ready.

How to find new tools with AI

As we mentioned at the beginning, the number of AI product design tools you use isn’t what defines success — it’s how effectively you use the right ones. Plus, most tools need paid subscriptions to show their full potential. So, if you’re already paying for an advanced version of ChatGPT, isn’t it wise to use it for as many purposes as possible?

However, the AI market is evolving at lightning speed. New tools are emerging every day, offering unique solutions to common design challenges. To stay up to date, our designers recommend these go-to resources: 

  • Product Hunt: A treasure trove of online product design tool lists. Type "AI" into the search bar, and you’ll find a curated list with details such as user adoption, ratings, and descriptions to help you discover what’s trending.
  • Figma Community search: Since Eleken relies heavily on Figma for our design work, we often explore Figma’s community plugins for AI-powered solutions. It’s a great way to find tools that integrate directly into your existing workflows.

Well, seems like it’s time to sum up. Here’s what we want to tell you – design is about solving user problems, and AI’s role is to help designers do that faster and more efficiently. 

If you’re still wondering, “Can AI replace product designers?” the answer is no. No matter how many AI tools you incorporate into your process, as long as we create designs for people — which requires understanding human psychology, cultural context, and creativity — AI cannot replace the designer.

At Eleken, we’ve learned how to streamline our process with AI in SaaS while staying true to what matters most: creating exceptional, user-centered designs. With the right tools and expertise, we’re here to help you solve your design challenges and deliver outstanding results.

Share
written by:
image
Kateryna Mayka

Senior content writer at Eleken UI/UX design agency. Kateryna has 4 years of experience translating complex design concepts into accessible content for SaaS businesses.

imageimage
reviewed by:
image
Nazar Neshcheret

Nazar Neshcheret is UI/UX designer at Eleken.

imageimage
Top Stories