guizang-ppt-skill – 開源網頁 PPT生成 Skill，輸出 HTML

0 0 0

guizang-ppt-skill是什麼

guizang-ppt-skill 是開源的 Claude Code / Claude Agent Skill，能將提示詞轉化爲單文件 HTML 橫向翻頁PPT。guizang-ppt-skill 視覺基調爲”電子雜誌 × 電子墨水”，靈感源自《Monocle》《衛報》等印刷雜誌版式與 Kindle 閱讀美學，融合 WebGL 流體背景、襯線大標題與嚴格網格系統，產物爲雙擊可打開的單文件 HTML，無需構建工具或服務器。

guizang-ppt-skill的主要功能

10種頁面佈局：提供開場封面、章節幕封、數據大字報、左文右圖、圖片網格、Pipeline流程、懸念問題、大引用、Before/After對比、圖文混排。
5套主題色預設：提供墨水經典（通用）、靛藍瓷（科技/AI）、森林墨（自然/人文）、牛皮紙（懷舊/文學）、沙丘（藝術/創意）。
WebGL 動態背景：封面 hero 頁帶若隱若現的流體/色散效果，正文頁剋制留白。
雜誌級翻頁交互：支持鍵盤左右箭頭、鼠標滾輪、觸屏滑動、底部圓點跳轉、ESC 縮略圖索引。
三級字體分工：襯線大標題（觀點）+ 非襯線正文（信息）+ 等寬元數據（頁碼/章節號）。
單文件 HTML 輸出：零構建、零依賴，瀏覽器直接打開，複製給別人字體動畫不亂。

如何使用guizang-ppt-skill

安裝方式
- 方式一（推薦）：將以下指令發給 Claude Code / Cursor 等 AI Agent：
  
  幫我安裝 guizang-ppt-skill，執行 git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt，驗證目錄包含 SKILL.md、assets/、references/ 三項。
- 方式二（手動）：命令行執行上述 git clone 指令。
使用流程
- 觸發 Skill：對 Claude 說”幫我做一份雜誌風 PPT”或”horizontal swipe deck”等關鍵詞。
- 需求澄清：回答 Claude 提出的6個問題——受衆場景、分享時長、原始素材、圖片需求、主題色選擇、硬約束條件。
- 大綱對齊：Claude 先輸出大綱與主題節奏表，確認後再生成代碼，攔截80%返工。
- 填充內容：從 references/layouts.md 挑選佈局骨架粘貼到 template.html，替換文案與圖片路徑。
- 圖片管理：圖片放 images/ 文件夾，命名規則爲”頁號補零+英文語義”（如 03-figma.png），同名覆蓋即可無損換圖。
- 自檢與預覽：對照 references/checklist.md 檢查 P0 級問題，瀏覽器直接打開預覽，用 inline style 微調字號/間距。

guizang-ppt-skill的關鍵信息和使用要求

運行環境：支持Claude Code / Claude Agent / 任何有 shell 權限的 AI Agent。
產物格式：提供單文件 HTML，雙擊瀏覽器打開，無需本地服務器。
圖片規範：照片用 JPG，截圖用 PNG；單張寬度 ≥1600px；命名必須補零（01 而非 1）。
主題色限制：僅允許從5套預設中選擇，不支持自定義 hex 值，保護美學一致性。
網格紀律：正文采用嚴格 7:5 / 6:6 網格；連續3頁以上相同主題爲 P0 級錯誤。
導出 PDF：瀏覽器打印功能，每頁一張 A4。

guizang-ppt-skill的核心優勢

設計經驗沉澱：作者將10年 UI 設計與 AI 特效經驗壓入 Skill，每個踩過的坑都寫進 checklist.md。
人 × AI 協作接口：通過6問清單前置對齊需求，避免 AI 直接生成後方向錯誤。
約束即美學：僅6個 CSS 變量控制主題，禁止自定義顏色，約束越嚴風格越穩。
印刷級排版：紙白底色+墨色文字，非純白純黑，參考印刷行業與 Kindle 電子紙標準。
零部署成本：支持單文件 HTML 跨平台兼容，發給別人只需複製一個文件。

guizang-ppt-skill的項目地址

GitHub倉庫：https://github.com/op7418/guizang-ppt-skill

guizang-ppt-skill的同類競品對比

對比維度	guizang-ppt-skill	Tome
產品形態	Claude Code / Agent 開源 Skill	SaaS 網頁端應用
核心定位	單文件 HTML 雜誌風演示生成器	AI 敘事驅動型演示工具
視覺風格	電子雜誌 × 電子墨水，印刷級襯線排版，剋制留白	電影感沉浸式佈局，全出血大圖，未來感視覺流
生成方式	對話式 6 步澄清 → 大綱對齊 → HTML 骨架填充	單提示詞一鍵生成完整敘事流，AI 自動構建故事結構
輸出格式	單文件 HTML（零構建、零依賴）	Web-native 分享鏈接，有限支持 PDF 導出
翻頁交互	橫向左右滑動，鍵盤/滾輪/觸屏/圓點/ESC 縮略圖索引	異步縱向/橫向滾動敘事流，支持嵌入 3D 模型與活網頁
主題控制	5 套預設主題（墨水/靛藍/森林/牛皮紙/沙丘），禁止自定義 hex	AI 動態生成佈局，主題自由度較高，但缺乏嚴格色彩紀律
圖片處理	本地 `images/` 文件夾管理，同名覆蓋無損換圖，≥1600px 寬	內置 DALL-E 集成 + Unsplash 圖庫，AI 自動生成配圖
協作功能	無（靜態單文件，靠文件傳遞）	實時協作、評論、觀衆瀏覽數據分析
價格模式	完全免費開源（MIT 協議）	免費版有限額度，Pro $16/月，企業版定製
離線使用	完全支持，雙擊瀏覽器即可打開	不支持，必須聯網訪問
設計哲學	約束即美學：10 年設計經驗沉澱爲不可改動的排版規則	創意即自由：AI 輔助敘事，視覺衝擊力優先