會動的簡報,
跟 AI 一起 jam 出來
Slides that move,
jammed out with an AI

slidejam 做的簡報就是一個 HTML 檔,雙擊就能打開。真網站可以直接放進投影片,45 種效果叫名字就有。你說想要什麼,AI 幫你做出來。A slidejam deck is one HTML file you double-click. Real websites go straight into your slides, 45 effects come by name, and you tell an AI what you want.

01 · 會動01 · Motion

真網站點下去,
頁面就在投影片裡重組
Click a real website,
watch the page rebuild in your slide

給它兩個網址和「要點哪裡」,就會做出卡片長成整頁、標題飛到新位置的動畫。介紹網站時,最有說服力的就是網站本身。Give it two URLs and what to click. It captures the card growing into a page and the title flying to its new spot. When you present a website, the website itself is the best argument.

其他還有 45 種效果,每一種都有名字:Plus 45 effects, each with a name:

02 · 跟 AI 一起做02 · With an AI

說不清楚哪裡?
框起來就好
Hard to say where?
Just draw a box

按 A,在投影片上點一下或框一塊,寫下想要怎樣。複製出來的清單有頁碼、元素、精確位置,AI 不用猜「右邊那個」是哪個。Press A, click or box anything on a slide and say what you want. The copied list carries the slide, the element and exact coordinates, so the AI never has to guess which "thing on the right" you meant.

  • 看效果圖鑑挑效果,跟 AI 說「第 5 頁用 pan」就好Pick from the gallery and say "slide 5, use pan"
  • 附 Claude Code skill:先討論大綱、照圖鑑寫、做完自己截圖檢查Ships a Claude Code skill: outline first, build from the gallery, screenshot-check its own work

03 · 一個檔案03 · One file

雙擊就開,
在投影片上直接改字
Double-click to open,
edit right on the slide

不用安裝、不用開伺服器、不用 build。整個資料夾壓縮就能寄,用隨身碟也能上台。No install, no server, no build step. Zip the folder and mail it, or present from a USB stick.

按 E 直接在投影片上改字,⌘S 存回檔案。只換掉你改的那一行,其他地方一個字都不動。Press E and type on the slide; ⌘S writes it back. Only the line you changed is replaced, byte for byte.

三步開始Three steps

拿到 slidejamGet slidejam

用真網站做動畫時才需要 Playwright。Playwright is only for capturing real sites.

git clone https://github.com/cooldongdong/slidejam
cd slidejam && npm install

開一份新簡報Start a deck

做出一個資料夾,用 Chrome 打開 index.html。Makes a folder; open its index.html in Chrome.

node tools/new-deck.mjs ~/talks/my-talk

跟 AI 說要什麼Tell the AI

叫效果的名字,或貼上按 A 標好的清單。Name an effect, or paste a list marked with A.

「封面標題用 letters,第 3 頁做一頁 bento」"Use letters on the title, make slide 3 a bento"

使用流程:跟 AI 從零做到上台・完整說明:中文使用說明・READMEWorkflow: from zero to stage with an AI · Full docs: README · user guide (Chinese)