Agent 製作 HTML 簡報教學

1. 準備 Agent

使用 Claude Code 或 Codex 等工具。

2. 安裝 2 個製作 PPT 的 Skill

Skill 1：frontend-slides

用來生成 HTML 格式的 PPT 簡報。

Skill 2：beautiful-html-templates

提供一批具有設計感的 HTML PPT 模板。

安裝方式

直接將以下內容發給你的 Agent，讓 Agent 全自動安裝：

幫我安裝這個 skill 和這個 HTML 模板的專案：
https://github.com/zarazhangrui/frontend-slides
https://github.com/zarazhangrui/beautiful-html-templates

3. 修改 Skill 調用模板

此步驟讓 frontend-slides 在生成 PPT 時，自動套用 beautiful-html-templates 裡的模板。

將以下內容發給你的 Agent（記得替換為你電腦上的實際路徑）：

修改一下這個 skill，生成 PPT 時使用以下路徑的模板：
/Users/yourname/Desktop/beautiful-html-templates/AGENTS.md

完成後，之後只要直接呼叫 /frontend-slides，就會自動使用 beautiful-html-templates 裡的模板。

4. 如何修改、編輯 HTML 簡報

你可以下載專用的網頁編輯工具web-editor，下載後用瀏覽器開啟即可使用（建議使用 Chrome 或 Edge）。

操作步驟：

1. 開啟編輯工具後，選擇你的 HTML PPT 所在的資料夾。

2. 進行你需要的修改。

3. 修改完成後，點擊「覆蓋原文件」儲存，或選擇「匯出新文件」另存一份。