>

從一句話，到上台。From one line to the stage.

在 Claude Code 打 /slidejam，接下來的路它會帶著你走：問你、列大綱、等你說可以、做出來、陪你改到上台。Type /slidejam in Claude Code and it walks you the rest of the way: asks, outlines, waits for your go, builds, and revises with you until you present.

往下捲Scroll ↓

準備，只要一次Setup, once

三行指令Three lines

拿到 slidejam、裝好截網站畫面用的瀏覽器、把 skill 接進 Claude Code。之後在任何資料夾都能叫它。Get slidejam, install the browser it captures sites with, and plug the skill into Claude Code. Then call it from any folder.

沒有 Claude Code？打開效果圖鑑挑效果，把按 A 標好的清單貼給任何 AI 也行。需要 Chrome 和 Node.js 22.23 以上。No Claude Code? Pick from the effects and paste lists marked with A into any AI. Needs Chrome and Node.js 22.23+.

1
拿到 slidejamget slidejamgit clone https://github.com/cooldongdong/slidejam && cd slidejam
2
截真網站畫面用的瀏覽器a browser for capturing sitesnpm install && npx playwright install chromium-headless-shell
3
接進 Claude Codeplug into Claude Codeln -s "$PWD/skill" ~/.claude/skills/slidejam

六個步驟Six steps

看一場真的對話Watch a real session

往下捲，左邊會重演一次：AI 每則訊息都標出走到第幾步，資料夾一步步長出來。第 2 步之後要你說「可以動工」，它才會開始建檔。Scroll and it replays on the left: every message names its step and the folder grows. Nothing is created until you say go after step 2.

  1. 0

    呼叫 /slidejamCall /slidejam

    AI

    先問你要開新的，還是繼續某個資料夾。貼了標註清單，就直接從清單裡的路徑接著做。Asks: a new deck or an existing folder? A pasted annotation list carries its own path.

    你You

    在 Claude Code 輸入 /slidejam，或直接說「做簡報」。Type /slidejam in Claude Code, or just say "make me a deck".

    /slidejam/slidejam

    （步驟 0）開一份新的，還是繼續某個資料夾的簡報？(step 0) A new deck, or carry on with a folder?

    新的，介紹 civictech.tw 的建置成果New — what we built on civictech.tw

  2. 1

    開場五問Five questions

    AI

    一次問完：講什麼、講給誰、講多久、要秀哪些網站、你有幾小時。Asks all five at once: topic, audience, length, sites to show, hours you have.

    你You

    回答。時間少，第一版就做精簡一點。Answer. Little time means a leaner first version.

    （步驟 1／6）先問五件事： 1. 最想讓台下記住哪一句？ 2. 聽眾是誰？ 3. 講幾分鐘？ 4. 要秀哪些網站？ 5. 你有幾小時？(step 1/6) Five questions first: 1. The one line they should remember? 2. Audience? 3. Minutes? 4. Sites to show? 5. Hours you have?

    活動參與者，20 分鐘，秀 civictech.tw，我有一個半小時Event attendees, 20 min, civictech.tw, I have 90 minutes

  3. 2

    大綱Outline要你說「可以動工」needs your go

    AI

    每頁一句話，標出用哪個效果、需要哪些截圖。One line per slide, with the effect by name and the screenshots it needs.

    你You

    刪、改、換順序，滿意了說「可以動工」。Cut, reword, reorder; say go when it's right.

    （步驟 2／6）大綱，12 頁： 1 開場　　　　letters 2 四個痛點　　bento 3 找得到　　　morph（用 civictech.tw 做） … 可以動工嗎？(step 2/6) Outline, 12 slides: 1 opening letters 2 four pains bento 3 findable morph (capture civictech.tw) … Go?

    第 5 頁拿掉，可以動工Drop slide 5 — go

  4. 3

    建檔Set up

    AI

    開資料夾、截圖、做頁面重組動畫。Makes the folder, takes screenshots, captures morphs.

    你You

    等。網站要登入的話，AI 會請你幫忙。Wait. If a site needs a login, the AI asks.

    Bash(node tools/new-deck.mjs ~/talks/civictech)Bash(node tools/new-deck.mjs ~/talks/civictech)⎿ ✓ new deck at ~/talks/civictech

    Bash(node tools/capture-morph.mjs morph.config.mjs)Bash(node tools/capture-morph.mjs morph.config.mjs)⎿ ✓ media/morph-project (2 pairs, 3 rows)

    （步驟 3／6）資料夾開好了，截了 6 張圖、做了 1 段 morph。(step 3/6) Folder ready: 6 screenshots and 1 morph.

  5. 4

    第一版First version

    AI

    做完全部頁面和講稿，自己截圖檢查，告訴你哪裡不確定。Writes every slide and the notes, checks its own screenshots, says what it's unsure of.

    你You

    用 Chrome 打開，從頭播一次。Open it in Chrome and play it through.

    Bash(node tools/shoot.mjs ~/talks/civictech/index.html --sheet)Bash(node tools/shoot.mjs ~/talks/civictech/index.html --sheet)⎿ ✓ 12 slide(s) → .shots

    Read(.shots/sheet.png)Read(.shots/sheet.png)⎿ Read image

    （步驟 4／6）12 頁做好了，打開 ~/talks/civictech/index.html。 不確定：第 7 頁的數字是去年的。 字按 E 自己改；效果按 A 標起來貼給我。(step 4/6) 12 slides done — open ~/talks/civictech/index.html. Unsure: slide 7's numbers are last year's. Fix words with E; mark effects with A and paste.

  6. 5

    來回修Rounds of changes

    AI

    一則一則處理，只重新截圖改到的頁，逐項回報。Handles each item, re-shoots only what changed, reports item by item.

    你You

    字按 E 自己改；效果、版面按 A 點或框，貼清單。Words: E. Effects and layout: A, then paste the list.

    1. 第 12 頁〈找得到〉 框住：元素內 9.6 18.9 24 7.7 想要：聚光燈打在標題上1. slide 12 (findable) box: 9.6 18.9 24 7.7 want: spotlight on the title

    Edit(index.html)Edit(index.html)⎿ Updated with 1 change

    （步驟 5／6）第 12 頁加了 spot，框在標題。截圖如下。(step 5/6) Slide 12 now has a spot on the title. Screenshot below.

  7. 6

    上台前Before the talk

    AI

    陪你跑檢查清單：網路、字型、講者視窗、全螢幕、空白頁。Runs the checklist: network, fonts, presenter view, full screen, blank slides.

    你You

    按 P 開講者視窗，排練一次。Press P for the presenter view and rehearse.

    （步驟 6／6）第 4 頁的地圖要網路。場地沒 Wi-Fi 的話，先換成截圖？(step 6/6) Slide 4's map needs a network. Swap in a screenshot in case there's no Wi-Fi?

    好，換Yes, swap it

    Bash(node tools/shoot.mjs index.html 4)Bash(node tools/shoot.mjs index.html 4)⎿ ✓ media/map.png

~/talks — claude
>輸入訊息…Message…

不只一份More than one

每份簡報，一個資料夾One folder per deck

開第二份A second deck

再打一次 /slidejam，選「開新的」。各自有一份引擎，互不影響。Type /slidejam again and choose new. Each has its own engine; they never touch.

隔天接著做Tomorrow

說「繼續做 ~/talks/misheng」，或直接貼標註清單，清單裡有路徑，它會自己找到。Say "carry on with ~/talks/misheng", or paste an annotation list; its path says which deck.

有新效果了New effects

git pull 之後跑一次 new-deck.mjs ~/talks/x --update，只換引擎，投影片不動。git pull, then new-deck.mjs ~/talks/x --update: only the engine changes.

在簡報裡Inside a deck

按按看Press one

點下面的鍵，或直接按鍵盤。跟其他工具撞鍵的話，在簡報裡按 ? 就能換。Click a key below or press it on your keyboard. If one clashes with another tool, press ? in a deck to change it.

G

效果放在哪Where effects live

一個效果，一個檔案One effect, one file

JS 和樣式都在同一個檔。簡報只載入自己用到的效果。圖鑑裡沒有你要的？描述給 AI，它會加一個新檔、在圖鑑加一頁示範，下次就能叫名字。Script and styles in one file, and a deck loads only what it uses. Missing one? Describe it; the AI adds a file and a gallery slide, and next time you call it by name.

看全部效果 →See every effect →
deck/
  deck.js      # 翻頁、總覽、E、A、P
  deck.css
  themes/      # default · warm · night · mono
  fx/
    _lib.js    # 共用小工具
    bento.js
    morph.js
    map.js
    particles.js
    …          # 每種效果一個檔

準備好了就打Ready? Type