Dreamlaunch
HomeBlog
How to Make a MVP UI from SCRATCH using CURSOR and BOLT in 45 mins

How to Make a MVP UI from SCRATCH using CURSOR and BOLT in 45 mins

Hi! I'm Harshil, founder of Dream Launch Studios. I want to share how I take an idea and turn it into a minimum viable product (MVP) using AI tools like ChatGPT, Claude, and platforms such as Prisma and Supabase. My goal is to help you build and launch a product quicklyβ€”usually within six weeksβ€”by focusing on documentation, planning, and rapid prototyping.


1. 🚧 How I Start with Documentation

For me, everything begins with solid documentation. I create several key documents to keep the project clear and organized:

  • Product Requirements Document (PRD): This is my detailed blueprint. It covers the product idea, features, pricing tiers, risks, authentication roles, and integrations.
  • Roadmap/Timeline: I map out how development will progress feature by feature.
  • Database Design: I define the database schema using Prisma ORM and Supabase for the backend.
  • UI Design: I specify colors, fonts, and design principles to keep the UI consistent.
  • Legal Documents: I prepare privacy policies and terms to stay compliant.
  • Additional Docs: To-do lists, API documentation, role-based access docs, and a README for setup instructions.

Having these documents upfront helps me and anyone else involved stay aligned and work efficiently.


2. πŸš€ Turning an Idea into a To-Do App MVP

To demonstrate, I pick a simple to-do app idea. It includes:

  • User authentication
  • Task management with priorities and due dates
  • A landing page and FAQ
  • AI-powered market positioning

I use ChatGPT to act as a senior product manager, prompting it carefully to generate a detailed PRD. This helps me clarify the scope and features before coding.


3. 🚧 Setting Up My Codebase

I start with a T3 stack template repo (Next.js, TypeScript, Prisma, etc.) that already has authentication and structure set up. I clone it, install dependencies with PNPM, and use semantic commit messages to keep version control clean. This jumpstarts my development without reinventing the wheel.


4. 🚧 Designing the Database

From the PRD, I draft the database schema in Prisma. I connect it to Supabase and use eraser.io to generate AI-powered database diagrams. These visuals help me understand relationships between tables like users, tasks, notifications, and analytics. It's a crucial step to ensure my backend matches the product needs.


5. 🎨 Crafting the UI Design

I create a UI design doc outlining colors, fonts, and principles. I browse Dribbble and Behance for to-do app inspiration and share those designs with AI tools like Claude and ChatGPT to generate UI guidelines and components. I aim for a clean, minimalistic look that's user-friendly.


6. 🚧 Backend Setup and Running Locally

I create a new Supabase project, set environment variables, and connect it to my Prisma schema. Then I run the app locally to preview the landing page and basic features. Prisma handles schema generation and migrations smoothly, so this step is quick.


7. πŸ’» Using AI to Build the Frontend

I leverage AI coding assistants like Cursor to generate frontend pages and mock APIs based on my PRD and UI docs. I prompt the AI as a senior software engineer skilled in Next.js and TypeScript. The AI quickly produces components, routing, and mock data, helping me build a responsive landing page in no time.


8. πŸš€ Final Tips from My Workflow

  • I focus on crafting good prompts to get the best AI output.
  • Semantic commits keep my version history meaningful.
  • I save screenshots of diagrams and design references for easy access.
  • I prepare legal docs early to avoid compliance issues.
  • I work iteratively, developing backend, frontend, and docs in parallel.

πŸš€ Summary

This is how I build AI-first MVPs efficiently:

  • Start with detailed documentation.
  • Use AI tools to generate docs, code, and designs.
  • Use modern stacks like T3, Prisma, and Supabase.
  • Visualize database schemas with AI diagrams.
  • Get UI inspiration and generate components with AI.
  • Maintain good project hygiene with clear commits and docs.

Following this process helps me go from idea to a market-ready MVP in just weeks. If you want, I can share my template repo and example docs to help you get started faster!


πŸš€ Resources

Full YT Video: https://youtu.be/xXzk6HbTZhA

Dreamlaunch

Turn Your Idea Into a Revenue-Ready MVP in 4 Weeks

Β© DreamLaunch LLC