Back to Details

accelr8-deck-builder

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

ACCELR8 Deck Builder

ACCELR8 幻灯片构建工具

Create slide decks as standalone HTML files. Share as a link. Export as PDF with one click.
将幻灯片创建为独立的HTML文件。可通过链接分享，一键导出为PDF。

Quick Start

快速开始

  1. Create a new HTML file using the template below
  2. Add slides using the layout classes
  3. Generate images with nanobanana if needed
  4. Open in browser to present or export
  1. 使用下方模板创建新的HTML文件
  2. 使用布局类添加幻灯片
  3. 如有需要，通过nanobanana生成图片
  4. 在浏览器中打开以进行演示或导出

Template

模板

Every deck starts with this structure. Copy it exactly:
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DECK TITLE HERE</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <div class="deck" id="deck">
        <!-- SLIDES GO HERE -->
    </div>
    <div class="controls">
        <button class="btn-secondary" onclick="present()">Present (P)</button>
        <button class="btn-primary" id="exportBtn" onclick="exportPDF()">Export PDF</button>
    </div>
    <div class="export-progress" id="exportProgress">
        <p id="exportStatus">Exporting slides...</p>
        <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
    </div>
</body>
</html>
The full template with all CSS and JS is in 
references/template.html
. Copy that file to start a new deck.
每个幻灯片都从以下结构开始。请完全复制：
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DECK TITLE HERE</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <div class="deck" id="deck">
        <!-- SLIDES GO HERE -->
    </div>
    <div class="controls">
        <button class="btn-secondary" onclick="present()">Present (P)</button>
        <button class="btn-primary" id="exportBtn" onclick="exportPDF()">Export PDF</button>
    </div>
    <div class="export-progress" id="exportProgress">
        <p id="exportStatus">Exporting slides...</p>
        <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
    </div>
</body>
</html>
包含所有CSS和JS的完整模板位于
references/template.html
。复制该文件即可开始创建新幻灯片。

Slide Layouts

幻灯片布局

Each slide is a 
<section class="slide slide--TYPE">
. Available types:
每张幻灯片是一个
<section class="slide slide--TYPE">
。可用类型如下：

Title Slide

标题幻灯片

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

Content Slide

内容幻灯片

html
<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>
html
<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)

大项目符号幻灯片

html
<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>
html
<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)

拆分幻灯片（文本+图片）

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

Quote Slide

引用幻灯片

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

Image Slide (Full Bleed)

全屏图片幻灯片

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

Section Divider

章节分隔幻灯片

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

Code Slide

代码幻灯片

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

End Slide

结束幻灯片

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

Components

组件

Use inside any slide:
html
<!-- 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>
可在任意幻灯片中使用：
html
<!-- 两列布局 -->
<div class="columns">
    <div>Left</div>
    <div>Right</div>
</div>

<!-- 三列布局 -->
<div class="columns-3">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

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

<!-- 带编号的步骤 -->
<div class="icon-row">
    <span class="badge">1</span>
    <div>
        <h3>Step</h3>
        <p>Description</p>
    </div>
</div>

Generating Images

生成图片

Use nanobanana when slides need images:
bash
uv run ~/.codex/skills/nano-banana-pro/scripts/generate_image.py \
  --prompt "abstract gradient, warm orange to purple, minimal, 16:9 aspect ratio" \
  --filename "hero.png" \
  --resolution 2K
Prompt tips:
  • Always include "16:9 aspect ratio" for slide images
  • Add "minimal, professional" for business decks
  • Be specific: "warm", "corporate", "energetic", "calm"
当幻灯片需要图片时，使用nanobanana：
bash
uv run ~/.codex/skills/nano-banana-pro/scripts/generate_image.py \
  --prompt "abstract gradient, warm orange to purple, minimal, 16:9 aspect ratio" \
  --filename "hero.png" \
  --resolution 2K
提示技巧：
  • 幻灯片图片请始终包含“16:9 aspect ratio”（16:9宽高比）
  • 商务幻灯片添加“minimal, professional”（简约、专业）
  • 描述要具体：“warm”（温暖）、“corporate”（企业风）、“energetic”（活力）、“calm”（沉稳）

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
  • 演示按钮 — 全屏模式（或按P键）
  • 导出PDF — 自动下载PDF，每张幻灯片对应一页
  • 方向键 — 在演示模式下导航
  • ESC键 — 退出演示

Design Rules

设计规则

  1. One idea per slide
  2. Maximum 6 bullet points
  3. Images for emotion, text for information
  4. Section dividers every 3-4 slides
  5. End with clear call to action
  1. 每张幻灯片一个核心观点
  2. 最多6个项目符号
  3. 图片传递情感，文字传递信息
  4. 每3-4张幻灯片添加章节分隔
  5. 结尾明确行动号召

Sharing

分享方式

The deck is a static HTML file. Share by:
  • Hosting anywhere (Vercel, Netlify, GitHub Pages)
  • Sending the file directly
  • Dropping in shared folder
Read 
references/template.html
for the complete working template with all styles and scripts.
幻灯片是静态HTML文件，可通过以下方式分享：
  • 托管在任意平台（Vercel、Netlify、GitHub Pages）
  • 直接发送文件
  • 放入共享文件夹
查看
references/template.html
获取包含所有样式和脚本的完整可用模板。