Community程式設計與開發github.com

arifszn/slide-wright

根據主題、粗略筆記或大綱建立精美的網頁簡報,並能在事後編輯投影片 — 新增、刪除或修改內容。會產生自訂主題與簡短的兩頁預覽,只有當使用者確認方向後才建構完整簡報;編輯現有簡報則跳過此流程,直接套用變更。

slide-wright 是什麼?

slide-wright 是一個 AI 代理技能,專門用於建立和編輯基於 reveal.js 的網頁簡報。它接受主題、粗略筆記或大綱作為輸入,並生成可讀性高、設計精良的單一 HTML 檔案簡報。此技能的核心設計哲學是「先提案,後建構」:它會先產生一個自訂主題和兩頁預覽,只有在使用者批准方向後,才會建構完整的簡報內容。這避免了浪費運算資源在未經確認的風格上。對於已存在的 reveal.js 簡報,它可以無縫編輯,保留原有主題並直接套用修改,大幅縮短迭代週期。除了建立和編輯,它還支援匯出為 PDF、PowerPoint,以及部署到 Surge、Vercel 或 Netlify 等平台,是從構想到分享的完整簡報工作流程。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/arifszn/slide-wright/tree/HEAD/slide-wright

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

slide-wright 是做什麼的?

將一個主題或粗略筆記轉變為董事會級別的簡報:投影片讀起來像是來自頂尖策略或產品團隊的簡報,並以一個獨立的 HTML 檔案傳遞,可在任何瀏覽器中執行。

定義此技能的規則

在建立簡報前,先提案外觀。初次建立時,絕不直接產出最終簡報。你需要產生一個主題,用它建立兩頁的預覽,然後停下來,直到使用者批准方向。只有在那之後,你才建構其餘部分。

一次只提出一個提案,而非選單。如果使用者說不,就拋棄該方向,並嘗試一個明顯不同的方向。每個主題都是為你面前的簡報所發明;沒有預設的樣式庫。

全新簡報:先閱讀 references/new-deck.md。 它包含步驟 1-4(規劃簡報、提案外觀、獲得同意、建構)以及確切的批准關卡。

引擎(內部保留)

簡報使用從 CDN 載入的 reveal.js 來渲染,但這是一個使用者永遠看不到的實作細節。談論投影片、主題和設計;函式庫名稱只會出現在生成的 <link> 和 <script> 標籤內。references/deck-template.md 有確切的設定方式。

編輯現有的簡報

如果使用者指向一個現有的 HTML 簡報,檢查它是否基於 reveal.js(尋找來自 CDN 的 reveal.js <link>/<script> 標籤)。如果是——無論此技能是否建立它——不要從頭開始:讀取它,保留其主題,並就地進行修改。外觀已經獲得批准,所以跳過提案和關卡。編輯後,執行 node <skill-dir>/scripts/check-deck.mjs <deck.html> 並修復它輸出的每一行(references/new-deck.md 有詳細說明)。

編輯時不需要參考檔案,除非你新增了新的展示類型(閱讀 references/exhibits.md)或程式碼或動畫(閱讀 references/code-slides.md 或 references/motion-recipes.md)。

如果簡報是 HTML 但不是基於 reveal.js(不同的引擎、純投影片等),則超出此技能的編輯範圍——直接說明,而不是強迫重寫到不同的引擎上。其他所有內容都是為了建立新簡報。

步驟 5 — 交接

  1. 開啟完成的簡報。
  2. 說明它的位置、主題名稱和投影片數量。
  3. 告訴使用者如何操作:使用方向鍵、空白鍵或滑動來移動;F 全螢幕,Esc 或 O 開啟投影片總覽,S 開啟包含備註的講者檢視;在 URL 後加上 ?print-pdf 並列印以儲存為 PDF(references/export-pdf.md 有步驟);主題顏色存放在 :root 變數中,字型則在 <link> 裡。
  4. 提供顯而易見的下一步:修訂內容、變更主題、匯出 PDF、匯出 PowerPoint 檔案(references/export-pptx.md),或部署到一個公開 URL 以分享簡報。如果他們想部署,請閱讀 references/deploy.md 並讓他們選擇主機(Surge、Vercel 或 Netlify)——不要自行預設。

參考檔案

按順序閱讀,不要一次全部讀完:

  • references/new-deck.md — 新簡報的步驟 1-4:規劃簡報、提案外觀、獲得同意、建構
  • references/design-aesthetics.md — 什麼讓簡報看起來有設計感(步驟 2)
  • references/theme-generation.md — 發明主題的程序(步驟 2)
  • references/deck-template.md — HTML 骨架、版面配置和引擎設定(步驟 2 和 4)
  • references/exhibits.md — 為每張內容投影片選擇和建立視覺元素(步驟 2 和 4)
  • references/code-slides.md — 程式碼投影片及其標記合約(步驟 4)
  • references/motion-recipes.md — 動畫,當使用者要求時使用(步驟 4)
  • references/media.md — 投影片中的圖片和影片(步驟 4)
  • references/export-pdf.md — 將簡報儲存為 PDF(步驟 5)
  • references/export-pptx.md — 將簡報匯出為包含可編輯文字的 PowerPoint(步驟 5)
  • references/deploy.md — 將簡報發佈到公開 URL(步驟 5)

相關技能