How I designed and built a PWA using AI

The client wanted a mobile app, but I recommended a PWA for faster development and lower costs.

Here’s how I designed, built, and launched it using AI ↓ 1/ Planning the Idea With AI

Every project starts with a clear understanding of the problem, solution, and audience.

I used @ChatGPTapp to turn the client’s rough idea into a structured brief.

Prompt:
“I’m starting a team productivity tracker for remote teams. It should help managers track work hours, task completion, and team efficiency. Convert this into a concise project brief.”

ChatGPT structured it into:
- Problem: Teams struggle to track and improve their daily work
- Solution: A web-based productivity tracker with AI-generated insights
- Target Users: Remote teams handling multiple projects

Having a well-defined brief saved time and avoided confusion later.

I can’t stop building beautiful hero sections inside @lovable_dev
This one turned out insane.

Credits: @DannPetty
Full breakdown below ↓ 1/ Start with visual inspiration

I found this layout from Dann Petty’s portfolio and instantly knew I wanted to rebuild it.

Great structure. Clean font. Strong first impression.

https://x.com/DannPetty/status/1936107118353895663

If you’re still copy-pasting Shadcn components manually, you’re wasting 80% of your dev time.

I’ve built 20+ MVPs and learned this the hard way.

Here’s the workflow that changed everything 👇 Most devs do this:

→ Ask ChatGPT to build UI
→ Get broken components
→ Debug CSS for 2 hrs
→ Copy-paste Shadcn docs
→ Fix styling
→ Repeat forever

Sound familiar?

1 year ago, I was a full-time dev trying to make an extra $1K/month.

Today:
→ I run an AI MVP agency
→ A paid community for AI-first devs
→ Launching my first SaaS soon
→ All bringing in ~$30K/month total

Didn’t plan this.
Just kept building in public.

Here’s the story 👇 1/ Started with small goals

Back in Sep 2024, I was just posting what I was learning and building.
Hackathons, AI experiments, random ideas.

Didn’t care about likes.
I just wanted to build, share, and maybe make $1K extra alongside my full-time job.

https://twitter.com/1676906284715503617/status/1840435812766220707

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

Here’s my exact Mobbin + Figma system to do it ↓ 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.

I’ve vibe coded 18+ MVPs for clients using Cursor.

Security was the one lesson I learned the hard way.

Here’s the checklist I wish I had from day one ↓ 1. Rate limit your endpoints

If you skip this, bots or bad actors can hit your backend 100s of times per second.

This can:
• Crash your database
• Drain your Supabase usage
• Spike costs or open you to attacks

Tools to use:
• Supabase Edge Functions with a rate limiter
• Vercel Middleware
• Basic IP throttling with Next.js middleware

Want to 10x your Cursor or Claude Code workflow?

Stop prompting like a developer.
Start thinking like a product manager.

Here’s how ↓ 1. AI tools are developers, not product managers

Cursor, Windsurf, Lovable, they’re great at execution.

But they can’t make product decisions for you.

If your prompt lacks clarity or structure, the output will suck. Every single time.

How I Make Cursor Write Perfect Code Every Time

It’s not about better prompts.
It’s about better rules.

This is how I train Cursor to ship clean, secure code on the first try ↓ TLDR:

• Set Global Rules for coding style
• Generate Project Rules using /generate cursor rules
• Stop copy-pasting Cursor Rules. Write ones that fit your codebase.
• Use 5–6 custom .mdc files per MVP
• Attach rules as “Always”
• Let Cursor code with real context

The exact workflow I use to ship high quality MVPs fast for my clients.

I use this to plan, design, build, and launch full MVPs in 2–3 weeks.

After 18 builds, here’s the exact system that works.

Bookmark this ↓ 1/ Plan with ChatGPT or Gemini

Before diving into the code, fully grasp the idea.

This phase is about achieving clarity. By its end, you should understand every aspect of the idea: the tech stack, core features, target audience, EVERYTHING.

Use ChatGPT or Gemini to create these docs:
- PRD/ MVP Plan
- UI Development Plan
- Database Design
- Implementation Plan
- Launch Checklist (you can generate this later, but use the same conversation)

Spend time here; it saves you from chaos later.

I’ve built 18+ products for clients using Cursor, and I’ve cracked the most efficient way to use it with minimal mistakes.

If you’re a beginner, this thread has all the tips and tricks you need to get started and make Cursor actually work for you 👇 1/ Set up Cursor Rules

This tells Cursor your coding preferences and standards.

Use /generate-cursor-rules

Stop copy-pasting random project rules. Build them based on your own codebase context. You’ll get way better results.

Save this if you want your next AI site to ACTUALLY look good.

This is the exact UI workflow I use on every client MVP 👇 1/ Stop saying “make this UI beautiful.”

That’s exactly why your site looks messy and inconsistent.

Here’s what I do instead:
→ Take a screenshot of any site I love
→ Drop it into ChatGPT
→ Ask it to create a design.json that captures the layout, colors, spacing, typography

Then I tell Cursor:
“Use this design.json for styling only.”

Works insanely well.

Want to know how I use Cursor and Lovable to ship MVPs fast for clients?
I’ve built 18+ products using this exact workflow.

Here’s the full system I use to plan, design, build, and launch.
👇 Save this. You’ll need it. 1. Start with planning

Before writing a single line of code, I plan everything inside ChatGPT.

The documents I create:
- PRD (Product Requirements Document)
- UI Development Plan
- Database Design
- Implementation Plan

This step is where 90% of the clarity comes from. The more structured these are, the better the output across every tool.

I stopped using Cursor and switched to Claude Code.

Best decision I’ve made in a while.

Here’s why I’m not going back (and the tips saving me 10+ hours every week) ↓ 1/ Cursor kept messing up my bigger projects

Whenever I worked on large codebases, Cursor started breaking.

Context got confusing. Code suggestions didn’t make sense.
I was fixing AI mistakes more than building.

It got frustrating.

I ditched “vibe coding.”

And suddenly, building with Cursor felt calm again.

Here’s how I ship faster without burning out ↓ Reposting this thread because many of you didn’t catch it the first time. It’s worth reading.

-------

1/ The workflow (quick summary)

This is the system that works:

- Plan clearly (PRD) @ChatGPTapp
- Break it down with TaskMaster
- Execute one task at a time in @cursor_ai
- Review everything with @coderabbitai

Let’s go deeper ↓

If you’re using lovable to build apps, read this first

This is everything I wish I knew before starting ↓ Reposting this thread because many of you didn’t catch it the first time. It’s worth reading.

-------

1. Nail your first prompt

I always start inside my custom GPT, SnapPrompt, and get the full prompt for my landing page first.

This includes layout, structure, typography, and design style. I just copy-paste that into Lovable with a design reference attached and it gives me a clean starting point.

I’ve used Claude Code for 100+ hours building MVPs.

Most developers are missing the best features.

Here are 10 tricks that will change how you build ↓ 1/ Use planning mode before EVERYTHING

- hit Shift+Tab twice to enter planning mode
- I plan every feature here first
- no code gets written until the plan is solid
- saves me hours of refactoring later

This is how I made Cursor 10x more accurate.

GitMCP turns any GitHub repo into an MCP server.

Here’s how ↓ 1/ Cursor breaks when the context is messy

When you link a GitHub repo, Cursor loads everything even the junk.

That overloads the model.

And you get:

- Confused completions
- Useless suggestions
- Wrong assumptions

I’ve vibe coded 18+ MVPs for clients using Cursor.

Security was the one lesson I learned the hard way.

Here’s the checklist I wish I had from day one ↓ 1. Rate limit your endpoints

If you skip this, bots or bad actors can hit your backend 100s of times per second.

This can:
• Crash your database
• Drain your Supabase usage
• Spike costs or open you to attacks

Tools to use:
• Supabase Edge Functions with a rate limiter
• Vercel Middleware
• Basic IP throttling with Next.js middleware

Cursor just got 100x more powerful.

And it wasn’t because I used a bigger model.

It was because I gave it better memory.

Here’s how I fixed it with Context 7 MCP ↓ 1. The core problem: outdated context kills your agent

Every LLM has a training cutoff.

Ask it to install expo and it runs a broken command.

Not because the model is bad. It just doesn’t know recent changes.

What I learned after building 2 MVPs with Claude Code (and why I might not go back to Cursor)

Here’s what I wish someone told me earlier ↓ 1/ Claude isn’t a one-shot coder

Don’t just ask it to “add feature X.”

Start in plan mode.

Let it think first.

Then review the plan and run it.

It’s slower, but the code is way cleaner.

How I Make Cursor Write Perfect Code Every Time

This thread breaks down how I generate rules that make Cursor code cleaner, faster, and way more accurate ↓ TLDR:

• Set Global Rules for coding style
• Generate Project Rules using /generate cursor rules
• Use 5–6 custom .mdc files per MVP
• Attach rules as “Always”
• Let Cursor code with real context