SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillshtml-slide-builder

html-slide-builder

Frontend & websites

View repository

Updated 10-16 00:20

About this skill

HTML Smart Presentation Generator

Teaching material → Analyze → Confirm outline → Generate Reveal.js presentation → Enhance (background images/icons/interactivity/visualization) → Deploy to GitHub Pages

0. Read teaching material

Accept any form of input:

  • Text / Markdown: Analyze directly
  • PDF: Read with the Read tool (if there are multiple pages, read the summary page first)
  • Spoken topic: Design it yourself based on standard teaching logic (introduction → concepts → examples → interaction → conclusion)

If the teaching material lacks information, do not ask; supplement it directly using standard teaching conventions.

1. Analyze the outline and wait for user confirmation

After analysis is complete, output the outline table,and continue only after the user confirms：

## 📋 簡報大綱草稿（共 N 頁）

| 頁碼 | 標題 | 內容摘要 | 功能標記 |
|------|------|----------|----------|
| 1    | 封面 | 課程名稱、講師 | [BG] |
| 2    | 破冰提問 | 文字雲收集學員想法 | [INTERACT:wordcloud] |
| 3    | 三大重點 | 並列說明三個核心概念 | [ICON] |
| 4    | 前後對比 | A 方案 vs B 方案演進 | [VIZ] |
...

**功能標記說明**
- [BG] 背景底圖（draw 技能，暗色風格）
- [ICON] 扁平化圖標（draw + PIL 去背）
- [INTERACT:wordcloud] Firebase 即時文字雲
- [INTERACT:poll] Firebase 單選投票
- [VIZ] 滑桿視覺化演示（clip-path）

請確認大綱，或說明要調整的地方。

Decision principles for feature tags

Tag Trigger condition Target quantity per presentation
[BG] Cover, back cover, section transitions, high-impact conclusions 3–5 pages
[ICON] Pages with 3–6 parallel items (pros and cons, steps, characteristics) 1–3 pages
[INTERACT:wordcloud] Opening icebreaker, prior knowledge survey, end-of-class reflection 1 page (usually page 2)
[INTERACT:poll] Concept checks, opinion polls, pre-test/post-test 0–1 page
[VIZ] "Before-and-after comparison," "format conversion," "evolution from A to B" 0–1 page

2. Create the project directory and base HTML

After user confirmation:

  1. Create the project directory:<當前工作目錄>/<簡報英文短名>/
  2. Create the images/ subdirectory
  3. Generate index.html(complete Reveal.js skeleton)

Read references/reveal-template.md to obtain: complete CSS variables, component styles, and Reveal.js initialization code.

Naming rules:

  • Project directory: kebab-case English (ai-course、math-lesson）
  • Firestore collection:<slug>_wordcloud、<slug>_poll(to avoid mixing data from different presentations)

Color palette (used consistently across all presentations):

--accent:  #e8643a   橘紅（主強調）
--accent2: #4fc3f7   青（次強調）
--success: #81c784   綠（正面）
--warn:    #ffb74d   琥珀（提示）
背景：     #0d1117 ~ #1a1a2e（深暗色）

3. Generate background images [BG]

Call the draw skill for each [BG] page; this can be executed in parallel:

python "{{DRAW_SKILL_PATH}}" \
  "<底圖 prompt>" \
  --size 1536x1024 --quality low \
  --name <slide-slug> \
  --outdir "<專案目錄>/images"

{{DRAW_SKILL_PATH}} During installation, install.py automatically replaces it with the actual path to draw.py.

Background image prompt design principles:

  • Dark color scheme (deep navy, dark space, #0d1117 background)
  • No text
  • Related to the slide topic but abstract (concept visualization, not literal icons)
  • Neon/glow effects, matching the theme color
  • Example: AI course cover → "deep navy background, glowing neural network nodes and light trails, cinematic wide, no text, abstract tech art"

Add to the HTML section:

<section data-background-image="images/<slug>.png"
         data-background-opacity="0.3"
         data-background-size="cover">

Opacity recommendations: cover 0.3–0.4; regular pages 0.12–0.18.

4. Icon system [ICON]

4-1 Generate the icon master list (generate all icons needed for all pages at once)

python "{{DRAW_SKILL_PATH}}" \
  "A clean icon sheet with exactly N flat neon icons in a single horizontal row on pure dark navy (#0d1117) background. [逐一描述每個圖標，從左到右]. Each icon large, bold, centered in equal column, no text." \
  --size 1536x1024 --quality low \
  --name icon_sheet \
  --outdir "<專案目錄>/images"

Use the Read tool to first confirm the quality of the icon master list, then crop.

4-2 Crop + remove background

Execute (copy scripts/remove_bg.py to the project directory, or use inline Python):

from PIL import Image
from pathlib import Path

img = Image.open("images/icon_sheet.png").convert("RGBA")
w, h = img.size
n = <圖標數量>
icons = ["icon_a", "icon_b", ...]  # 對應名稱

for i, name in enumerate(icons):
    x0 = i * (w // n)
    x1 = (i + 1) * (w // n) if i < n-1 else w
    col_w = x1 - x0
    sq = min(col_w, h)
    cx, cy = x0 + col_w // 2, h // 2
    crop = img.crop((cx-sq//2, cy-sq//2, cx+sq//2, cy+sq//2))
    crop = crop.resize((256, 256), Image.LANCZOS)
    crop.save(f"images/{name}.png")

Then perform background removal (scripts/remove_bg.py）。

4-3 Embed HTML

  • Use <img src="images/icon_name.png"> to replace emoji
  • adv-card uniformly uses border-top: 4px solid var(--accent2) + text-align: center
  • icon img plus filter: drop-shadow(0 0 10px rgba(79,195,247,0.6))

5. Interactive Components [INTERACT]

See references/firebase-config.mdfor complete word cloud and voting HTML code snippets.

General principles:

  • Add to interactive section id="slide-<slug>"
  • Use Reveal.on('slidechanged', e => { if (e.currentSlide?.id === '...') { /* 重繪 */ }}) to ensure correct rendering after page transitions
  • Firestore collection:<簡報slug>_wordcloud / <簡報slug>_poll(each presentation has its own independent collection)
  • Style: match the dark theme, input box background: rgba(255,255,255,0.08)

6. Visualization Demonstration [VIZ]

clip-path slider reveal effect, suitable for "format conversion", "before-and-after comparison", and "A→B evolution".

Core CSS/JS logic:

<div style="position:relative; height:390px; border-radius:12px; overflow:hidden;">
  <div id="viz-before" style="position:absolute;inset:0;..."></div>
  <div id="viz-after" style="position:absolute;inset:0;clip-path:inset(0 100% 0 0);"></div>
  <div id="viz-divider" style="position:absolute;top:0;left:0;width:3px;height:100%;
    background:linear-gradient(to bottom,transparent,#4fc3f7,transparent);
    box-shadow:0 0 12px #4fc3f7;pointer-events:none;"></div>
</div>
<input id="viz-slider" type="range" min="0" max="100" value="0">
<script>
document.getElementById('viz-slider').addEventListener('input', function() {
  const v = +this.value;
  document.getElementById('viz-after').style.clipPath = `inset(0 ${100-v}% 0 0)`;
  document.getElementById('viz-divider').style.left = v + '%';
});
</script>

Add labels on the left and right (position:absolute; top:8px), and use JS to fade out when approaching the boundary.

7. Deploy to GitHub Pages

cd "<專案目錄>"
git init
git config user.email "<你的 GitHub email>"
git config user.name "<你的 GitHub 帳號>"
git add .
git commit -m "初始化：<簡報名稱>"
gh repo create <帳號>/<repo-name> --public --source=. --push \
  --description "<簡報一句話描述>"
# 用實際分支名開 Pages（新版 git 預設 main、舊版 master），避免寫死失敗
BRANCH=$(git rev-parse --abbrev-ref HEAD)
gh api repos/<帳號>/<repo-name>/pages \
  --method POST -f "source[branch]=$BRANCH" -f "source[path]=/"

Return to the user:

✅ 簡報已部署！
🔗 GitHub Pages：https://<帳號>.github.io/<repo-name>/
（首次約 1–3 分鐘生效）
📦 原始碼：https://github.com/<帳號>/<repo-name>

Execution order and parallelization suggestions

Phase 0: 讀取教材
Phase 1: 輸出大綱 → 等待確認 ← 必須停在這裡
Phase 2: 生成 HTML 骨架
Phase 3+4+5: 可平行（底圖生成 + 圖標生成同時跑）
Phase 6: VIZ 寫入 HTML
Phase 7: 確認一切完成後才 push

Reference resources

File Purpose
references/reveal-template.md Complete Reveal.js HTML template, CSS component library
references/firebase-config.md Complete code snippets for word cloud and voting
scripts/remove_bg.py PIL icon background removal script (run on images/icon_*.png)