Create beautiful slide decks as shareable webpages. Use when asked to make presentations, pitch decks, or slides. Generates images with nanobanana, removes backgrounds automatically. Exports to PDF.
Create slide decks as standalone HTML files. Share as a link. Export as PDF with one click.
references/template.html — this is your starting pointWhen slides need images, use this three-step process:
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.
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
python ~/accelr8-deck-builder/scripts/generate_asset.py \
--input photo.jpg \
--output photo-clean.png \
--remove-bg
When generating images for background removal, include:
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"
Read references/template.html for the complete working template. Copy it to start a new deck.
The template includes:
Each slide is a <section class="slide slide--TYPE">:
<section class="slide slide--title">
<p class="label">Category</p>
<h1>Main Title</h1>
<p>Subtitle text</p>
</section>
<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>
<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>
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>
<section class="slide slide--quote">
<blockquote>
"Quote text here."
<cite>— Attribution</cite>
</blockquote>
</section>
<section class="slide slide--image">
<img src="hero.png" alt="Description" crossorigin="anonymous">
<figcaption>Optional caption</figcaption>
</section>
<section class="slide slide--section">
<p class="label">Part One</p>
<h2>Section Title</h2>
</section>
<section class="slide slide--code">
<h2>Example</h2>
<pre><code>const x = 1;</code></pre>
</section>
<section class="slide slide--end">
<h2>Thank You</h2>
<p>[email protected]</p>
</section>
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>
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
Read references/template.html for the complete working template.