The Best Claude Code Prompts for Building a SaaS MVP

I need you to build a complete, production-ready SaaS MVP called [YOUR_PRODUCT_NAME].

## Product Details
**What it does**: [BRIEF_DESCRIPTION]
**Core problem it solves**: [MAIN_PAIN_POINT]
**Target users**: [WHO_USES_IT]
**Key features**: [LIST_2_4_CORE_FEATURES]

## Build Requirements

Use the **Explore → Plan → Code → Commit** workflow. For each step:
1. Explore relevant files and patterns
2. Create a detailed plan using extended thinking
3. Implement the solution
4. Show me what you built before moving to next step

### Step 1: Database Schema Design

**Explore**: Read the existing `db/schema.ts` file to understand the current schema pattern.

**Plan**: Design the schema for [YOUR_PRODUCT_NAME]:
- Users table: id (varchar 255), email, firstName, lastName, role, createdAt, stripeCustomerId, stripeSubscriptionId, subscriptionStatus, subscriptionEndsAt
- 2-4 custom tables for the core features
- snake_case columns, camelCase TypeScript
- Foreign keys to users.id
- Proper indexes on frequently queried fields

**Code**:
- Update `db/schema.ts` with new tables
- Generate SQL I can run in Supabase (don't use drizzle-kit push)
- Save SQL to a file

**Verify**: Show me the schema and SQL before proceeding.

---

### Step 2: Theme & Branding

**Explore**: Read `app/globals.css` and `components/LandingPageClient.tsx` to understand current styling.

**Plan**:
- Choose 2 Google Fonts that match [YOUR_PRODUCT_NAME] personality
- Select brand colors (primary, secondary, accent) that fit the product
- Draft new landing page copy

**Code**:
- Update `app/globals.css`:
  - Add @import for Google Fonts at top (before @tailwind)
  - Update CSS variables for colors
- Update `components/LandingPageClient.tsx`:
  - New hero headline
  - Feature card copy
  - Relevant Lucide React icons

**Verify**: Show me the color scheme and copy before proceeding.

---

### Step 3: Server Actions for Core Features

For each core feature of [YOUR_PRODUCT_NAME]:

**Explore**: Read existing server actions to understand the pattern.

**Plan**: Design the server actions needed:
- create[Feature](data)
- get[Features](userId)
- update[Feature](id, data)
- delete[Feature](id)

**Code**: Create `app/actions/[feature].ts`:
- Import getKindeServerSession, db, schema
- All functions check authentication
- Validate inputs with Zod
- Filter queries by userId
- Call revalidatePath after mutations
- Proper error handling

**Test**: Run the actions and verify they work.

---

### Step 4: React Components

For each core feature:

**Explore**: Look at existing components to match the style.

**Plan**: Design the component hierarchy:
- Create[Feature]Dialog (form in Dialog)
- [Feature]List (display all items)
- [Feature]Card (single item display)
- [Feature]Stats (summary metrics)

**Code**:
- Use shadcn UI components (Dialog, Card, Button, Input, Textarea, Badge)
- Add "use client" only where needed (forms, dialogs)
- Loading states and error handling
- Mobile responsive
- Call server actions

**Verify**: Test the components in the browser.

---

### Step 5: Dashboard Integration

**Explore**: Read `app/dashboard/page.tsx`.

**Plan**:
- Stats overview at top
- Onboarding for new users (no data yet)
- Main feature sections
- Use Tabs for different views if needed

**Code**:
- Import all feature components
- Fetch data with server actions
- Clean, organized layout
- Mobile responsive

**Test**: Visit /dashboard and verify everything works.

---

### Step 6: Subscription Plans

**Explore**: Check if `lib/subscription.ts` exists.

**Plan**:
- Free plan limits: [DEFINE_LIMITS]
- Plus plan: $49/year, unlimited
- Helper functions: isPlusUser, canAccess[Feature]

**Code**:
- Create `lib/subscription.ts` with helpers
- Create `components/UpgradePrompt.tsx` (Dialog explaining benefits)
- Create `app/pricing/page.tsx` (comparison table)
- Enforce limits in server actions (check plan, return error if limit reached)

**Test**: Try hitting limits as free user.

---

### Step 7: Stripe Integration

**Explore**: Read existing Stripe code if any.

**Plan**:
- Checkout session creation
- Webhook handlers for subscription events
- Customer portal for managing subscriptions

**Code**:
- `app/api/create-checkout-session/route.ts` - create session
- `app/api/webhooks/stripe/route.ts`:
  - Verify webhook signature
  - checkout.session.completed → update user to Plus
  - customer.subscription.updated → handle renewals
  - customer.subscription.deleted → downgrade to Free
- Link pricing page to checkout

**Test**: Test with Stripe test cards (4242 4242 4242 4242).

---

### Step 8: Email Templates

**Explore**: Check `emails/` directory for existing patterns.

**Plan**:
- Welcome email when user signs up
- Subscription confirmation after checkout

**Code**:
- `emails/WelcomeEmail.tsx` with @react-email/components
- `emails/SubscriptionConfirmation.tsx`
- `lib/email.ts` with sendWelcomeEmail, sendSubscriptionConfirmation
- Trigger in webhooks and auth callbacks

**Test**: Trigger emails and check Resend dashboard.

---

### Step 9: Production Preparation

**Explore**: Run `npm run build` to find issues.

**Plan**: Fix all build errors and prepare for deployment.

**Code**:
- Fix all TypeScript errors
- Fix all ESLint warnings
- Create `.env.example` with all required vars
- Verify no hardcoded secrets
- Add comments to complex code

**Test**:
- `npm run build` succeeds
- All features work in production build
- Mobile responsive
- No console errors

---

### Step 10: Final Polish & Testing

**Test Everything**:
- Sign up new user → see onboarding
- Create/edit/delete items → verify CRUD works
- Hit free plan limit → see upgrade prompt
- Checkout with test card → become Plus user
- Verify unlimited access
- Test on mobile and desktop
- Verify emails sent

**Commit**: Create a comprehensive commit with all changes.

## Success Criteria

The MVP is complete when:
- ✅ All CRUD operations work
- ✅ Authentication flow complete
- ✅ Stripe checkout functional
- ✅ Free users hit limits correctly
- ✅ Plus users have unlimited access
- ✅ Emails trigger properly
- ✅ Mobile and desktop responsive
- ✅ Zero TypeScript errors
- ✅ `npm run build` succeeds
- ✅ Ready to deploy to Vercel

Work through each step carefully. After completing each step, show me what you created and ask if you should proceed to the next step. Use your tools to explore, read files, make changes, and test thoroughly.