frontend-slides

frontend-slides 技能總覽

frontend-slides 的功能

frontend-slides 技能可協助你建立充滿動畫感的 HTML 簡報，直接在瀏覽器中執行；你可以從零開始，也可以把 .ppt/.pptx 內容轉成 web-native 的投影片組。它最適合想做出精緻簡報、又不想真的去開發完整應用程式，或依賴通用投影片範本的人。frontend-slides 技能最大的價值在於快速進行視覺探索：它會把設計往有辨識度、適合上台展示的版面推進，而不是先逼你選定某種風格。

最適合誰使用

frontend-slides 很適合簡報、提案 deck、工作坊投影片、內部展示，以及任何重視動態、字體與版面的投影片內容。對不擅長設計、但能說清楚目標、卻還不知道具體美術方向的人，尤其有幫助。若你需要的是符合嚴格品牌規範的標準企業簡報、可直接編輯的 PowerPoint 輸出，或必須在傳統辦公軟體內完成的投影片，這個技能就沒那麼合適。

安裝前先看重點

它最明顯的差異化在於：僅靠瀏覽器輸出、預設零依賴，以及嚴格的 viewport 適配。也就是說，這個技能是為自包含的 HTML 輸出最佳化的，每一張投影片都要剛好填滿一個畫面，且不會在投影片內部捲動。如果你想要的是能產出精簡、衝擊力高、動態乾淨且渲染結果可預期的 frontend-slides 技能，這就是對的選擇。若你的工作流程依賴大量文字區塊、把講者備註當主要內容，或需要多檔案 web app，那你就得自己調整輸出結果。

如何使用 frontend-slides 技能

frontend-slides 安裝與設定

使用 npx skills add affaan-m/everything-claude-code --skill frontend-slides 安裝這個技能。安裝後，先從 skills/frontend-slides/SKILL.md 開始，再讀 STYLE_PRESETS.md，然後才開始產出任何內容。第二個檔案不是可有可無：裡面包含 viewport 安全的基礎 CSS、投影片密度上限、預設樣式指引，以及讓簡報保持可用而不只是好看的 CSS 規則。

frontend-slides 要怎麼寫好提示詞

一個好的 frontend-slides 提示詞，會清楚交代簡報任務、受眾、投影片數量範圍，以及來源素材。好的範例像這樣：「為一款 B2B 排程 app 製作 7 張投資人簡報；整體要偏深色、編輯感、強調動態；包含標題、問題、解法、產品流程、證據、定價與結尾 CTA。」如果是轉換 PPTX，請明確說出原始簡報的用途、要保留哪些投影片、哪些段落可以壓縮。若是做設計探索，請描述訊息與受眾，不要只丟一個泛用主題名稱。

frontend-slides 的實務工作流程

先決定你要的是新簡報，還是轉換既有簡報。接著提供粗略大綱，不要直接給完成稿，這樣技能才能自己安排層級與節奏。第一輪可以先要求重點放在結構和視覺方向，等你看過預覽後，再細修動態、密度與品牌語氣。每張投影片的內容都要保持精簡；這個技能最擅長的是把每個畫面當成一個單一的視覺陳述，而不是一頁文件。

先讀哪些檔案

如果你想最快拿到穩定輸出，先讀 SKILL.md，看啟用規則與限制；再讀 STYLE_PRESETS.md，看版面限制與風格選項。這個 repo 裡可支援的檔案就只有這些，所以安裝決策其實很直接：這個技能刻意做成自包含，輸出品質更取決於你有沒有照規則走，而不是去翻找一堆額外資源。

frontend-slides 技能 FAQ

frontend-slides 適合一般投影片提示詞嗎？

可以，但如果你要的是 HTML-first 的簡報輸出，而且希望有刻意設計過的動態與視覺質感，它會比一般提示詞更好用。普通提示詞也能描述投影片內容；frontend-slides 技能還會一起處理 viewport 適配、密度控制與風格探索。當簡報品質取決於版面紀律，而不只是文案時，它會更可靠。

初學者可以用 frontend-slides 嗎？

可以。這個技能其實對初學者很友善，因為它降低了設計上的不確定性：你只要描述簡報目標、受眾與氛圍，技能就能先提出方向。初學者最常犯的錯，是把投影片塞得太滿。只要你把需求寫得簡潔，技能就能幫你做更多構圖工作。

什麼情況下不該用它？

如果你最後一定要的是可編輯的 .pptx、內容必須可捲動，或每張投影片都必須嚴格套用某個品牌範本、幾乎不能有視覺偏移，就不要用 frontend-slides。它也不適合密集報告、參考文件，或高度依賴長篇講者備註而不是投影片內溝通的簡報。

如何改善 frontend-slides 技能

提供更好的來源素材

品質提升最大的關鍵，是把輸入寫得更清楚：受眾、目標、投影片數量，以及哪些內容一定不能少。不要只說「幫我做一份 onboarding 簡報」，改成「做一份給產品經理看的 8 張 onboarding demo，重點是說明 activation 指標；一張投影片講一個概念，結尾要有強而有力的建議」。如果是用 frontend-slides 做 UI Design，請補上產品脈絡、你想要的情緒感受，以及簡報應該偏實驗感、精品感、技術感，還是極簡風。

保住 viewport 限制

大多數失敗都來自每張投影片塞了太多內容。如果一張投影片需要超過一個主題，就拆開。若要放程式碼，就保持簡短。若要做比較，就限制欄數或卡片數。frontend-slides 的原則很單純：先保清楚，再加動態和樣式。

優化動態與風格，不只是文字

第一版出來後，請從轉場、留白、字體與 preset 選擇去改進簡報。你可以要求更窄的調整，例如「讓開場頁更有電影感」、「減少功能頁的視覺雜訊」，或「保留原本結構，但改成溫暖一點的 editorial 配色」。這類修改通常比要求整份重做更有效。

注意常見失敗模式

最常見的問題是投影片塞太滿、視覺語言太普通、層級不夠清楚。如果輸出看起來像模板，請直接要求更有辨識度的構圖，並減少預設 SaaS 風格。如果簡報看起來太薄，就補上一個具體證據點、一個產品流程細節，或一個針對受眾的例子。frontend-slides 技能進步最快的方式，就是把它當成視覺編輯器：簡潔的需求輸入，精準的修正輸出。