讀書報告
製作手冊
我們的讀書報告(上台簡報、詳細版網頁、Critical Form)都是用 Claude Code 做的。這份手冊整理了完整做法,你可以依需求選擇要做到哪一步。
01先看成品
EXAMPLES每份都有三個頁面:入口頁、上台版簡報(方向鍵翻頁)、詳細版(可以切換「報告內容」和「Critical Form」)。按 E 可以直接在網頁上改字。
02它是怎麼運作的
HOW IT WORKS你準備的
章節 PDF(掃描版也可以)+ Critical Form(Word 檔)+報告人名單
AI 照著說明書做
frontend-slides 負責挑風格、做投影片;chapter-report 負責整套流程和詳細版
你拿到的
上台版簡報、詳細版網頁、入口頁;想要的話再放上網路
Skill 就是「給 AI 看的說明書加範本」。裝好之後跟 Claude 說要用它,Claude 就會照同一套步驟做,不用每次從頭交代。
03選擇你要做到哪一步
PICK A LEVEL| 等級 | 你會得到 | 需要準備 |
|---|---|---|
| Lv.1 只要簡報 | 上台版網頁簡報 | 裝 frontend-slides |
| Lv.2 跟我們一樣 | 簡報+詳細版+Critical Form+入口頁 | 再裝 chapter-report |
| Lv.3 上線+共編 | 公開網址,組員可以直接在網頁上改字 | 免費的 Cloudflare 帳號(進階,可跳過) |
04Lv.1 只要簡報
FRONTEND-SLIDES- 安裝 frontend-slides(只要做一次)
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides
原作者 GitHub:github.com/zarazhangrui/frontend-slides
- 開一個新的 Claude Code 對話,把章節 PDF 拖進去,然後說:
用 frontend-slides 幫我把這一章做成 10 分鐘的上台簡報。 內容要包含:作者想回答的問題、用了哪些例子、結論、對設計研究的啟發、放到台灣是否成立,最後留一個問題給全班討論。
- 挑風格:Claude 會做 3 個封面預覽讓你選,不用先想好要什麼風格,看了再挑就好。
- 拿到簡報:一個 HTML 檔,用瀏覽器打開,方向鍵翻頁。
05Lv.2 跟我們一樣的整套
CHAPTER-REPORT- 先完成 Lv.1 的安裝,再安裝 chapter-report:
git clone https://github.com/cynth1a97/chapter-report.git ~/.claude/skills/chapter-report
- 準備三樣東西
- 章節 PDF
- Critical Form(Word 檔,沒有也可以)
- 報告人的學號和姓名
- 開新對話,把 PDF 和 Word 檔拖進去,然後說:
用 chapter-report 幫我做這一章的讀書報告。 報告人:〔學號〕〔姓名〕、〔學號〕〔姓名〕、〔學號〕〔姓名〕 報告時間大約 10 分鐘
- Claude 會依序:讀完整章 → 規劃大綱 → 給你 3 個風格挑 → 做出簡報、詳細版、入口頁 → 逐頁檢查有沒有跑版。
詳細版是一頁式網頁,手機也能看。上方有兩個分頁:「報告內容」是簡報的完整版,「Critical Form」是你 Word 檔的內容。
06Lv.3 放上網路、組員一起改
CLOUDFLARE PAGES- 註冊 Cloudflare:到 dash.cloudflare.com/sign-up 申請免費帳號。
- 做完 Lv.2 之後,跟 Claude 說:
Claude 會在終端機執行登入指令,瀏覽器跳出授權頁時按 Allow。登入要你自己完成,Claude 不會經手你的帳號密碼。
幫我部署到 Cloudflare Pages,並開啟線上編輯
- 拿到網址,例如 https://你的專案名.pages.dev,傳給組員和老師就能看。
線上編輯怎麼用
- 簡報:按 E(或滑鼠移到左上角點 EDIT);詳細版:點上方的「編輯」
- 直接點文字修改,停手 5 秒或點到別的地方就會自動存檔,所有人重新整理就會看到
- 按 Esc 離開編輯
- 修改次數不限;每個人每段編輯會自動留一份備份(保留最近 30 份),被改壞了可以請 Claude 還原
注意:任何拿到網址的人都能改。如果不想這樣,可以請 Claude 加上編輯密碼。
07常見問題
FAQPDF 是掃描的、選不到字,可以嗎?
可以。chapter-report 會把每一頁轉成圖片,讓 Claude 一頁一頁看圖讀內容,直書的中文也讀得懂。
只裝 frontend-slides 能做出一樣的東西嗎?
只能做出上台版簡報。詳細版、Critical Form 分頁、入口頁、回首頁按鈕和線上編輯,都是 chapter-report 加上去的。
不用 Claude Code,用其他 AI 可以嗎?
能讀寫電腦檔案的 AI 工具(例如 Codex)可以叫它讀 chapter-report 的 SKILL.md 照著做;網頁版聊天機器人沒辦法直接產生、儲存檔案,比較不適合。
要花錢嗎?
frontend-slides、chapter-report、Cloudflare Pages 都免費,只需要你原本的 Claude 方案。
可以改成 PowerPoint 嗎?
這套產出的是網頁。需要 PDF 的話可以請 Claude 匯出;需要可編輯的 PowerPoint,建議另外請 Claude 用 pptx 做。