Case Study: Designing AI Lister in UX Pilot

Overview

The goal of this project was to recreate a startup idea and design 10 essential screens covering a key product flow.

For my project, I designed an AI Lister tool for eBay. Helping users sign up, connect their eBay account, and start using AI to draft and publish listings.

Everything was designed in UX Pilot, using AI-assisted wireframing and UI generation. I focused on a mobile-only experience, ensuring a consistent style, layout, and brand identity across all screens.

Links:

UX Pilot link: https://uxpilot.ai/s/ad4b7868c5ec594e6a2e0eeb104c4c4c

Figma make link: https://www.figma.com/make/vPFdCEugPp1muI899PV8Y2/Create-Interactive-Prototype?fullscreen=1

Figma prototype link (might not work due to free plan on Figma): https://www.figma.com/proto/Vn0quXJCYAZaFjLJRSP0Vc/UXCEL-Competition-2025?node-id=14-2624&t=5lSyXtiK15rXpHsX-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=14%3A2624

Starting the Process

Because I was brand new to UX Pilot, I started somewhere familiar - ChatGPT.

I used it to draft and refine prompts before moving into UX Pilot. We brainstormed the brand tone and user goals, then generated a user flow for the eBay listing journey.

During this stage I used Chat-GPTs speech feature to save time typing and allowing my thoughts to more easily get put into action.

Example of speech prompt used:

“Let's just think about the brand of this type of an app and what sort of what we'd want to portray and the sort of colors and things that we'd want to use. I'm thinking I want something relatively clean and modern. I think trust has to be such a massive factor in this design system. Anything that can, I mean this whole thing is based off AI, I think there's a lot of hype around AI and I think there's a lot of mistrust in it. So I think transparency, trust, clarity, all of those things need to be at the forefront of this brand.” 00:44s

This gave me a style to use to help build my wireframes.

Wireframing and Theme Setup

At first, I tried creating designs page by page in UX Pilot for more control. But each new page reset the theme.

So I explored the settings and discovered that UX Pilot supports custom CSS.

I returned to ChatGPT and asked it to help format our theme as CSS code.

Prompt used:

“I have the ability to upload a theme via a JSON file - could we create a theme for AI Lister in JSON format?”

This was in the chat that we had previously been using, so ChatGPT had all the context it needed. Then, I pivoted and asked it to use CSS instead.

Output used:

:root {

/* Core Colors */

--background: #FAFAF7; /* warm off-white */

--surface: #F3F4F2; /* slightly darker panel */

--text: #1C1C1C; /* charcoal primary text */

--text-secondary: #4A4A4A;

--primary: #1D4ED8; /* deep blue */

--on-primary: #FFFFFF; /* text on primary buttons */

--accent: #14B8A6; /* teal highlight */

--error: #DC2626;

--success: #16A34A;

--border: #E0E0DD;

/* Typography */

--font-family: Inter, Arial, sans-serif;

--font-size: 16px;

--font-size-heading: 20px;

/* Components */

--button-height: 44px;

--button-radius: 8px;

--input-height: 44px;

--input-radius: 6px;

--card-radius: 12px;

--card-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

}

Together, we built a custom AI Lister theme, which gave the designs a consistent look and feel across all screens.

Once that was in place, I tested UX Pilot’s flow option to auto-generate the journey. It performed better than expected, so I moved from wireframes to high-fidelity screens.

Wireframes:

Hi-Fidelity Designs:

The whole process took under an hour, and I ended up with a working MVP that only needed small usability refinements.

Accessibility Checks

Once the high-fidelity screens were in place, I reviewed accessibility.

I tested colours against WCAG AA standards and found that some combinations failed. I used Stark Chrome Plugin & Coolors to generate accessible alternatives and updated the accent colour across all screens manually (since UX Pilot didn’t apply it globally).

I also checked that the font sizes, spacing, and layout hierarchy supported readability on small screens. All buttons met minimum size standards for touch.

After a final review, the design passed WCAG AA for contrast and legibility.

Moving to Figma

To refine interactions and polish the MVP, I exported everything to Figma.

It took three attempts to import successfully, but only around five minutes overall. Once imported, I fixed minor issues like spacing and text overflow, then added light interactions to demonstrate navigation and flow.

From here, I felt fully in control in a tool I knew well - able to fine-tune the design without losing what UX Pilot had helped create.

Links:

UX Pilot link: https://uxpilot.ai/s/ad4b7868c5ec594e6a2e0eeb104c4c4c

Figma make link: https://www.figma.com/make/vPFdCEugPp1muI899PV8Y2/Create-Interactive-Prototype?fullscreen=1

Figma prototype link (might not work due to free plan on Figma): https://www.figma.com/proto/Vn0quXJCYAZaFjLJRSP0Vc/UXCEL-Competition-2025?node-id=14-2624&t=5lSyXtiK15rXpHsX-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=14%3A2624

Key Learnings

• AI collaboration: Starting in ChatGPT, and specifically using the speech feature made it easier to plan prompts and get better results from UX Pilot.
• Theme control matters: Setting a custom CSS theme early kept the design consistent and saved time later.
• Accessibility first: Checking colours and contrast early on avoided bigger rework later. Using tools like Stark made this process really quick.
• AI + Figma workflow: Using AI for structure and Figma for polish gave me speed and control.

Summary

I designed and iterated a 10-screen mobile MVP for AI Lister - a tool to help users draft and publish eBay listings.

The final design is accessible, consistent, and brand-aligned, and the process shows how AI tools can speed up ideation, design, and iteration when used with intention and clear prompts.