Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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,495 görüntüleme • 1 yıl önce •via X (Twitter)

13 Yorum

Harshil Tomar ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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 ✪ profil fotoğrafı
Harshil Tomar ✪1 yıl önce

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

Matt Figdore profil fotoğrafı
Matt Figdore2 yıl önce

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.

Benzer Videolar