AI Agent 專用網頁 PPT 技能

AI Agent 產生雜誌等級的HTML 簡報

告別 PowerPoint 排版地獄,一段指令就能交付一份精緻 deck。內建電子雜誌風 × 瑞士國際主義雙視覺系統,單檔案 HTML、不用部署。

瑞士國際主義風格 HTML deck 範例截圖

幾個關鍵數字

2
視覺系統
32
鎖定版式
1
單檔案 HTML
0
部署成本

兩套視覺系統,開啟即驚豔

真實 deck 頁面截圖:左邊是敘事感,右邊是結構感。

Style A 電子雜誌風 deck 範例截圖

Style A · 電子雜誌 × 電子墨水

Monocle 貼上了程式碼,適合敘事、觀點、個人風格表達。

  • 10 種佈局:封面、章節、資料大字報、圖文、圖片網格、Pipeline、對比等
  • 5 套電子墨水主題,通用預設穩定出片
  • WebGL 流體背景,按 B 可切換靜態模式
Style B 瑞士國際主義風格 deck 範例截圖

Style B · 瑞士國際主義

網格至上、單一高飽和錨點色、髮絲線與極致字號對比,適合事實、產品、方法論。

  • 22 個具名鎖定版式(S01–S22),不能臨時發明頁面結構
  • 4 套瑞士錨點色:克萊因藍、檸檬黃、檸檬綠、安全橙
  • 內建版式校驗腳本,保護設計還原度

在頁面裡直接滑動翻頁

下方嵌入的是瑞士風範本,可用鍵盤 ← → 翻頁、按 B 切換靜態模式。

如果無法顯示,在新分頁開啟範本

這解決了什麼問題?

把常見痛點變成一句話答案。

普通 AI 做的 PPT 很醜?

內建嚴格版式系統與鎖定佈局,Agent 不會亂排。

Markdown 簡報缺乏設計感?

HTML / CSS 讓字號、網格、留白、圖片比例都能精細控制。

每次都要手調格式?

Agent 直接輸出單檔案 HTML,開啟即可簡報,改字就好。

為什麼選 slides-skills

功能特色

不是塞滿功能,而是把最常用的視覺能力變成一鍵可用。

雙視覺系統

電子雜誌風負責敘事,瑞士風負責事實表達。

32 種鎖定版式

Style A 10 種 + Style B 22 種,直接挑選、填充文案。

單檔案 HTML

不需要建置、不需要伺服器,瀏覽器直接開啟就能簡報。

Codex 配圖流程

可呼叫 GPT-Image 2.0 / GPT-M 2.0 產生照片、資訊圖、UI 情景圖。

多平台封面

21:9 頻道橫幅、1:1 分享卡、3:4 IG 封面、16:9 Youtube 橫版。

低效能靜態模式

按 B 關閉 WebGL / canvas 動畫,動態內容退回靜態背景。

強校驗腳本

瑞士風執行版式校驗器,攔住居中標題、圖片脫離槽位等問題。

多種翻頁方式

鍵盤 ← →、滾輪、觸屏滑動、底部圓點、ESC 索引。

適合誰 / 不適合誰

誠實過濾,讓你裝對工具、降低失望。

✅ 合適❌ 不合適
Demo day / 產品發表大量表格資料
個人觀點分享 / 行業內部講話需要多人協作編輯
AI 研究報告 / 方法論輸出訓練課件(資訊密度不夠)
帶強烈個人風格的演講需要匯出 PPTX 為主流程

30 秒開始

複製貼上就完成安裝,說一句話就能觸發。

npx skills add gopenso/slides-skills --skill slides-skills

或直接把這段話貼給有 shell 許可權的 AI Agent:

幫我安裝 slides-skills。請把 https://github.com/gopenso/slides-skills 複製到 ~/.claude/skills/slides-skills,安裝完成後檢查 SKILL.md、assets/、references/ 是否存在。

安裝後直接說:「幫我基於這篇文章做一份瑞士風 PPT,控制在 7 頁左右」,第一份 deck 通常在幾十秒內出現。

範例 Prompt

複製任何一句給你的 AI Agent,再附上文章、Markdown 或素材檔案。

「幫我基於這篇文章產生一份 8 頁左右的瑞士風 PPT,需要 3 張配圖,圖片比例跟範本槽位相符。」

「幫我把這個產品分析文件做成電子雜誌風 PPT,重點突出觀點和敘事節奏。」

「基於這份 PPT 的主題,做兩張封面:21:9 封面和 1:1 分享卡,視覺保持一致。」

「把這些產品截圖重新設計成統一的 16:10 PPT 配圖,保留關鍵資訊,不要畫頁尾和標題。」

常見問題

還有疑問?歡迎到 GitHub 開 Issue 或 PR。

可以匯出 PPTX 嗎?

當前核心交付是 HTML。你可以用瀏覽器簡報、截圖或螢幕錄製。如果需要 PPTX,建議把 HTML 頁面作為視覺稿再轉換,但這不是當前主流程。

為什麼不允許自訂顏色?

這個 Skill 的重點是穩定產出。自由選色很容易破壞整體風格,所以只允許從預設主題裡選,保護美學比給自由更重要。

Codex 配圖是必須的嗎?

不是。沒有配圖也能產生 PPT。配圖流程只在需要照片、資訊圖、UI 情景圖或封面時使用。

我能加自己的版式嗎?

可以。Style A 可以在 references/layouts.md 裡擴充;Style B 更嚴格,需要同步更新 template-swiss.html、layouts-swiss.md、swiss-layout-lock.md 和校驗器。

怎麼更新到最新版?

重新執行安裝命令,或在本地 skill 目錄執行 git pull。

現在就讓 AI 幫你做 deck

一段指令、一分鐘,告別排版地獄。