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
Enter fullscreen mode
Exit fullscreen mode
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.
Enter fullscreen mode
Exit fullscreen mode
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.
Enter fullscreen mode
Exit fullscreen mode
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.
Enter fullscreen mode
Exit fullscreen mode
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.
Enter fullscreen mode
Exit fullscreen mode
Generate Utility Functions
Write these utility functions:
1. `apiResponse(data, status, message)` — standardized API response
2. `validateRequest(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.
Enter fullscreen mode
Exit fullscreen mode
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
Enter fullscreen mode
Exit fullscreen mode
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
– Middle row: Revenue chart (span 2/3), top plans chart (span 1/3)
– Bottom row: Recent transactions table (full width)
Use shadcn/ui Card, Table, and Badge components.
Enter fullscreen mode
Exit fullscreen mode
The key here is specificity. I tell Claude:
Exactly which UI components to use
The exact layout I want
The exact data sources
Vague prompts = vague output. Specific prompts = production-ready code.
Phase 4: Polish (45 Minutes)
The last phase is where good apps become great apps.
Error Handling
Go through all API routes and add:
1. Input validation with Zod
2. Proper error responses (400, 401, 403, 404, 500)
3. Error logging
4. Rate limiting considerations
Also add a global error handler for unhandled exceptions.
Enter fullscreen mode
Exit fullscreen mode
Edge Cases
For the dashboard, handle these edge cases:
1. No data yet (empty state with helpful message)
2. Very large numbers (format as K/M/B)
3. Negative growth (red indicators)
4. Stale data (show “last updated” timestamp)
5. Loading states for every async component
6. Mobile responsiveness (stack cards vertically on small screens)
Enter fullscreen mode
Exit fullscreen mode
CSS Polish
Polish the dashboard UI:
1. Add subtle animations (fade-in for cards, chart animations)
2. Consistent spacing and border radius
3. Hover effects on interactive elements
4. Loading skeletons for all data components
5. Dark mode support (use CSS variables or Tailwind dark: prefix)
Enter fullscreen mode
Exit fullscreen mode
Phase 4 output: A polished, production-ready app that handles errors gracefully and looks professional.
The Results
Using this workflow, here’s what I’ve shipped:
Project
Time
Features
Would’ve Taken (Manual)
SaaS Analytics Dashboard
3h 42m
Charts, tables, auth, CRUD
2-3 weeks
Blog Platform
4h 15m
CMS, auth, comments, SEO
1-2 weeks
E-commerce Admin
5h 10m
Inventory, orders, analytics
3-4 weeks
Task Management App
3h 55m
Kanban, real-time, teams
2 weeks
The key insight: I’m not asking Claude to build the entire app at once. I’m using it as a force multiplier in each phase, giving it clear, specific tasks.
5 Tips That Made the Biggest Difference
1. Never Ask AI to “Build an App”
Instead, ask it to build one feature at a time. “Build me a login page” works. “Build me a SaaS” doesn’t.
2. Always Generate Types First
Types are the contract between you and AI. Generate them in Phase 1, reference them in every prompt. This dramatically reduces hallucinations.
3. Use Claude Projects
Claude Projects let you attach files (schema, types, utils) that persist across conversations. This means you never have to re-paste context.
4. Review, Don’t Just Accept
AI will write code that works but might not be ideal. Always review:
Security (auth, input validation)
Performance (N+1 queries, unnecessary re-renders)
Accessibility (keyboard nav, screen readers)
5. Iterate with Specific Feedback
Instead of “this doesn’t look right,” say:
“The cards should be 1/3 width on desktop, full width on mobile”
“Add a subtle blue left border to the stat cards”
“The chart tooltip should show the exact date and amount”
Common Mistakes & How to Avoid Them
Mistake
Fix
Pasting 2000 lines of code
Share files via Claude Projects instead
“Fix this bug” with no context
Include error message, expected behavior, relevant code
Building everything at once
One feature, one prompt, one PR at a time
Ignoring AI warnings
Read every warning, investigate red flags
Not testing
Run code after every major generation, test edge cases
The Bottom Line
Claude (and AI in general) isn’t a magic wand. It’s a force multiplier that works best when you:
Plan first — Spend time on the blueprint before coding
Be specific — Detailed prompts = detailed output
Iterate fast — Small, focused tasks over big, vague ones
Review carefully — You’re the senior dev, AI is the junior
Use the right tools — Claude Projects, shadcn/ui, Prisma, etc.
With this workflow, I’ve gone from multi-week projects to multi-hour projects — without sacrificing quality.
What’s your AI coding workflow? I’d love to hear what’s working for you in the comments.
If you found this helpful, follow me for more AI developer content. I write about practical AI workflows, not hype.
Source link
