The only UI/UX workflow you need (ChatGPT + UX Pilot) Design your...
Prajwal Tomar@PrajwalTomar_
46 views
May 02, 2025
~2 min read
Advertisement
1
The only UI/UX workflow you need (ChatGPT + UX Pilot)
Design your full MVP UI and design system in under 1 hour using AI.
Here’s the exact workflow ↓
Design your full MVP UI and design system in under 1 hour using AI.
Here’s the exact workflow ↓
9:02
2
1/ My updated UI/UX workflow for client MVPs
Clients often want a “design phase” before development.
In the past, this used to take weeks. First build the design system. Then design every screen. Then send for feedback. Then iterate.
Now?
You can do all of this in under an hour using AI.
Here’s how ↓
Clients often want a “design phase” before development.
In the past, this used to take weeks. First build the design system. Then design every screen. Then send for feedback. Then iterate.
Now?
You can do all of this in under an hour using AI.
Here’s how ↓
3
2/ When do you actually need a design system?
If you’re building an MVP for yourself, you can skip this.
But with clients, clean UI is expected. And most traditional teams still want:
- A visual design system
- Polished UI screens
- A Figma file to comment on
This workflow gives them all of that, fast.
If you’re building an MVP for yourself, you can skip this.
But with clients, clean UI is expected. And most traditional teams still want:
- A visual design system
- Polished UI screens
- A Figma file to comment on
This workflow gives them all of that, fast.
4
3/ What is a design system?
A design system is the foundation for consistent UI.
It includes:
- Core colors and palette
- Typography styles
- Component styling (cards, modals, buttons)
- Layout spacing and rules
- Shadow, radius, border conventions
It’s what all your screens are built on top of.
A design system is the foundation for consistent UI.
It includes:
- Core colors and palette
- Typography styles
- Component styling (cards, modals, buttons)
- Layout spacing and rules
- Shadow, radius, border conventions
It’s what all your screens are built on top of.
5
4/ Old workflow vs new
Old: Spend 2–3 weeks designing a system in Figma. Then start building screens manually.
New: Generate a complete design system + MVP UI with AI in 45–60 minutes.
Now let’s walk through the exact steps I use for this.
Old: Spend 2–3 weeks designing a system in Figma. Then start building screens manually.
New: Generate a complete design system + MVP UI with AI in 45–60 minutes.
Now let’s walk through the exact steps I use for this.
6
5/ Step 1: Brainstorm your MVP inside ChatGPT
Before touching a design tool, I start inside ChatGPT.
Prompt:
“Help me brainstorm the core features of an MVP called FocusFlow. It’s a productivity tool for managing tasks, scheduling time, and tracking distractions.”
Let GPT give you a high-level overview.
Before touching a design tool, I start inside ChatGPT.
Prompt:
“Help me brainstorm the core features of an MVP called FocusFlow. It’s a productivity tool for managing tasks, scheduling time, and tracking distractions.”
Let GPT give you a high-level overview.
7
6/ Step 2: Create a UI Development Plan
Prompt:
“Based on this idea, create a UI development plan with a list of screens. Include a short description of each screen, its purpose, and layout notes.”
This will become your blueprint.
You’ll use it later when generating real screens.
Prompt:
“Based on this idea, create a UI development plan with a list of screens. Include a short description of each screen, its purpose, and layout notes.”
This will become your blueprint.
You’ll use it later when generating real screens.
8
7/ Step 3: Pick your visual inspiration
Now go to Dribbble or Behance and search for UI kits or design inspiration you like.
Download 2–3 images that reflect the vibe you want, clean, minimal, dark mode, playful, etc.
This is what you’ll use to create the design system.
Now go to Dribbble or Behance and search for UI kits or design inspiration you like.
Download 2–3 images that reflect the vibe you want, clean, minimal, dark mode, playful, etc.
This is what you’ll use to create the design system.
9
8/ Step 4: Generate the Design System using ChatGPT
Prompt:
“Create a full design system based on this attached image. Include color palette, typography, layout rules, spacing, shadows, and reusable components.”
Paste the UI reference and let ChatGPT generate the full design system.
Copy each part into a doc.
Prompt:
“Create a full design system based on this attached image. Include color palette, typography, layout rules, spacing, shadows, and reusable components.”
Paste the UI reference and let ChatGPT generate the full design system.
Copy each part into a doc.