Three months ago, I spent 3 weeks building a SaaS dashboard. Last week, I built a more complex one in 3 hours and 42 minutes — using Claude as my co-pilot.
The difference wasn't just "using AI." It was a specific, repeatable workflow that eliminates the bottlenecks most developers hit when coding with AI.
Here's exactly how I do it — step by step, with real prompts.
The Problem: Most People Use AI Wrong
I see developers making the same mistakes:
- ❌ Pasting entire codebases into Claude and hoping for the best
- ❌ Using vague prompts like "build me a dashboard"
- ❌ Not breaking down the problem before asking AI
- ❌ Copy-pasting AI output without understanding it
- ❌ Not using AI for the things it's actually best at
The secret? AI is a junior developer that never sleeps, never gets bored, and has read every Stack Overflow answer ever written. But like any junior dev, it needs clear direction.
My 4-Hour Framework
I divide every project into 4 phases of ~1 hour each:
| Phase | Time | What AI Does | What I Do |
|---|---|---|---|
| 1. Blueprint | 60 min | Generates architecture, tech choices | Define requirements, review plan |
| 2. Scaffold | 60 min | Generates boilerplate, database schema | Set up repos, configure env |
| 3. Build | 60 min | Writes core feature code | Review, test, iterate |
| 4. Polish | 45 min | CSS, error handling, edge cases | Final review, deploy |
Let me walk through each phase.
Phase 1: Blueprint (60 Minutes)
Before writing a single line of code, I spend an hour planning with Claude. This is the most important phase and the one most people skip.
Step 1: Define the Problem
I start with a clear, structured prompt:
I'm building a SaaS product. Here's what I need:
Product: A subscription analytics dashboard
Users: SaaS founders who want to track MRR, churn, and LTV
Data Source: Stripe API
Tech Stack: Next.js 14 (App Router), TypeScript, Prisma, PostgreSQL, TailwindCSS
Timeline: Need a working prototype today
Give me:
1. A complete database schema with all relationships
2. API route structure (REST endpoints)
3. Component hierarchy (what pages/components I need)
4. The order I should build things in (dependency graph)
5. Potential gotchas I might hit
Why this works: Claude generates a concrete plan. No more "I'll figure it out as I go." You get a roadmap.
Step 2: Generate the Database Schema
Then I drill into each part:
Based on the schema you generated, write:
1. Complete Prisma schema with all models, relations, and indexes
2. Seed data (at least 20 records per model) that looks realistic
3. Migration SQL if needed
Format as a single `schema.prisma` file I can copy directly.
Step 3: API Contract
For each API route, give me:
1. The endpoint path and HTTP method
2. Request body/params type (TypeScript interface)
3. Response type (TypeScript interface)
4. Authentication requirement
5. Brief description of what it does
Format as a TypeScript file with all types exported.
Phase 1 output: You now have a complete spec — database schema, API types, component list, and build order. This would take 2-3 days to produce manually.
Phase 2: Scaffold (60 Minutes)
Now let AI generate all the boring stuff.
Generate Project Structure
Set up a Next.js 14 project with:
- App Router (not Pages Router)
- TypeScript strict mode
- TailwindCSS with these custom colors: [your palette]
- Prisma with PostgreSQL
- NextAuth.js for authentication (GitHub + email)
- shadcn/ui component library
Give me the exact commands to run and the folder structure.
Generate Type Definitions
Create a complete `types/index.ts` file that includes:
- All database model types (from our schema)
- All API request/response types
- All component prop types
- Utility types (pagination, API response wrapper, etc.)
Make it fully typed. No `any` allowed.
Generate Utility Functions
Write these utility functions:
1. `apiResponse<T>(data, status, message)` — standardized API response
2. `validateRequest<T>(schema, body)` — Zod validation wrapper
3. `paginate(query, page, limit)` — cursor-based pagination
4. `formatCurrency(amount, currency)` — i18n currency formatting
5. `calculateMRR(subscriptions)` — Monthly Recurring Revenue calc
6. `calculateChurn(subscriptions, period)` — Churn rate calc
Each function should be production-ready with proper error handling.
Phase 2 output: A complete project skeleton with types, utils, auth, and database — ready to build features on top of.
Phase 3: Build (60 Minutes)
This is where the magic happens. I build features one at a time, using a specific prompt pattern.
The Feature Prompt Pattern
For every feature, I use this template:
Build me the [FEATURE NAME] feature.
Context:
- Tech stack: Next.js 14, TypeScript, Prisma, TailwindCSS, shadcn/ui
- Database schema: [paste relevant models]
- API types: [paste relevant types]
Requirements:
1. [Specific requirement 1]
2. [Specific requirement 2]
3. [Specific requirement 3]
Give me:
1. The API route code (app/api/...)
2. The React component code
3. Any Prisma queries needed
4. Test cases for edge cases
Important rules:
- Use Server Components by default, Client Components only when needed
- Handle loading states and errors
- Use optimistic updates where appropriate
Example: Building the Dashboard Page
Build me the main dashboard page.
It should show:
1. Revenue chart (line chart, last 12 months) — use Recharts
2. Current MRR card with % change from last month
3. Active subscribers count
4. Churn rate card
5. Top 5 plans by revenue (horizontal bar chart)
6. Recent transactions table (last 10, with pagination)
Layout:
- Top row: 3 stat cards
Top comments (0)