frontend-slides 是什麼、怎麼安裝使用：讓 Claude Code 做網頁幻燈片的 Skill（先看三種風格預覽再生成，可轉換 PPT）

本文根據 zarazhangrui/frontend-slides 倉庫 README 與 Claude Code 官方文檔整理，資料核對於 2026-10-11。

是什麼

Frontend Slides 是 Zara Zhang（GitHub 用戶名 zarazhangrui）開源的一個做網頁幻燈片的技能，面向不懂 CSS 和 JavaScript 的非設計師。它的核心想法是「給你看，而不是讓你說」：多數人講不清自己想要什麼風格，所以它不讓你用文字描述審美，而是先生成幾個視覺預覽，你挑喜歡的。

成品是零依賴的單個 HTML 文件，CSS 和 JS 都內聯，不需要 npm、構建工具或框架，固定 16:9，代碼帶註釋方便自己改。README 把「反 AI 味」當成賣點之一：內置的風格刻意避開白底紫色漸變那類一眼能認出的 AI 審美。

截至 2026-10-11，GitHub 顯示該倉庫約 3.0 萬 Star、2361 Fork，最近一次推送在 2026-06-23。

包含哪些 Skill

一個技能，兩種主要用法，外加一組風格：

• 新建演示：詢問內容 → 生成 3 個風格預覽 → 你選方向 → 生成完整幻燈片並在瀏覽器裏打開；
• 轉換 PowerPoint：提取 PPT 裏的文字、圖片和備註 → 給你確認 → 選風格 → 生成帶原有素材的 HTML 版；
• 內置風格：分深色、淺色和特別款幾組；另有可選的「Bold Template Pack」，收了一批更大膽的模板，按需加載，預設仍回落到穩妥的預設。

README 的 Requirements 還提到兩項可選能力：部署成可分享的網址（需要 Node.js 和 Vercel 帳號）和導出 PDF（需要 Node.js，Playwright 會自動安裝）。

怎麼安裝

Claude Code。README 特別叮囑兩條命令要分兩次發送，不要一起粘貼：

text
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides

完成後再輸入：

text
/plugin install frontend-slides@frontend-slides

README 建議用完整的 HTTPS 地址——簡寫的 zarazhangrui/frontend-slides 可能讓 Claude Code 走 SSH，沒配置過會失敗。

手動安裝：

bash
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

其他智能體（Codex、Kimi Code、OpenCode、Gemini CLI 等）：把倉庫連結發給它，讓它從 SKILL.md 讀起，按需加載風格預設、模板等支持文件。

怎麼用

• 插件安裝後輸入 /frontend-slides:frontend-slides，再說需求，例如「我要給我的 AI 創業項目做一份融資路演」；手動安裝時命令是 /frontend-slides。
• 轉換已有文件：「把我的 presentation.pptx 轉成網頁幻燈片」。
• 生成後可以繼續讓它改某一頁的文案、換配色或增刪頁面。

適合誰 / 不適合誰

適合：

• 想要有設計感的演示、又說不清自己要什麼風格的人；
• 需要把幻燈片發成一個連結或單個文件、在任何瀏覽器裏都能放的場景；
• 想把舊 PPT 翻新成網頁版的人。

不適合：

• 必須交付可編輯 .pptx 的場合——它的成品是 HTML；
• 沒有本地文件系統和命令執行能力的純聊天環境。

注意事項

• 許可證：MIT。
• 維護狀態：最近一次推送是 2026-06-23，距今三個多月，更新不算頻繁，但 Star 數仍在同類裏靠前。
• 依賴：轉換 PPT 需要 Python 和 python-pptx；部署功能會把你的幻燈片發佈到 Vercel，等於公開到互聯網，含內部資訊的材料不要用。
• 安全：技能會運行腳本、寫文件、打開瀏覽器；導出 PDF 時會自動安裝 Playwright。安裝前瀏覽 SKILL.md 和 scripts/。
• 與本站介紹過的 guizang-ppt-skill 定位相近，區別在於它強調先看預覽再定風格。