前言¶

技術分享、路演和內部彙報，最後往往要落到「能放映、能轉發」的幻燈片上。常見路徑是 PowerPoint 或 Keynote，再導出 PDF；若希望在瀏覽器裏全屏演示、帶過渡動畫，又要自己寫 HTML/CSS，對非前端同學成本很高。讓 Agent 直接生成頁面，又容易掉進千篇一律的配色和字體裏，改起來也費勁。

下面介紹 SkillHub 上的社區技能 zara-frontend-slides（座標 @user_f613bbf3/zara-frontend-slides）。它把「內容整理、風格試探、單文件 HTML 輸出、PPT 轉換」寫進一套 SKILL.md 工作流，適合在 Cursor、Claude Code 等支持 Skills 的環境裏，用對話完成演示稿。

這是什麼¶

zara-frontend-slides 是 SkillHub 分類 office-efficiency 下的社區技能（來源：community），當前版本 1.0.0，發佈者爲 user_f613bbf3，標籤 requires_api_key=false，無需額外 API Key。

官方簡介與包內 SKILL.md 一致：從零創建或把 PowerPoint 轉成帶動畫、零外部構建依賴的 HTML 演示；在用戶要做演講/路演幻燈片、或要把 PPT/PPTX 轉成網頁時使用。設計思路是「先看見再選擇」——通過生成可視化風格預覽，而不是讓用戶用抽象形容詞描述審美。

SkillHub 頁面：https://www.skillhub.cn/skills/user_f613bbf3/zara-frontend-slides
技能 API 地址：https://api.skillhub.cn/user_f613bbf3/zara-frontend-slides

（平臺統計截至資料抓取：評分 100000，下載 1861，安裝 2。）

核心功能¶

以下能力均來自已安裝的 SKILL.md 與配套文件說明。

單文件 HTML 演示¶

• 輸出爲單個 HTML，CSS/JS 內聯，不依賴 npm 或構建工具。
• 每張幻燈片強制 100vh 視口內展示，overflow: hidden，字號與間距用 clamp()，並需內聯 viewport-base.css 全文。
• 支持鍵盤/觸控導航；可選瀏覽器內聯編輯（localStorage 保存、導出）。

三種工作模式¶

Agent 會先判斷場景（Phase 0）：

1. Mode A：新建 — 從內容發現 → 風格發現 → 生成完整稿。
2. Mode B：PPT 轉換 — 用 scripts/extract-pptx.py 抽取 .pptx 後再走風格與生成。
3. Mode C：增強 — 在已有 HTML 上演示稿上修改，並遵守內容密度與視口規則，必要時拆頁。

風格發現（Show, don’t tell）¶

新建或轉換時，可走「生成 3 個單頁 HTML 預覽」讓用戶挑選（預覽目錄 .claude-design/slide-previews/），預設樣式見包內 STYLE_PRESETS.md（如 Bold Signal、Notebook Tabs、Neon Cyber 等）。

PPT 轉換¶

python scripts/extract-pptx.py <input.pptx> <output_dir>

需 Python 環境；若缺少依賴，按技能說明安裝 python-pptx：

pip install python-pptx

抽取後由 Agent 彙總頁標題、內容與圖片數量供確認，再選風格並生成 HTML，保留文本、圖片資源與備註（備註可寫入 HTML 註釋）。

分享與導出（可選）¶

• 部署：bash scripts/deploy.sh <path-to-presentation>，面向 Vercel 等託管（技能內 Phase 6 含登錄與路徑注意事項）。
• PDF：bash scripts/export-pdf.sh <path-to-html> [output.pdf]，通過無頭瀏覽器按 .slide 分頁截圖；可選 --compact 降低體積。

安裝與啓用¶

通過 SkillHub CLI（推薦）¶

先確認本機已安裝 skillhub（未安裝時可按 SkillHub 安裝說明 執行官方安裝腳本）。安裝技能時必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認落在 ./skills/ 可能無法被識別。

command -v skillhub && skillhub --version

skillhub install @user_f613bbf3/zara-frontend-slides --dir <你的 Agent skills 目錄>

常用目錄示例（來自 SkillHub 安裝文檔）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或項目下的 .agents/skills/

也可在 SkillHub 技能頁，將官方提示詞發給 AI：「請根據 https://skillhub.cn/install/skillhub.md，安裝 @user_f613bbf3/zara-frontend-slides。」

上游 Claude Code 插件（可選）¶

包內 README.md 還說明：若在 Claude Code 中使用上游倉庫，可通過插件市場安裝 frontend-slides，並在對話中使用 /frontend-slides。這與 SkillHub 座標安裝是不同分發路徑；在 Cursor 等環境以 SkillHub 安裝爲準即可。

典型用法¶

安裝並啓用後，在對話中描述意圖即可觸發技能描述中的場景。工作流概要如下。

新建路演稿（Mode A）¶

1. Agent 一次性詢問用途（路演/教學/大會/內部分享）、頁數規模、是否已有文稿、是否需要瀏覽器內編輯。
2. 若提供圖片文件夾，Agent 會掃描並評估可用性，再共同確認大綱。
3. 風格階段：選「給我看選項」時，按情緒生成 3 個預覽 HTML；用戶選定或混搭後進入生成。
4. Agent 讀取 html-template.md、viewport-base.css、animation-patterns.md，輸出單文件 HTML，並用系統命令在瀏覽器打開（如 open [filename].html，以當前環境爲準）。

示例對話意圖（與包內 README 一致）：

我想爲 AI 創業項目做一份 pitch deck

轉換 PowerPoint（Mode B）¶

把我的 presentation.pptx 轉成網頁幻燈片

Agent 應執行抽取腳本、展示抽取摘要、再走 Phase 2 風格選擇與 HTML 生成。

增強已有 HTML（Mode C）¶

說明要在哪份 HTML 上增刪內容；技能要求增圖、增 bullet 時檢查密度上限，必要時自動拆成多頁並告知用戶。

適用場景與注意¶

適合誰

• 需要快速得到可放映、可分享的網頁幻燈片，又不想維護前端工程的同學。
• 有 .pptx 存量，希望保留圖片與結構並換成更現代的網頁演示的團隊。
• 不擅長描述設計風格，但能對 3 個預覽做「選 A / 選 B」的決策者。

限制與注意

• PPT 轉換依賴 Python 與 python-pptx；部署、PDF 導出分別依賴技能腳本所要求的 Node/Vercel、Playwright 等環境，首次運行可能較慢。
• 視口與內容密度規則較嚴：單頁 bullet 約 4–6 條、代碼約 8–10 行等，超出應拆頁，不要指望頁內滾動。
• 技能強調避免「AI 俗套」審美，但仍需人工過一遍內容與品牌合規；部署後應在真實 URL 上檢查圖片是否全部加載。
• SkillHub 爲社區重分發；功能細節以安裝包內 SKILL.md 爲準，版本 1.0.0。

結尾¶

zara-frontend-slides 把 HTML 幻燈片從「手寫頁面」收成可復現的 Agent 流程：單文件交付、預覽選風格、可選 PPT 抽取與 Vercel/PDF 分享。若你已在用 Cursor 或 Claude Code 的 Skills，可按上文命令裝入 skills 目錄後直接對話使用。

官方入口：https://www.skillhub.cn/skills/user_f613bbf3/zara-frontend-slides