DEV Community

WEDGE Method Dev
WEDGE Method Dev

Posted on • Originally published at thewedgemethodai.com

I Built a Complete SaaS Product in 90 Minutes Using Claude Code — Here's the Exact Workflow

#ai #typescript #webdev #productivity

I've been building AI-powered products for the past year, and the workflow I've landed on lets me go from idea to deployed SaaS in about 90 minutes. Not a prototype — a production-ready product with Stripe payments, authentication, and a polished UI.

Here's the exact system I use.

The Stack

  • Claude Code (Anthropic's CLI) as the AI pair programmer
  • React + Vite + TypeScript for the frontend
  • Vercel for deployment (push to deploy)
  • Stripe for payments
  • Tailwind CSS for styling

The key insight: Claude Code isn't just autocomplete. It's an autonomous agent that reads your codebase, makes multi-file edits, runs builds, and fixes its own errors. You architect, it implements.

The 90-Minute Workflow

Phase 1: Architecture (10 min)

I start every build with a clear brief. Not vague — specific:

Build a SaaS landing page for [product].
Stack: React + Vite + TypeScript + Tailwind.
Pages: Landing (hero, features, pricing, FAQ), Checkout.
Payments: Stripe Checkout with 3 tiers.
Deploy: Vercel.
Enter fullscreen mode Exit fullscreen mode

Claude Code reads this, scaffolds the project structure, installs dependencies, and creates the file tree. In 10 minutes I have a working skeleton with routing, components, and types.

Phase 2: Build (40 min)

This is where the magic happens. I give Claude Code section-by-section instructions:

  1. Hero section: "Create a hero with headline, subheadline, CTA button, and social proof pill. Use the conversion hierarchy: clarity → value → trust → action."

  2. Pricing section: "3-tier pricing with annual/monthly toggle. Highlight the middle tier. Include trust badges below."

  3. Stripe integration: "Set up Stripe Checkout with the 3 price IDs. Handle success/cancel redirects."

Each instruction takes 3-5 minutes. Claude Code reads the existing code, makes the changes, builds to verify, and moves on. If the build breaks, it reads the error and fixes it automatically.

Phase 3: Polish (20 min)

  • Responsive design (mobile-first)
  • SEO meta tags, OpenGraph, JSON-LD schema
  • Security headers in vercel.json
  • Performance: lazy loading, code splitting, optimized images
  • Accessibility: semantic HTML, ARIA labels, keyboard nav

Phase 4: Ship (20 min) 

git add . && git commit -m "Initial launch"
git push origin main
# Vercel auto-deploys from push
Enter fullscreen mode Exit fullscreen mode

Then I verify: check the live URL, test Stripe checkout flow, run Lighthouse.

What Makes This Work

1. Skills files — I keep markdown files (.claude/skills/) with my exact patterns for pricing pages, Stripe integration, SEO, etc. Claude Code reads these as context, so every build follows proven patterns instead of starting from scratch.

2. MCP servers — Model Context Protocol lets Claude Code connect to external services. I have 13 MCP servers: GitHub, Stripe, databases, browser automation, documentation lookup. Claude Code can create Stripe products, check deployment status, and look up library docs without leaving the terminal.

3. Prompt caching — The Claude API caches system prompts for 5 minutes. For long build sessions, this cuts API costs by ~90% on repeated context.

4. Parallel agents — For complex builds, I launch multiple Claude Code subagents in parallel: one building the frontend, one setting up the API, one writing tests. They work simultaneously and I synthesize their output.

Real Example: AgentDesk

Last week I built AgentDesk — an AI agent management platform — using this exact workflow:

  • 3-tier SaaS pricing ($99/$349/$799 per month)
  • Annual pricing toggle with 20% discount
  • Stripe payment links for all tiers
  • Waitlist form with API endpoint
  • Full SEO with JSON-LD schemas
  • Deployed to Vercel

Total time from mkdir to live URL: 87 minutes.

The Patterns That Save the Most Time

  1. Never start from a blank page — Use skills files as templates. A pricing section that took 2 hours the first time now takes 5 minutes.

  2. Build → verify → iterate — Don't write 500 lines then build. Write 20 lines, build, fix, move on. Claude Code does this naturally.

  3. Use the cheapest model that works — Sonnet for most tasks ($3/MTok input), Opus only for complex architecture ($15/MTok). Haiku for classification ($1/MTok).

  4. Cache everything — System prompts, knowledge base content, few-shot examples. cache_control: { type: 'ephemeral' } on any content block >1024 tokens.

  5. Structured prompts with XML tags — Claude responds dramatically better to <context>, <instructions>, <output_format> tags than to free-form text.

The Cost

A typical 90-minute build session costs $3-8 in API credits. For that I get a fully deployed product with payments, SEO, responsive design, and production security.

Compare that to hiring a developer for the same scope.

Getting Started

If you want to try this workflow:

  1. Install Claude Code: npm install -g @anthropic-ai/claude-code
  2. Set your API key: export ANTHROPIC_API_KEY=your-key
  3. Start building: claude in any project directory

The learning curve is about a week to get comfortable, and another week to build up your skills files and patterns. After that, the speed compounds.

I wrote a comprehensive guide covering all of these patterns in detail — the skills system, MCP setup, prompt engineering, agent architectures, and cost optimization. It's at wedgemethod.gumroad.com/l/claude-code-mastery if you want the complete system.

Happy to answer questions about any part of this workflow in the comments.

Top comments (0)