# How to Vibe Code Your Own Decktopus (and Stop Paying for It)

> AI presentation generator and delivery platform

- Site: https://decktopus.com
- Category: Productivity
- Platforms: Web app
- Verdict: **Solid side project** (62/100 vibecodeable)
- Estimated effort: 3-4 weeks of focused building

## Verdict

You can build a solid personal subset featuring prompt-based deck generation, layout rendering, and basic export, but the automated brand scraper and real-time AI delivery coach will require tedious debugging.

Creating a personal presentation generator is entirely feasible using Next.js, Tailwind, and LLM structured outputs. However, getting HTML/CSS layouts to export cleanly into native, editable PowerPoint (.pptx) files without broken text frames or misaligned graphics is a notoriously painful engineering hurdle. Furthermore, building a real-time speech coaching loop with filler-word detection and pacing analysis requires wiring up audio streaming, transcription models, and latency optimization that will eat up several weekends.

### What you can't replicate

- The massive user scale and millions of generated decks feeding layout preferences
- Enterprise SOC 2 compliance and team-wide governance infrastructure

## What it does

An AI-native presentation creation and delivery tool that generates complete slide decks from prompts or URLs, featuring automated brand kits and an AI rehearsal coach.

### Core features

- Prompt-to-deck generation engine parsing semantic outlines into structured slides
- Dynamic layout rendering system supporting varied visual blocks and aspect ratios
- URL-based brand extractor pulling colors, fonts, and logos automatically
- AI slide editor for prompt-based modifications and iterations
- Multi-format export engine for PDF, PPTX, and PNG files
- Loop AI delivery coach for speech transcription, pacing analysis, and rehearsal feedback

## The business

### Pricing

- Monthly: $24.99/mo — Billed monthly for standard pro access.
- Annual: $9.99/mo — Billed annually at $119.88.
- Business: Custom — For teams needing brand kits and collaboration.

Founded 2019.
Team size: unknown.

## The hard parts

- Translating flat LLM text outputs into visually pleasing, non-overlapping, responsive slide component layouts
- Building high-fidelity server-side or client-side export pipelines to native editable PowerPoint (.pptx) structures
- Real-time audio processing and speech-to-text analysis for the delivery coach feature
- Robust URL scraping and color quantization engine to auto-generate usable brand kits

## How to vibe code Decktopus

### Prerequisites

- Node.js (free): Required runtime for executing the Next.js full-stack framework and build tooling.
- GitHub (free): Version control and repository hosting for your project code.
- Anthropic API Key (Pay-as-you-go): Powers structured presentation outline generation and slide content creation.

### Recommended AI tools

- Claude Code: Best-in-class terminal coding agent for scaffolding multi-file Next.js architectures, setting up API routes, and debugging layout components autonomously.
- Cursor: Ideal for fine-tuning individual React slide templates, adjusting Tailwind styling, and visually inspecting UI diffs.

### Stack

- Frontend: Next.js with Tailwind CSS
- Backend: Next.js API Routes
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: Skip (personal use)
- Other: pptxgenjs for PowerPoint export, html2canvas for thumbnail rendering, Anthropic API for slide content generation

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints with zero-config deployments.): $0/mo (Hobby tier)
- Turso (Serverless SQLite database for storing user presentations, slide JSON structures, and brand settings.): $0/mo (Free tier)

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize a Next.js project with Tailwind CSS, set up Turso with Drizzle ORM, and configure better-auth for user management.

```
Scaffold a new Next.js 16 application with TypeScript and Tailwind CSS. Set up Turso database connection using Drizzle ORM with tables for 'users', 'presentations' (id, userId, title, themeJson, createdAt), and 'slides' (id, presentationId, layoutType, contentJson, orderIndex). Implement better-auth for email/password authentication with a clean login and registration page.
```

2. **AI Presentation Generation Engine** — Build the backend service that calls the Anthropic API with structured output instructions to convert a prompt into a multi-slide presentation schema.

```
Create an API route at /api/generate-deck that accepts a presentation prompt and slide count. Use the Anthropic API with JSON mode to generate a structured array of slides, where each slide specifies a layout type (e.g., 'hero', 'split', 'bullets', 'stats'), title, body points, and optional image prompts. Store the generated presentation and its slides in Turso, then redirect the user to the editor view.
```

3. **Dynamic Slide Layout & Editing Canvas** — Develop the interactive slide editor frontend with modular layout components and real-time prompt-based editing.

```
Build a slide editor dashboard in Next.js featuring a sidebar slide navigator and a main canvas area. Create modular React layout components for 'hero', 'split', 'bullets', and 'stats' layouts that render dynamically based on slide content JSON. Add an 'Edit with AI' floating input box on each slide that sends a modification prompt to an API route, updating the specific slide's content in real-time.
```

4. **Brand Kit & URL Extractor** — Implement a brand kit feature that parses a company website URL to extract primary colors, fonts, and injects them into presentation styling.

```
Implement a Brand Kit settings page where users can input a company website URL. Create a server action that fetches the target webpage HTML, extracts the dominant theme colors from meta tags or inline styles, and saves the palette to a user_brands table. Apply these brand colors and font selections dynamically via inline CSS variables across all presentation slide components.
```

5. **Export Pipeline (PPTX & PDF)** — Integrate export capabilities allowing users to download their presentation as a PowerPoint (.pptx) file or PDF document.

```
Install 'pptxgenjs' and implement an export API endpoint or client-side handler that translates the presentation slide JSON structures into a downloadable .pptx file, mapping titles, text blocks, and background colors accurately. Also include a print-optimized CSS view and jsPDF/html2canvas integration to support clean PDF exports from the browser.
```

6. **Loop AI Delivery Coach (Rehearsal Mode)** — Build a rehearsal mode interface using browser speech recognition APIs to track pacing, word count, and provide feedback.

```
Create a presentation delivery and rehearsal view called 'Loop'. Use the browser's native SpeechRecognition API to transcribe the user's spoken rehearsal in real-time. Display a live timer, word count per minute (pacing metric), and a simple feedback summary panel evaluated via an LLM endpoint after the rehearsal ends.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name (optional): $12/yr
- AI API credits (Anthropic): ~$10
- Total: ~$22 one-time

**Ongoing costs (monthly):**

- Vercel Hobby & Turso Free Tier: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $24.99/mo
- Build time: 35-50 hours
- AI tool credits: $20 (Claude Pro)
- Break-even: Free forever (personal build)

## Sources

- [Decktopus Home Page](https://decktopus.com)
- [Decktopus Pricing Page](https://decktopus.com/pricing)
- [Decktopus About Page](https://decktopus.com/about)