How We Built a 25+ Theme AI SaaS with Vibe Coding: The Open-Source Playbook

Building a complex web application used to take months of painstaking boilerplate writing, state management setup, and repetitive styling. Today, with the rise of AI coding agents like Cursor, Antigravity, Claude Code, and Windsurf, developers can build full-stack web applications in a fraction of the time. This workflow has come to be known as "Vibe Coding".

However, there is a catch. Without strict boundaries, vibe coding quickly degenerates into an infinite debugging loop. You ask the AI to add a feature, it breaks an existing component, you ask it to fix the bug, it patches the symptom with a silent try-catch, and three iterations later your codebase becomes unmaintainable.

In this guide, we reveal the exact engineering methodology, architecture rules, and production safeguards we used to build PPT Maker (Student Suite) — a production SaaS featuring 25+ AI presentation themes, a complete resume builder, and PDF conversion tools. We have also open-sourced our complete methodology in the official Vibe Coding Playbook on GitHub.

The Root Problem: The Infinite Debugging Loop

When developers first use AI coding assistants, they tend to give broad, open-ended prompts like "Build a presentation generator app for me." The AI responds with impressive visual code, but as soon as state edge cases arise, the structure breaks down:

To break this loop, you must shift your mindset: AI is the implementation engine, but you are the Chief Software Architect. The AI does not own the project structure — you do.

Core Architecture: The Theme Triad Pattern

In PPT Maker, one of our biggest challenges was ensuring that presentation slide data rendered identically in the browser preview and exported seamlessly into downloadable .pptx files. If the AI changed the data structure in the prompt engine without updating the exporter, downloads broke.

To solve this, we established The Theme Triad architecture pattern across all 25+ presentation themes:

• 1. AI Prompt Engine (gemini{Theme}.ts): Builds the structured prompt, queries Gemini AI, and validates the response JSON schema.
• 2. Slide Renderer ({Theme}SlideRenderer.tsx): React component responsible for rendering responsive browser previews with smooth motion animations.
• 3. PPTX Exporter (ppt{Theme}.ts): Generates the pixel-perfect downloadable PowerPoint file using pptxgenjs.

By locking this triad structure into our project's system rules, whenever a theme needed a modification, the AI was forced to update all three triad files simultaneously. This eliminated broken exports across our entire theme catalog.

Resilience at Scale: Gemini API Key Rotation

During high-traffic periods, single API keys hit rate limits (HTTP 429) or encounter Vercel serverless function timeouts (HTTP 504). Rather than paying for inflated serverless limits, we built a multi-key rotation system on our Node.js/Express backend.

When a request is sent to our proxy endpoints, the server attempts execution using Key 1. If Gemini returns a rate limit or timeout, the rotation system instantly logs the failure, switches to Key 2, and streams the chunked response directly to the browser. The client never experiences a crash, and API key secrets remain safely on the server side — never exposed in browser bundles.

Production Safeguards: Telemetry & Alert Filtering

When building with AI tools, telemetry and error tracking are essential. We configured automated Telegram alerts to notify us whenever an API endpoint or internal utility threw an unhandled exception.

However, we quickly encountered alert spam. When guest users uploaded corrupted .docx files or non-zip archives into our document conversion tools, internal libraries like JSZip threw raw errors ("Can't find end of central directory"). The AI's initial instinct was to log every failure as a critical system alert.

We corrected this by implementing strict regular expression filters in our telemetry layer (toolTelemetry.ts). User input errors, network aborts, and corrupted file uploads were routed to friendly UI fallbacks, reserving Telegram notifications strictly for actionable backend failures.

Introducing the Open-Source Vibe Coding Playbook

To help developers, students, and indie hackers build production-grade applications with AI agents, we have compiled our complete set of rules, prompts, and debugging protocols into an open-source repository:

Summary Checklist for Vibe Coding SaaS Apps

1. Copy AGENTS.md: Add clear system rules to your project root before launching your first prompt session.
2. Isolate API Keys: Never put Gemini or OpenAI API keys in frontend environment variables. Proxy all AI calls through server routes.
3. Test Exports Directly: Don't rely solely on browser previews. Open exported .pptx or .pdf files in real viewers.
4. Use Internal AI Tools: Try our AI PPT Generator, Resume Builder, or ATS Resume Checker to see these vibe coding principles live in action.

By treating AI as an execution partner while maintaining strict architectural ownership, you can build and ship world-class software at speeds previously unimaginable. Happy vibe coding!