\n
\n 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 \u2014 using Claude as my co-pilot.<\/p>\n
The difference wasn’t just “using AI.” It was a specific, repeatable workflow that eliminates the bottlenecks most developers hit when coding with AI.<\/p>\n
Here’s exactly how I do it \u2014 step by step, with real prompts.<\/p>\n
The Problem: Most People Use AI Wrong<\/p>\n
I see developers making the same mistakes:<\/p>\n
\u274c Pasting entire codebases into Claude and hoping for the best
\n\u274c Using vague prompts like “build me a dashboard”
\n\u274c Not breaking down the problem before asking AI
\n\u274c Copy-pasting AI output without understanding it
\n\u274c Not using AI for the things it’s actually best at<\/p>\n
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.<\/p>\n
My 4-Hour Framework<\/p>\n
I divide every project into 4 phases of ~1 hour each:<\/p>\n
Phase
\nTime
\nWhat AI Does
\nWhat I Do<\/p>\n
1. Blueprint
\n60 min
\nGenerates architecture, tech choices
\nDefine requirements, review plan<\/p>\n
2. Scaffold
\n60 min
\nGenerates boilerplate, database schema
\nSet up repos, configure env<\/p>\n
3. Build
\n60 min
\nWrites core feature code
\nReview, test, iterate<\/p>\n
4. Polish
\n45 min
\nCSS, error handling, edge cases
\nFinal review, deploy<\/p>\n
Let me walk through each phase.<\/p>\n
Phase 1: Blueprint (60 Minutes)<\/p>\n
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.<\/p>\n
Step 1: Define the Problem<\/p>\n
I start with a clear, structured prompt:<\/p>\n
I’m building a SaaS product. Here’s what I need:<\/p>\n
Product: A subscription analytics dashboard
\nUsers: SaaS founders who want to track MRR, churn, and LTV
\nData Source: Stripe API
\nTech Stack: Next.js 14 (App Router), TypeScript, Prisma, PostgreSQL, TailwindCSS
\nTimeline: Need a working prototype today<\/p>\n
Give me:
\n1. A complete database schema with all relationships
\n2. API route structure (REST endpoints)
\n3. Component hierarchy (what pages\/components I need)
\n4. The order I should build things in (dependency graph)
\n5. Potential gotchas I might hit<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Why this works: Claude generates a concrete plan. No more “I’ll figure it out as I go.” You get a roadmap.<\/p>\n
Step 2: Generate the Database Schema<\/p>\n
Then I drill into each part:<\/p>\n
Based on the schema you generated, write:
\n1. Complete Prisma schema with all models, relations, and indexes
\n2. Seed data (at least 20 records per model) that looks realistic
\n3. Migration SQL if needed<\/p>\n
Format as a single `schema.prisma` file I can copy directly.<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Step 3: API Contract<\/p>\n
For each API route, give me:
\n1. The endpoint path and HTTP method
\n2. Request body\/params type (TypeScript interface)
\n3. Response type (TypeScript interface)
\n4. Authentication requirement
\n5. Brief description of what it does<\/p>\n
Format as a TypeScript file with all types exported.<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Phase 1 output: You now have a complete spec \u2014 database schema, API types, component list, and build order. This would take 2-3 days to produce manually.<\/p>\n
Phase 2: Scaffold (60 Minutes)<\/p>\n
Now let AI generate all the boring stuff.<\/p>\n
Generate Project Structure<\/p>\n
Set up a Next.js 14 project with:
\n– App Router (not Pages Router)
\n– TypeScript strict mode
\n– TailwindCSS with these custom colors: (your palette)
\n– Prisma with PostgreSQL
\n– NextAuth.js for authentication (GitHub + email)
\n– shadcn\/ui component library<\/p>\n
Give me the exact commands to run and the folder structure.<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Generate Type Definitions<\/p>\n
Create a complete `types\/index.ts` file that includes:
\n– All database model types (from our schema)
\n– All API request\/response types
\n– All component prop types
\n– Utility types (pagination, API response wrapper, etc.)<\/p>\n
Make it fully typed. No `any` allowed.<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Generate Utility Functions<\/p>\n
Write these utility functions:
\n1. `apiResponse(data, status, message)` \u2014 standardized API response
\n2. `validateRequest(schema, body)` \u2014 Zod validation wrapper
\n3. `paginate(query, page, limit)` \u2014 cursor-based pagination
\n4. `formatCurrency(amount, currency)` \u2014 i18n currency formatting
\n5. `calculateMRR(subscriptions)` \u2014 Monthly Recurring Revenue calc
\n6. `calculateChurn(subscriptions, period)` \u2014 Churn rate calc<\/p>\n
Each function should be production-ready with proper error handling.<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Phase 2 output: A complete project skeleton with types, utils, auth, and database \u2014 ready to build features on top of.<\/p>\n
Phase 3: Build (60 Minutes)<\/p>\n
This is where the magic happens. I build features one at a time, using a specific prompt pattern.<\/p>\n
The Feature Prompt Pattern<\/p>\n
For every feature, I use this template:<\/p>\n
Build me the (FEATURE NAME) feature.<\/p>\n
Context:
\n– Tech stack: Next.js 14, TypeScript, Prisma, TailwindCSS, shadcn\/ui
\n– Database schema: (paste relevant models)
\n– API types: (paste relevant types)<\/p>\n
Requirements:
\n1. (Specific requirement 1)
\n2. (Specific requirement 2)
\n3. (Specific requirement 3)<\/p>\n
Give me:
\n1. The API route code (app\/api\/…)
\n2. The React component code
\n3. Any Prisma queries needed
\n4. Test cases for edge cases<\/p>\n
Important rules:
\n– Use Server Components by default, Client Components only when needed
\n– Handle loading states and errors
\n– Use optimistic updates where appropriate<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Example: Building the Dashboard Page<\/p>\n
Build me the main dashboard page.<\/p>\n
It should show:
\n1. Revenue chart (line chart, last 12 months) \u2014 use Recharts
\n2. Current MRR card with % change from last month
\n3. Active subscribers count
\n4. Churn rate card
\n5. Top 5 plans by revenue (horizontal bar chart)
\n6. Recent transactions table (last 10, with pagination)<\/p>\n
Layout:
\n– Top row: 3 stat cards
\n– Middle row: Revenue chart (span 2\/3), top plans chart (span 1\/3)
\n– Bottom row: Recent transactions table (full width)<\/p>\n
Use shadcn\/ui Card, Table, and Badge components.<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
The key here is specificity. I tell Claude:<\/p>\n
Exactly which UI components to use
\nThe exact layout I want
\nThe exact data sources<\/p>\n
Vague prompts = vague output. Specific prompts = production-ready code.<\/p>\n
Phase 4: Polish (45 Minutes)<\/p>\n
The last phase is where good apps become great apps.<\/p>\n
Error Handling<\/p>\n
Go through all API routes and add:
\n1. Input validation with Zod
\n2. Proper error responses (400, 401, 403, 404, 500)
\n3. Error logging
\n4. Rate limiting considerations<\/p>\n
Also add a global error handler for unhandled exceptions.<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Edge Cases<\/p>\n
For the dashboard, handle these edge cases:
\n1. No data yet (empty state with helpful message)
\n2. Very large numbers (format as K\/M\/B)
\n3. Negative growth (red indicators)
\n4. Stale data (show “last updated” timestamp)
\n5. Loading states for every async component
\n6. Mobile responsiveness (stack cards vertically on small screens)<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
CSS Polish<\/p>\n
Polish the dashboard UI:
\n1. Add subtle animations (fade-in for cards, chart animations)
\n2. Consistent spacing and border radius
\n3. Hover effects on interactive elements
\n4. Loading skeletons for all data components
\n5. Dark mode support (use CSS variables or Tailwind dark: prefix)<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
Phase 4 output: A polished, production-ready app that handles errors gracefully and looks professional.<\/p>\n
The Results<\/p>\n
Using this workflow, here’s what I’ve shipped:<\/p>\n
Project
\nTime
\nFeatures
\nWould’ve Taken (Manual)<\/p>\n
SaaS Analytics Dashboard
\n3h 42m
\nCharts, tables, auth, CRUD
\n2-3 weeks<\/p>\n
Blog Platform
\n4h 15m
\nCMS, auth, comments, SEO
\n1-2 weeks<\/p>\n
E-commerce Admin
\n5h 10m
\nInventory, orders, analytics
\n3-4 weeks<\/p>\n
Task Management App
\n3h 55m
\nKanban, real-time, teams
\n2 weeks<\/p>\n
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.<\/p>\n
5 Tips That Made the Biggest Difference<\/p>\n
1. Never Ask AI to “Build an App”<\/p>\n
Instead, ask it to build one feature at a time. “Build me a login page” works. “Build me a SaaS” doesn’t.<\/p>\n
2. Always Generate Types First<\/p>\n
Types are the contract between you and AI. Generate them in Phase 1, reference them in every prompt. This dramatically reduces hallucinations.<\/p>\n
3. Use Claude Projects<\/p>\n
Claude Projects let you attach files (schema, types, utils) that persist across conversations. This means you never have to re-paste context.<\/p>\n
4. Review, Don’t Just Accept<\/p>\n
AI will write code that works but might not be ideal. Always review:<\/p>\n
Security (auth, input validation)
\nPerformance (N+1 queries, unnecessary re-renders)
\nAccessibility (keyboard nav, screen readers)<\/p>\n
5. Iterate with Specific Feedback<\/p>\n
Instead of “this doesn’t look right,” say:<\/p>\n
“The cards should be 1\/3 width on desktop, full width on mobile”
\n“Add a subtle blue left border to the stat cards”
\n“The chart tooltip should show the exact date and amount”<\/p>\n
Common Mistakes & How to Avoid Them<\/p>\n
Mistake
\nFix<\/p>\n
Pasting 2000 lines of code
\nShare files via Claude Projects instead<\/p>\n
“Fix this bug” with no context
\nInclude error message, expected behavior, relevant code<\/p>\n
Building everything at once
\nOne feature, one prompt, one PR at a time<\/p>\n
Ignoring AI warnings
\nRead every warning, investigate red flags<\/p>\n
Not testing
\nRun code after every major generation, test edge cases<\/p>\n
The Bottom Line<\/p>\n
Claude (and AI in general) isn’t a magic wand. It’s a force multiplier that works best when you:<\/p>\n
Plan first \u2014 Spend time on the blueprint before coding<\/p>\n
Be specific \u2014 Detailed prompts = detailed output<\/p>\n
Iterate fast \u2014 Small, focused tasks over big, vague ones<\/p>\n
Review carefully \u2014 You’re the senior dev, AI is the junior<\/p>\n
Use the right tools \u2014 Claude Projects, shadcn\/ui, Prisma, etc.<\/p>\n
With this workflow, I’ve gone from multi-week projects to multi-hour projects \u2014 without sacrificing quality.<\/p>\n
What’s your AI coding workflow? I’d love to hear what’s working for you in the comments.<\/p>\n
If you found this helpful, follow me for more AI developer content. I write about practical AI workflows, not hype.<\/p>\n