正在加载视频...

视频加载失败

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 次观看 • 1 年前 •via X (Twitter)

13 条评论

Harshil Tomar ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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 ✪ 的头像
Harshil Tomar ✪1 年前

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

Matt Figdore 的头像
Matt Figdore2 年前

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.

相关视频