The only UI/UX workflow you need for MVPs (ChatGPT + UX Pilot)...
Prajwal Tomar@PrajwalTomar_
46 views
Apr 21, 2025
~4 min read
Advertisement
1
The only UI/UX workflow you need for MVPs (ChatGPT + UX Pilot)
Design system + full UI in one flow
Clean, client-ready, fast.
Here’s exactly how I do it ↓
Design system + full UI in one flow
Clean, client-ready, fast.
Here’s exactly how I do it ↓
0:27
2
3
1/ My updated UI/UX workflow
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 ↓
4
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.
5
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.
6
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.
7
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.
8
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.
9
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.
10
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.
11
9/ Step 5: Build the design system inside UX Pilot
Now go to uxpilot.ai/?ref=prajwal and create a new project:
Project name: FocusFlow – Design System
Paste each part of your design system (colors, fonts, button styles) one by one and generate it inside UX Pilot.
In 5-10 minutes, you’ll have your full design system.
Now go to uxpilot.ai/?ref=prajwal and create a new project:
Project name: FocusFlow – Design System
Paste each part of your design system (colors, fonts, button styles) one by one and generate it inside UX Pilot.
In 5-10 minutes, you’ll have your full design system.
12
10/ Step 6: Refine & Export to Figma
If you want to iterate, you can prompt UX Pilot:
“Make the buttons more rounded”
“Use slightly lighter text color for contrast”
Once happy, use the UX Pilot → Figma plugin to pull the entire system into Figma.
You now have a client-ready design system in 15 minutes.
If you want to iterate, you can prompt UX Pilot:
“Make the buttons more rounded”
“Use slightly lighter text color for contrast”
Once happy, use the UX Pilot → Figma plugin to pull the entire system into Figma.
You now have a client-ready design system in 15 minutes.
13
11/ Step 7: Train UX Pilot on your design system
Now open the UX Pilot Figma Plugin.
Import all the UI components (buttons, inputs, cards) you just created.
This trains UX Pilot’s AI to follow your exact visual language when generating future screens.
Now open the UX Pilot Figma Plugin.
Import all the UI components (buttons, inputs, cards) you just created.
This trains UX Pilot’s AI to follow your exact visual language when generating future screens.
14
12/ Step 8: Create the full UI/UX of your MVP
Start a new UX Pilot project: FocusFlow – MVP UI
Paste each screen description from your UI plan.
Before generating, make sure the trained design system is selected.
Now generate every screen, using your system.
Start a new UX Pilot project: FocusFlow – MVP UI
Paste each screen description from your UI plan.
Before generating, make sure the trained design system is selected.
Now generate every screen, using your system.
15
13/ Why this workflow works
- Looks professional
- Gives the client real ownership over branding
- Speeds up approvals
- You can move into development inside Bolt right after
- No Figma from scratch, no wasted time
Perfect for AI agencies and client MVPs.
- Looks professional
- Gives the client real ownership over branding
- Speeds up approvals
- You can move into development inside Bolt right after
- No Figma from scratch, no wasted time
Perfect for AI agencies and client MVPs.
16
14/ Final thoughts
This entire workflow, from idea to final UI, takes under an hour.
What used to take entire design sprints can now be done with:
- ChatGPT (for planning + design system)
- UX Pilot (for generating UI)
- Figma (for feedback + handoff)
If you work with clients or want to improve how your MVP looks, this is worth adding to your process.
Bookmark this and thank me later.
This entire workflow, from idea to final UI, takes under an hour.
What used to take entire design sprints can now be done with:
- ChatGPT (for planning + design system)
- UX Pilot (for generating UI)
- Figma (for feedback + handoff)
If you work with clients or want to improve how your MVP looks, this is worth adding to your process.
Bookmark this and thank me later.