This is how I design mobile apps for my clients No Figma No design...
Prajwal Tomar@PrajwalTomar_
37 views
Mar 28, 2025
~3 min read
Advertisement
1
This is how I design mobile apps for my clients
No Figma
No design team
No wasted weeks
Just UX Pilot, Lovable, Supabase, and Cursor.
Here’s exactly how I designed MoodFlow step by step
No Figma
No design team
No wasted weeks
Just UX Pilot, Lovable, Supabase, and Cursor.
Here’s exactly how I designed MoodFlow step by step
8:15
2
1. Start with a clear idea
Before touching any tool, I clarify the core problem, solution, and target user.
This sets the foundation for the entire build.
In this case, it was an AI journaling app called MoodFlow.
Before touching any tool, I clarify the core problem, solution, and target user.
This sets the foundation for the entire build.
In this case, it was an AI journaling app called MoodFlow.
3
2. Deep dive into the product vision
This step is all about understanding the MVP better than the client.
I break down the user journey, define the key pain points, and map how the app will solve them.
This saves hours later and makes dev way smoother.
This step is all about understanding the MVP better than the client.
I break down the user journey, define the key pain points, and map how the app will solve them.
This saves hours later and makes dev way smoother.
4
3. Why PWA?
I built this as a PWA instead of a native app.
Why?
– One codebase for mobile + desktop
– No app store delays
– Easy to test, iterate, and ship
It’s faster and leaner for early-stage products.
I built this as a PWA instead of a native app.
Why?
– One codebase for mobile + desktop
– No app store delays
– Easy to test, iterate, and ship
It’s faster and leaner for early-stage products.
5
4. Prioritize the core features
Now I trim the scope.
The goal is to keep the MVP under 5 main features.
This usually includes:
– Authentication
– Stripe (if needed)
– Core user flows
The tighter the scope, the faster we ship.
Now I trim the scope.
The goal is to keep the MVP under 5 main features.
This usually includes:
– Authentication
– Stripe (if needed)
– Core user flows
The tighter the scope, the faster we ship.
6
5. Draft the UI development plan
At this stage, I get ChatGPT to list all screens needed for the PWA with detailed descriptions.
This becomes my UI blueprint.
You can also turn this into a sitemap to share with the client for quick approvals.
At this stage, I get ChatGPT to list all screens needed for the PWA with detailed descriptions.
This becomes my UI blueprint.
You can also turn this into a sitemap to share with the client for quick approvals.
7
6. Generate the UI in UX Pilot
Using the screen descriptions, I feed layouts into UX Pilot.
In seconds, it generates clean, high-fidelity UIs.
You can tweak fonts, structure, and export code or screenshots, ready to build.
Using the screen descriptions, I feed layouts into UX Pilot.
In seconds, it generates clean, high-fidelity UIs.
You can tweak fonts, structure, and export code or screenshots, ready to build.
8
7. Assemble everything in Lovable
With the UI done, I move into Lovable.
Here I:
– Upload the project brief + code from UX Pilot
– Map out navigation and logic
– Connect real frontend state + interactions
In a few hours, it’s a fully functional PWA.
With the UI done, I move into Lovable.
Here I:
– Upload the project brief + code from UX Pilot
– Map out navigation and logic
– Connect real frontend state + interactions
In a few hours, it’s a fully functional PWA.
9
8. Backend via Supabase
Lovable supports Supabase out of the box.
It powers:
– Auth (email + magic link)
– Database (journals, moods, reflections)
– Edge Functions for AI logic
– Secure storage for voice notes
No DevOps, no setup headaches.
Lovable supports Supabase out of the box.
It powers:
– Auth (email + magic link)
– Database (journals, moods, reflections)
– Edge Functions for AI logic
– Secure storage for voice notes
No DevOps, no setup headaches.
10
9. Advanced logic? Use Cursor.
Didn’t need it for this build but if I did, Cursor lets me:
– Edit schema with AI
– Generate migrations
– Add RLS policies
– Optimize queries
Perfect for when you need more control.
Didn’t need it for this build but if I did, Cursor lets me:
– Edit schema with AI
– Generate migrations
– Add RLS policies
– Optimize queries
Perfect for when you need more control.
11
10. Launch and deploy
Final step:
– Preview in Lovable
– Connect a custom domain via Netlify
– Add a PWA manifest so it installs like a real app
And just like that it’s live, working, and ready for users.
Final step:
– Preview in Lovable
– Connect a custom domain via Netlify
– Add a PWA manifest so it installs like a real app
And just like that it’s live, working, and ready for users.
12
You don’t need a big team to build something great.
You need:
– The right tools
– The right prompts
– A focused process
This is how we build MVPs at @ignytlabs, and ship FAST.
Let’s build.
You need:
– The right tools
– The right prompts
– A focused process
This is how we build MVPs at @ignytlabs, and ship FAST.
Let’s build.
13
If you want to try UX Pilot for your next project,
here’s my referral link:
uxpilot.ai/?ref=prajwal
Highly recommend if you want to design clean UIs fast.
here’s my referral link:
uxpilot.ai/?ref=prajwal
Highly recommend if you want to design clean UIs fast.
