Loading video...

Video Failed to Load

Go Home

Just recorded a 46-min tutorial on How to Make a MVP UI from SCRATCH using Cursor and bolt.new ! This covers documentation, PRD, db design, ui design, prompting and much more ! Comment "MVP" to get a FREE Guide Here's the Full Summary ↓

22,503 views • 1 year ago •via X (Twitter)

13 Comments

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

1/ Before writing a single line of code, I create 5 key documents using Claude/ChatGPT: PRD (Product Requirements Document) Roadmap/Timeline Database Design UI Design Guidelines Legal Docs (Privacy Policy, TNC) Documentation = Foundation ✅

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

2/ Smart Prompting The secret sauce is in the prompts. I always start with : "You are a senior product manager who is good at building MVPs in 5-6 weeks and taking them to market..." Role-based prompting gives you 10x better results than generic requests.

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

3/ Database Design with Visual Mapping After getting the DB schema from AI, I use @eraser_io to generate visual database diagrams This gives me a clear picture of: - Table relationships - Foreign key mappings - Data flow architecture Visual > Text every time 📊

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

4/ UI Inspiration + AI Design I don't start from scratch. Instead: - Browse Dribbble/Behance for inspiration - Find 2-3 designs I like - Feed them to AI with my requirements - Get a complete UI design system Inspiration + AI = Beautiful UIs fast ⚡

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

5/ Tech Stack Setup Next.js + TypeScript Prisma ORM Supabase (Database) T3 Stack architecture I have a pre-built template with auth, components, and folder structure ready to clone 🛠️

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

6/ Parallel Development While AI generates code, I work on: - Setting up Supabase project - Creating environment variables - Running database migrations - Testing connections Never wait. Always parallel process 🏃‍♂️

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

7/ AI-Powered Coding with Cursor Using Cursor IDE with detailed prompts : "You are a senior software engineer proficient in Next.js + TypeScript. Go through the and ..." Context window = Everything 📝

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

8/ Landing Page Generation Used @boltdotnew for quick landing page generation: - Feed it the PRD summary - Add UI design guidelines - Get a responsive landing page in seconds The results are honestly mind-blowing 🤯

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

9/ Component Integration The beauty of having a solid template: - Pre-built UI components (shadcn) - Authentication flows - Consistent file structure - Reusable patterns 90% faster development when you don't start from zero 🚀

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

10/ Version Control & Semantic Commits Throughout the process: - Git add, commit with semantic messages - "feat: docs init", "feat: db schema", etc. - Regular checkpoints for rollback safety Good habits = Sustainable development 💪

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

11/ The Results: From idea to working MVP UI : ✅ Complete documentation ✅ Database schema & migrations ✅ Beautiful landing page ✅ Dashboard mockups ✅ Authentication flows All in a fraction of the time it used to take!

Harshil Tomar ✪'s profile picture
Harshil Tomar ✪1 year ago

If you would like a dream MVP built. Book a call below ↓

Matt Figdore's profile picture
Matt Figdore2 years ago

This is the biggest productivity cheat code right now. Kiss reading documents goodbye. You can get an instant summary of any document with this tool.

Related Videos