ACCELR8 Deck Builder

Create slide decks as standalone HTML files. Share as a link. Export as PDF with one click.

Quick Start

1. Read references/template.html — this is your starting point
2. Create a new HTML file, copy the template contents
3. Add slides using the layout classes below
4. Generate images using the asset workflow
5. Open in browser to present or export

The Asset Workflow

When slides need images, use this three-step process:

1. Generate with Background Removal

python ~/accelr8-deck-builder/scripts/generate_asset.py \
  --prompt "a confident businesswoman presenting" \
  --output speaker.png \
  --remove-bg

This generates the image AND removes the background automatically.

2. Generate without Background Removal

For backgrounds, gradients, full-bleed images:

python ~/accelr8-deck-builder/scripts/generate_asset.py \
  --prompt "abstract gradient, warm orange to deep purple, minimal, 16:9" \
  --output hero-bg.png

3. Remove Background from Existing Image

python ~/accelr8-deck-builder/scripts/generate_asset.py \
  --input photo.jpg \
  --output photo-clean.png \
  --remove-bg

Prompt Guidelines for Clean Cutouts

When generating images for background removal, include:

• "isolated on white background"
• "product photography style"
• "clean edges"
• "studio lighting"

The script adds these automatically when --remove-bg is used.

Examples:

# Person for split slide
--prompt "professional man in suit, confident pose" --remove-bg

# Product shot
--prompt "modern laptop, front view, floating" --remove-bg

# Icon/object
--prompt "golden trophy, 3D render" --remove-bg

# Abstract shape (no bg removal needed)
--prompt "flowing abstract ribbons, blue and purple gradient"

Template

Read references/template.html for the complete working template. Copy it to start a new deck.

The template includes:

• All CSS styles embedded
• PDF export with progress indicator
• Presentation mode
• All slide layouts ready to use

Slide Layouts

Each slide is a <section class="slide slide--TYPE">:

Title Slide

<section class="slide slide--title">
    <p class="label">Category</p>
    <h1>Main Title</h1>
    <p>Subtitle text</p>
</section>

Content Slide

<section class="slide slide--content">
    <h2>Slide Title</h2>
    <p>Body text here.</p>
    <ul>
        <li>Point one</li>
        <li>Point two</li>
        <li>Point three</li>
    </ul>
</section>

Bullets Slide (Large)

<section class="slide slide--bullets">
    <h2>Key Points</h2>
    <ul>
        <li>First major point</li>
        <li>Second major point</li>
        <li>Third major point</li>
    </ul>
</section>

Split Slide (Text + Image)

Perfect for transparent PNGs:

<section class="slide slide--split">
    <div>
        <p class="label">Label</p>
        <h2>Title</h2>
        <p>Description text.</p>
    </div>
    <div>
        <img src="speaker.png" alt="Speaker" crossorigin="anonymous">
    </div>
</section>

Quote Slide

<section class="slide slide--quote">
    <blockquote>
        "Quote text here."
        <cite>— Attribution</cite>
    </blockquote>
</section>

Image Slide (Full Bleed)

<section class="slide slide--image">
    <img src="hero.png" alt="Description" crossorigin="anonymous">
    <figcaption>Optional caption</figcaption>
</section>

Section Divider

<section class="slide slide--section">
    <p class="label">Part One</p>
    <h2>Section Title</h2>
</section>

Code Slide

<section class="slide slide--code">
    <h2>Example</h2>
    <pre><code>const x = 1;</code></pre>
</section>

End Slide

<section class="slide slide--end">
    <h2>Thank You</h2>
    <p>contact@example.com</p>
</section>

Components

Use inside any slide:

<!-- Two columns -->
<div class="columns">
    <div>Left</div>
    <div>Right</div>
</div>

<!-- Three columns -->
<div class="columns-3">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

<!-- Card -->
<div class="card">
    <h3>Title</h3>
    <p>Content</p>
</div>

<!-- Numbered step -->
<div class="icon-row">
    <span class="badge">1</span>
    <div>
        <h3>Step</h3>
        <p>Description</p>
    </div>
</div>

Workflow Example

Creating a pitch deck:

# 1. Copy template
cp ~/accelr8-deck-builder/references/template.html ./pitch-deck.html

# 2. Generate hero background
python ~/accelr8-deck-builder/scripts/generate_asset.py \
  --prompt "abstract gradient, dark blue to purple, minimal, 16:9" \
  --output hero-bg.png

# 3. Generate team photo cutout
python ~/accelr8-deck-builder/scripts/generate_asset.py \
  --prompt "diverse startup team, casual professional, standing together" \
  --output team.png \
  --remove-bg

# 4. Generate product shot
python ~/accelr8-deck-builder/scripts/generate_asset.py \
  --prompt "modern SaaS dashboard on laptop screen, floating, 3D render" \
  --output product.png \
  --remove-bg

# 5. Edit pitch-deck.html, add slides, reference images

# 6. Open in browser, present or export PDF
open pitch-deck.html

Features

• Present button — Fullscreen mode (or press P)
• Export PDF — Downloads PDF automatically, each slide = one page
• Arrow keys — Navigate in presentation mode
• Escape — Exit presentation

Design Rules

1. One idea per slide
2. Maximum 6 bullet points
3. Use transparent PNGs for people/products on split slides
4. Full-bleed images for emotional impact
5. Section dividers every 3-4 slides
6. End with clear call to action

Requirements

• Python 3.8+
• nanobanana skill (for image generation)
• rembg (auto-installed on first use)
• GEMINI_API_KEY environment variable

Read references/template.html for the complete working template.