Prajwal Tomar

Bookmark this if you're just getting started with Cursor

We’ve built 17+ MVPs using it and finally cracked the most efficient way to use it without breaking things.

If you’re a beginner, this thread has everything you need to get started and make Cursor work for you ↓

1. Plan before you code

A messy plan leads to messy prompts.

Use ChatGPT to generate:
- A simple PRD with your app goals, user flows, and features
- Your database schema and table relationships
- A color palette and typography reference
- Tech stack outline (e.g. Supabase, Stripe, Tailwind, etc.)

Pro tip: Save all this as .md files inside your Cursor repo.

That way, you and the AI stay aligned on scope from day one.

2. Start with a foundation (don’t go blank)

Cursor is powerful, but it performs better with some structure.

Use tools like:
- UX Pilot to create styled screen mockups
- Or Lovable/Bolt for fast UI generation

Once you have your layout, refine it in Cursor.

3. Set up Project Rules (replace .cursorrules)

Don’t skip this.

With Project Rules, you can:

- Apply scoped instructions (e.g. “Only use Tailwind classes in .tsx files”)
- Define naming conventions and preferred patterns
- Sync rules with your GitHub repo for team use

Set these up early. It’s how you make AI behave like a real teammate.

A detailed post on setting up Cursor is a Right is coming soon. Stay tuned.

4. Save reusable code in Notepad

Cursor’s Notepad is your AI memory.

Store:
- Auth flows (e.g., Supabase signup/login)
- Stripe checkout setup
- Common fetch/query patterns
- Validation logic and Zod schemas

5. Split your work with Chat Tabs

Cursor 0.48 introduced tabs, massive for multitasking.

I use:
- One tab for planning (talking to the AI about structure)
- One tab for fixing bugs or iterating

This avoids losing context across different conversations.

6. Automate with MCP (Model Context Protocol)

MCP lets Cursor do more than code:

- Run scripts to clean your repo
- Automate database setup (like Supabase table creation)
- Pull research from tools like Perplexity or Docs

7. Ask the Web

Use @web to ask real-time questions:

- Framework docs
- Recent blog posts
- Fixes from StackOverflow

Watch Out: AI can pull outdated or incorrect sources, always check links before trusting them

Note: Cursor 0.46+ does this by default without @web

8. Save working code in .md files

When Cursor gives you a great response:

- Save it in a markdown file like auth-flow(.)md, deployment(.)md, etc.
- Reuse later when building similar apps
- Cursor will refer to it for future prompts too

9. Use YOLO Mode (but wisely)

YOLO Mode = no confirmation before running commands.

Use it to:

- Format files
- Generate boilerplate
- Run scripts fast

Watch Out: Use on a separate Git branch. It will overwrite files instantly.

10. Fix UI with Screenshots

Cursor supports visual input.

Just:

- Take a screenshot of the broken UI
- Drag it into the chat
- Prompt: “Fix this spacing and align it with the design system”

Much faster than explaining with words.

11. Learn while building

Ask Cursor to:

- Explain code like you’re a beginner
- Walk through step-by-step logic
- Suggest better patterns

This is how I upskilled while working on real MVPs.

12. Use code templates

Why start from scratch?

Use Vercel’s official templates for:

- Next.js apps
- Auth flows
- Stripe payments
- Blog + CMS setup

Link: https://vercel.com/templates/next.js

13. New in Cursor 0.48.x

Take advantage of these new features:

- Custom modes (beta) allow you to compose new modes with tools and prompts that fit your workflow.
- Chat Tabs: Run parallel conversations without losing context
- Ask mode now has access to all search tools by default, so the @Codebase tool has been removed.
- Sound Notifications: Get notified when Cursor is done thinking

Set these up to make Cursor feel even more personal

TLDR:

- Plan your build with .md docs
- Use Project Rules to control AI
- Review everything with async reviews (use CodeRabbit)
- Save and reuse smart responses
- Use tabs and screenshots for better context
- Combine with tools like MCP and Notepad for superpowers

Let me know if you want a walkthrough video of this and I’ll record one soon.

Build fast. Stay in control.

Want to steal the UI/UX of top companies and use it in your own app? (Legally?)

Here’s the exact system I use to borrow proven designs and have AI rebuild them into production-ready UI

Mobbin → Figma → Windsurf

From idea to polished frontend in minutes ↓ 

1/ You don’t need to invent design

You just need to reuse what already works

Products like Uber, Bolt, and Notion have spent millions perfecting their UX

Your job is to study their flow

And use AI to recreate it

2/ Step 1: Mobbin → Find the gold

Go to http://mobbin.design

Search by keyword: ride, cab, fintech, crm

Pick real apps from real companies

You’re not guessing, you’re following proven UX patterns

3/ Unlock entire UX flows

Click into any app

Go to the “Flows” tab

Now you’ve got the whole product journey

- Onboarding
- Booking
- Payments
- Settings
- Everything

This is where you learn how great apps are built 

4/ Copy it into Figma

Use the Mobbin browser plugin

Click “Copy to Figma”

Now you have the full UI flow, editable inside your Figma file

You just cloned the layout of a unicorn 

5/ Step 2: Windsurf → Let AI rebuild it

Windsurf is where the AI takes over

It uses MCP to interpret your Figma layout and generate code

You’re not prompting from scratch

You’re guiding the model with real-world UI references

6/ Connect Windsurf to Figma

Inside Windsurf:
- Go to Settings → Cascade → MCP
- Add Figma
- Paste your Figma token

Windsurf can now read your design file 

7/ Use this prompt inside Cascade

“Look at the Figma file and use the design as a reference to build my cab booking app. Start with home and booking screens.”

Windsurf will analyze and rebuild the design

8/ What you get back

Windsurf returns:

- Improved UI
- Clean component layout
- React Native (Expo) code
- Routing, input handling, forms

It doesn’t just build

It interprets like a frontend dev

9/ Keep going

Once you see results, ask:

“Apply the same design style to ride details, tracking, payment, and history screens.”

You can go screen-by-screen or ship the full app flow

10/ What you just did

- Found a proven design
- Pulled it into your system
- Let AI rebuild it for your use case
- Got working frontend code

You didn’t hire anyone

You didn’t write code

You didn’t waste time

11/ Final takeaway

You can’t fake good design

But you can borrow from the best

- Mobbin to find it
- Figma to structure it
- Windsurf to build it

Use their UX. Ship your product.

Legally? Maybe.

Effectively? 100 percent.

How I use @lovable_dev + @cursor_ai  to build MVPs 10x faster

This workflow helps me skip the design phase, automate 70% of the dev work, and stay flexible for rapid changes.

If you’re building with AI, you’ll want to see this. 

1/ Start in @lovable_dev

Every MVP starts inside Lovable.

Why? It lets me build full apps visually with:
- Supabase auth (email, Google, magic links)
- Stripe integration (checkout, subscriptions)
- OpenAI-powered features
- Fully responsive frontend flows

This saves me days of manual coding.

2/ Build 70–80% inside Lovable

I don’t jump to code immediately.

First I complete:
- All core screens
- Page routing
- Basic backend setup
- External integrations (Stripe, OpenAI)

Lovable handles most of this without a single line of code.

3/ Sync to GitHub, move to @cursor_ai

Once the base is solid, I sync the Lovable project to GitHub and open the repo inside Cursor.

This is where I switch from visual → code.

Why? Lovable handles 80% and Cursor helps me fix and optimize the remaining 20%

4/ Fix integration bugs inside Cursor

Sometimes Lovable:
- Misconfigures Stripe flows
- Misses edge cases in API calls
- Doesn’t handle all auth scenarios

I use Cursor to:
- Debug and fix Stripe setup
- Secure Supabase calls
- Add error handling and fallback logic

5/ Push back to GitHub → Lovable auto-syncs

Once I’m done fixing and refining in Cursor, I push the changes to GitHub.

Lovable automatically syncs the updated code. Now the updated backend logic lives inside a visual editor again.

I continue working on top of it.

6/ Final visual polish back in Lovable

Cursor is great for logic, but not UI fine-tuning.

Lovable makes it easy to:
- Resize buttons
- Add logic to components
- Tweak layout
- Adjust styling visually

I wrap the project with final polish here.

7/ Why this workflow works

Most devs either:

Stay stuck in the visual tool too long
or
Jump to code too early

I use both at the right time:
- Lovable for speed and structure
- Cursor for optimization and control

It’s the perfect feedback loop.

8/ Summary: My Lovable + Cursor workflow

- Build base app in Lovable (auth, Stripe, OpenAI)
- Sync to GitHub → open in Cursor
- Fix bugs, secure endpoints, clean logic
- Push to GitHub → auto-syncs back to Lovable
- Final UI polish in visual editor

Speed + flexibility = fast, production-ready MVPs

9/ What’s coming next?

This video was just a quick walkthrough of my current AI dev workflow.

But I’m planning a full series where I’ll go deeper, from:

• Planning the MVP in ChatGPT
• Building full MVPs in Lovable
• Optimizing logic in Cursor
• Deploying and marketing the final product

If you liked this, bookmark the thread.

The full series is coming soon.

AI can build landing pages, but most look generic.

Here’s my structured approach using @lovable_dev  + 21stdev to create high-converting, polished designs, FAST.

A complete breakdown: 

1. Start with Design Inspiration & Structure

Before touching Lovable, I gather design references from Dribbble, Behance, and top SaaS landing pages.

I focus on:
- Clean typography and spacing
- High-converting CTAs
- Smooth animations and interactions

Good design starts with understanding what works.

2. Convert Ideas into a Structured Layout

Instead of randomly prompting Lovable, I generate a detailed landing page structure using a custom GPT prompt generator (will share the prompt tomorrow along with the video based on this topic)

This includes:
- Page sections (hero, features, CTA, FAQ, footer)
- UI elements, colors, and typography
- Hover states, animations, and micro-interactions

This ensures AI creates something well-planned, not random.

3. Generate the First Draft in @lovable_dev 

I feed Lovable two things:
- A detailed textual description of the page
- A design reference screenshot

This leads to a much more accurate output compared to vague prompts.

4. Refine with 21stdev for High-Quality UI

Lovable speeds up the base design, but I fine-tune it using 21stdev’s UI components to polish the final look.

Some key pre-built components:
- Navigation bars with hover effects
- Optimized hero sections
- Pre-styled feature blocks
- High-converting CTA sections

This eliminates unnecessary manual adjustments.

5. Fix AI Misinterpretations

AI-generated layouts always need refinement. I fix:

- Branding & colors (Lovable defaults to blue, I align it to the brand)
- Spacing & layout (proper padding and margins)
- Typography (ensuring readability and consistency)
- Backgrounds & depth (subtle gradients > flat colors)

This step makes the design feel intentional, not AI-generated.

6. Mobile Optimization is Non-Negotiable

Most users browse on mobile, so I make sure:

- Input fields go full-width for better usability
- Font sizes adjust for readability
- Buttons are tap-friendly
- Sections stack smoothly

Skipping this step kills conversions.

7. Add Subtle Animations for a Modern Feel

A static page feels outdated. I add:

- Smooth fade-ins for hero sections
- Button hover effects
- Feature sections that slide in on scroll
- Background animations for depth

This makes the page feel polished without being overwhelming.

8. Deploy with a single click

Lovable lets you launch your web app instantly. Once tested, connect a custom domain via Netlify, and your site is live, no extra setup needed.

Why This Works Better Than Relying Purely on AI

Most people expect AI to generate a perfect design on its own. It doesn’t work like that.

With a structured approach:

- The AI output is much closer to the final version from the start
- I spend less time fixing errors
- The page has a clear layout instead of random sections thrown together

Lovable + 21stdev lets me build fast without sacrificing quality.

Key Takeaways

- AI-generated designs need structure before prompting
- Lovable + 21stdev is a game-changer for AI-powered landing pages
- AI speeds up development, but manual refinements are still necessary
- Animations & interactions elevate the user experience

This is the fastest and most effective way I’ve found to build landing pages that look great and convert well.

A detailed video on this is coming tomorrow. Stay tuned!

I reverse-engineered how Lovable's top users build apps 10x faster.

Turns out, It's not about writing longer prompts.

It's about this structured prompting system nobody talks about ↓

1/ Create a Knowledge Base before you build

Include these in your project settings:

• Project Requirements Document (PRD)
• User flow explanation
• Tech stack details
• Design guidelines
• Backend structure

The clearer your context, the better your results.

2/ Master the 4 levels of prompting

Level 1: Training Wheels

Use labeled sections in your prompts:
- Context (what you're building)
- Task (what you want)
- Guidelines (how to do it)
- Constraints (what to avoid)

Example:
Bad: "Build me a login page"

Good:
Context: I'm

3/ Use the "Diff &amp; Select" approach

Don't let Lovable rewrite entire files.

Add this to prompts: "Implement modifications while ensuring core functionality remains unaffected. Focus changes solely on [specific component]."

Fewer changes = fewer errors.

4/ Always start with a blank project

Build gradually instead of asking for everything at once.

Follow this order:

• Front-end design (page by page, section by section)
• Backend using Supabase integration
• UX/UI refinements

5/ Chat Mode vs Agent Mode

Chat Mode: Planning, debugging, asking questions. Cannot directly edit code.

Agent Mode: Autonomous execution. Edits code, refactors, fixes bugs.

Use Chat Mode to think through problems and plan.

Then let Agent Mode execute the solution.

6/ Debug like a pro

When errors happen:

→ Use "Try to Fix" button
→ Copy error to Chat mode first
→ Ask: "Use chain-of-thought reasoning to find the root cause"
→ Then switch to Edit mode

7/ Mobile-first prompting

Add this to every prompt:

"Always make things responsive on all breakpoints, with a focus on mobile first. Use shadcn and tailwind built-in breakpoints."

Most users are on mobile anyway.

8/ Step-by-step beats everything at once

Don't assign 5 tasks simultaneously.

The article specifically says: "Avoid assigning five tasks to Lovable simultaneously! This may lead the AI to create confusion."

One task at a time = fewer hallucinations.

9/ Lock files without a locking system

Add to prompts: "Please refrain from altering pages X or Y and focus changes solely on page Z."

For sensitive updates: "This update is delicate and requires precision. Examine all dependencies before implementing changes."

10/ Refactoring that works

When Lovable suggests refactoring:

"Refactor this file while ensuring UI and functionality remain unchanged. Focus on enhancing code structure and maintainability. Test thoroughly to prevent regressions."

if you don’t want to miss out on all the AI workflows, guides, and videos I share every week, join my newsletter.

You’ll get everything straight to your inbox: