frontend-slides

frontend-slides 技能總覽

frontend-slides 是一個 Claude Code 技能，用來打造動態豐富的 HTML 簡報，或將 PPT/PPTX 檔轉成可直接在瀏覽器中瀏覽的簡報。它特別適合需要快速做出精緻簡報、但又不想手寫 CSS、架設框架，或靠猜測來處理版面與動態的人。它的核心工作很單純：把零散內容轉成一份看起來經過刻意設計、能自動適配視窗，且能以視覺方式反覆調整、而不是抽象描述的簡報。

frontend-slides 適合誰

當你需要投影片用於演講、募資提案、內部展示、個人作品集，或需要把 PowerPoint 轉成網頁簡報時，就很適合使用 frontend-slides 技能。若你能提供內容、但還沒有最後的視覺方向，它尤其有用，因為這套流程本來就是以視覺探索與風格選擇為中心。

frontend-slides 有什麼不同

frontend-slides 強調零依賴的 HTML、鮮明的視覺風格，以及強制的視窗適配。這組合很重要，因為它能產出可攜性高、無需 build step 就能在瀏覽器執行的結果；同時又能避免那種很容易一眼看出來是「AI 做的」通用版型。它也比一般提示詞更有主張，會把你往強烈字體、協調配色系統，以及逐頁內容紀律的方向推。

什麼情況下不適合用 frontend-slides

如果你要的是快速文字摘要、像試算表一樣的報告，或是必須原封不動保留複雜 PowerPoint 互動模型的簡報，就不建議用 frontend-slides。若你的訊息無法切成投影片大小的區塊，它也不是理想選擇，因為這個技能會把溢出視為內容問題，而不是讓你靠捲動去解決。

如何使用 frontend-slides 技能

安裝 frontend-slides

實際安裝 frontend-slides 通常會先從 Claude Code marketplace 設定開始：

/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

如果你的環境是手動管理技能檔，請把這個 skill 複製到 Claude Code skills 目錄，並把附帶的 scripts 一起保留。這個 repository 也包含 .claude-plugin/ manifest，若你的安裝流程依賴 marketplace metadata，這會很有幫助。

提供技能真正用得上的輸入

frontend-slides 的好結果，從內容開始，不是從形容詞開始。請提供：

• 簡報目標
• 受眾
• 投影片數量
• 投影片大綱或原始文字
• 任何必須保留的品牌元素
• 你是要轉換 PPT/PPTX，還是從零開始製作

弱的提示詞會說：「把這份簡報做得現代一點。」
更好的提示詞會說：「做一份給 B2B 開發者工具用的 7 頁投資人介紹簡報。語氣要自信、簡潔，使用深色編輯風格，並且三個產品主張要原文保留。」

先讀對的檔案

在處理 frontend-slides 指南時，先從 SKILL.md 開始，再看：

• html-template.md：基本投影片結構
• STYLE_PRESETS.md：以 preset 為主的風格方向
• animation-patterns.md：和語氣相連的動態選擇
• viewport-base.css：不可妥協的適配規則
• scripts/extract-pptx.py 和 scripts/export-pdf.sh：如果你要轉換或輸出，就要看這些

這些檔案比快速掃過 README 更重要，因為它們會清楚告訴你這個 skill 優化的是什麼，以及它不願意妥協的是什麼。

能做出更好簡報的工作流程

一個可靠的 frontend-slides 簡報流程是：

1. 先定義簡報目的與受眾，
2. 把內容拆成投影片大小的單位，
3. 從 presets 中選一個視覺方向，
4. 先產出第一版，
5. 檢查是否有任何投影片需要拆開，
6. 確認訊息能放進視窗後，再做細部修整。

如果你是在轉換 PowerPoint，請先保留結構，再處理風格。如果你是從零生成，先決定故事線，再要求視覺精修。

frontend-slides 技能 FAQ

frontend-slides 只有 PowerPoint 轉換能用嗎？

不是。PowerPoint 轉換只是其中一個用途，frontend-slides 也很適合原生的 HTML 簡報。如果你已經有大綱格式的投影片內容，這個 skill 可以把它轉成瀏覽器版簡報，不必從 PPTX 開始。

我需要會 CSS 或 JavaScript 嗎？

一開始不需要。frontend-slides 的重點，就是把實作細節交給這個 skill 處理。若你能清楚說明語氣、品牌與內容邊界，結果還是會更好，但不需要你自己手刻整份簡報。

這和一般提示詞有什麼不同？

一般提示詞可以要求做投影片；frontend-slides 則多了具體的簡報工作流程、零依賴輸出模型、視覺風格探索，以及視窗適配規則。當你在意安裝可行性、可重現性，以及輸出在瀏覽器裡是否真的像簡報時，這會大幅減少猜測成本。

什麼情況下不該用 frontend-slides？

如果內容需要長篇捲動、密集的參考資料，或超出簡報範圍的互動式 app 行為，就不要用它。若你要的是風格指向很少、很制式的企業簡報，它也不是好選擇，因為這個 skill 的設計目標就是推動更有辨識度的設計決策。

如何改進 frontend-slides 技能

提供更強的原始素材

品質提升最大的來源，通常是更好的輸入。與其只說「做得好看」，不如提供：

• 一句話主旨
• 精確的投影片數
• 講者備註或口條重點
• 品牌色或禁用色
• 任何必須逐字保留的文字

這能幫助 frontend-slides 避免自行發明與你的訊息不符的結構。

注意常見失敗模式

最常見的失敗模式是內容過載、視覺方向模糊，以及轉換假設太弱。如果某張投影片太擁擠，就拆開。若視覺方向太普通，就強制指定 preset 或明確的參考方向。若 PPTX 轉換失去原意，就先給優先順序：保留文字、保留圖片、簡化版面，最後再做風格化。

用有針對性的修訂來迭代

第一次輸出後，frontend-slides 的成果通常靠只修正真正重要的地方來提升：

• 「把第 3 頁拆成兩頁。」
• 「把色調改得更深、更有編輯感。」
• 「文案更精簡，標題對比更強。」
• 「圖表標籤要完全原樣保留。」
• 「結尾頁減少動態效果。」

這種修正方式，通常比要求全面重做更有效。

把 repository 當成決策工具

如果你正在評估 frontend-slides 技能、還沒決定要不要採用，請在承諾流程之前先看 template、presets 和 export scripts。它們會直接顯示這個 skill 是否符合你的環境、你的團隊能不能維護輸出，以及 frontend-slides 指南是否比一般提示詞更適合你的簡報製作習慣。