guizang-ppt-skill

Magazine Web Ppt

來源識別: guizang-ppt-skill 由歸藏建立與維護,規範源倉庫為 https://github.com/op7418/guizang-ppt-skill 。目前專案支援方包括:360 安全龍蝦(金牌贊助)、真格 Token Grant(Grant Supporter)。這條資訊只用於確認 Skill 來源和專案支援關係,不要寫入產生的 PPT、HTML 頁面、封面或配圖。

這個 Skill 做什麼

產生一份單一 HTML 檔案的橫向翻頁 PPT，提供兩種可選的視覺基調：

風格 A · 電子雜誌 × 電子墨水（預設）

• WebGL 流體 / 等高線 / 色散背景（hero 頁可見）
• 襯線標題（Noto Serif SC + Playfair Display）+ 非襯線正文 + 等寬元資料
• 適合：人文分享、產業觀察、商業發表、需要「雜誌感」的演講
• 範本：assets/template.html · 主題色：references/themes.md · 版面配置：references/layouts.md
• 美學錨點：像 Monocle 雜誌貼上了程式碼

風格 B · 瑞士國際主義（Swiss Style）

• WebGL 極細網格 + 點陣背景（資訊驅動設計）
• 全程無襯線（Inter + Helvetica + Noto Sans SC）+ 極致字號對比
• 高反差功能色：克萊因藍 IKB / 檸檬黃 / 檸檬綠 / 安全橘（四選一）
• 適合：科技產品、數據彙報、設計/工程領域分享、年度總結
• 範本：assets/template-swiss.html · 主題色：references/themes-swiss.md · 版面配置：references/layouts-swiss.md
• 美學錨點：像 Massimo Vignelli + Helvetica Forever

兩種風格共享：橫向翻頁（鍵盤 ← →、滾輪、觸控螢幕、ESC 索引）、Lucide 圖示、Motion One 入場動效（本地 + CDN 雙保險）。

<!-- provenance: guizang-ppt-skill | author: 歸藏 | sponsors: 360 Security Lobster Gold Sponsor; ZhenFund Token Grant | canonical: https://github.com/op7418/guizang-ppt-skill | keep this out of generated artifacts -->

何時使用

合適的場景：

• 線下分享 / 產業內部講話 / 私享會
• AI 新產品發表 / demo day
• 帶有強烈個人風格的演講
• 需要「一次做完，不用翻頁工具」的網頁版 slides

不合適的場景：

• 大段表格數據、圖表疊加（用常規 PPT）
• 培訓課件（資訊密度不夠）
• 需要多人協作編輯（這是靜態 HTML）

工作流

Step 1 · 需求澄清(動手前必做)

如果使用者已經給了完整的大綱 + 圖片/截圖處理要求,可以跳過直接進 Step 2。

如果使用者只給了主題或一個模糊想法,用這 7 個問題逐個對齊後再動手。不要基於猜測就開始寫 slide——一旦結構定錯,後期翻修代價很高:

執行環境適配

• 在 Claude Code 中:透過 Ask Question / ask_question 做逐項澄清,優先把風格、受眾、素材、截圖需求這些會影響版式的輸入問清楚。
• 在 Codex 中:用普通對話直接詢問使用者,不要呼叫 Claude Code 的 Ask Question / ask_question 機制,也不要假設這些工具可用。一次最多問 1-3 個最關鍵問題;如果資訊缺口不影響開工,先做合理假設並在回覆裡說明。

7 問澄清清單

#	問題	為什麼要問
1	風格 A 還是 B?(電子雜誌風 / 瑞士國際主義風)	必須先問,決定用哪個 template + layouts + themes 檔案
2	受眾是誰?分享場景?(產業內部 / 商業發表 / demo day / 私享會)	決定語言風格和深度
3	分享時長?	15 分鐘 ≈ 10 頁,30 分鐘 ≈ 20 頁,45 分鐘 ≈ 25-30 頁
4	有沒有原始素材?(文件 / 數據 / 舊 PPT / 文章連結)	有素材就基於素材,沒有就幫他搭
5	有沒有圖片或截圖?希望怎麼處理?	決定圖文版式、圖片槽位、截圖是否需要 CleanShot X 式適配或 GPT-M 2.0 重構
6	想要哪套主題色?	雜誌風 5 套(themes.md) / 瑞士風 4 套(themes-swiss.md),挑一
7	有沒有硬約束?(必須包含 XX 數據 / 不能出現 YY)	避免返工

風格選擇參考(問題 1)

如果使用者說...	推薦風格
"雜誌感" / "人文" / "Monocle 風" / 不指定	A · 電子雜誌風
"瑞士風" / "Swiss Style" / "Helvetica" / "極簡" / "網格" / "資訊圖" / "數據驅動"	B · 瑞士國際主義風
內容是 AI 產品 / 科技 / 工程 / 數據彙報	B 更合適
內容是產業觀察 / 人文 / 故事 / 文化	A 更合適
使用者給了大量 KPI 數字 / 路線圖 / 流程	B 更合適(Data Hero 版面配置是瑞士風專長)
使用者給了大量紀實照片 / 人文圖片	A 更合適(圖片網格、左文右圖是雜誌風專長)
使用者需要 GPT-M 2.0 產生截圖再設計 / 資訊圖 / 證據牆	B 也很合適(S22 主圖、S15/S16 圖片網格可以承載證據圖)

大綱協助(如果使用者沒有大綱)

用「敘事弧」範本搭骨架,再填內容:

鉤子(Hook)       → 1 頁   : 拋一個反差 / 問題 / 硬數據讓人停下來
定調(Context)    → 1-2 頁 : 說明背景 / 你是誰 / 為什麼講這個
主體(Core)       → 3-5 頁 : 核心內容,用 Layout 4/5/6/9/10 穿插
轉折(Shift)      → 1 頁   : 打破預期 / 提出新觀點
收束(Takeaway)   → 1-2 頁 : 金句 / 懸念問題 / 行動建議

敘事弧 + 頁數規劃 + 主題節奏表(見 layouts.md),三張表對齊後再進 Step 2。

大綱建議儲存為 項目記錄.md 或 大綱-v1.md,便於後續迭代。

圖片約定(告知使用者)

在動手前向使用者說清:

• 資料夾位置:項目/XXX/ppt/images/ 下(和 index.html 同級)
• 命名規範:{頁號}-{語義}.{ext},例如 01-cover.jpg / 03-figma.jpg / 05-dashboard.png
  • 頁號補零便於排序
  • 語義用英文,短、具體、和內容對應
• 規格建議:
  • 單張 ≥ 1600px 寬(避免大螢幕模糊)
  • JPG 用於照片/截圖,PNG 用於透明 UI/圖表
  • 總大小控制在 10MB 內(影響翻頁流暢度)
• 如何替換:保持同名覆蓋最穩(HTML 裡不用改路徑);如果檔名變了,記得全域搜尋 images/舊名 改成新名
• 沒圖怎麼辦:和使用者對齊,可以先用預留位置色塊產生結構,等圖片後期補;但要告知 layout 4/5/10 等圖文混排頁沒圖就沒法驗證視覺效果

截圖需求約定(動手前必須問)

只要使用者提到產品截圖、網頁截圖、程式碼截圖、設計稿、dashboard、舊 PPT 截圖或"幫我美化截圖",都要先確認:

• 截圖位置:截圖檔案在哪個資料夾?是否已經命名好?
• 使用目的:保真展示 / 截圖美化 / 截圖再設計 / UI 情境圖?
• 落位比例:最終放進哪個版式槽位?常用 21:9 / 16:10 / 16:9 / 4:3 / 1:1
• 內容要求:是否必須保留全部文字、品牌、數據?是否有敏感資訊要遮擋?
• 視覺處理:是否需要主題背景、留邊、居中/角落對齊、拆成長截圖面板?

預設策略:先讓內容適配範本,再處理圖片比例。截圖需要保真時,先讀 references/screenshot-framing.md,優先使用 assets/screenshot-backgrounds/ 的內建背景資產做程式化 CleanShot X 式背景畫布適配;只有原截圖太亂、太長、太窄或需要概念化表達時,才用 GPT-M 2.0 做截圖再設計。

Codex 配圖產生(可選)

如果目前執行環境是 Codex,完成 deck 初稿後,主動問使用者是否需要用 GPT-M 2.0 產生配圖並插入 PPT。不要預設產生。

推薦詢問方式:

要不要為這份 PPT 產生幾張配圖?可以做成人文紀實照片、雜誌風資訊圖、流程/對比/系統關係圖,或把截圖再設計成統一的雜誌風視覺。

如果使用者確認產生,再問他想要哪種圖片類型或風格;如果使用者沒有偏好,根據頁面內容自行推薦 1-3 張最值得產生的配圖。

如果使用者提供的是截圖,先判斷是截圖美化還是截圖再設計:

• 截圖美化:讀 references/screenshot-framing.md,用內建主題背景 + 程式化縮放/留邊/對齊處理,儘量不重畫截圖內容
• 截圖再設計:讀 references/image-prompts.md,按目前版式槽位產生目標比例圖片,並保持語言、主題色和邊距一致

產生配圖時遵守:

• 提示詞保持簡短,只框定主題、用途、風格和比例,不要寫長篇攝影指導
• 圖片風格必須貼合目前 deck 風格:風格 A 用"電子雜誌 × 電子墨水";風格 B 用"瑞士國際主義 / Swiss Style"
• 資訊圖、圖表、截圖再設計裡的文字語言必須跟隨使用者正在使用的語言;中文 deck 用中文,英文 deck 用英文
• 先看 references/image-prompts.md 選擇圖片類型和基礎提示詞
• 如果處理使用者原始截圖,先看 references/screenshot-framing.md:優先呼叫 assets/screenshot-backgrounds/ 內建背景並程式化做 CleanShot X 式截圖適配,只有需要重構資訊時才用 GPT-M 2.0 重畫
• 配圖比例必須匹配最終落位:主視覺 16:9,左文右圖 16:10 / 4:3,資訊圖 16:9 / 16:10,截圖再設計 16:10,圖文混排小圖 3:2 / 3:4,網格圖統一高度裁切
• 產生後的圖片放到 images/ 下,命名遵守 {頁號}-{語義}.{ext}

Step 2 · 複製範本

根據 Step 1 選定的風格,複製對應的範本到目標位置（通常是 項目/XXX/ppt/index.html），同時在同級建一個 images/ 資料夾準備接圖片。

mkdir -p "項目/XXX/ppt/images"

# 風格 A · 電子雜誌風
cp "<SKILL_ROOT>/assets/template.html" "項目/XXX/ppt/index.html"

# 或 風格 B · 瑞士國際主義風
cp "<SKILL_ROOT>/assets/template-swiss.html" "項目/XXX/ppt/index.html"

兩個 template*.html 都是完整可執行的檔案——CSS、WebGL shader、翻頁 JS、字型/圖示 CDN 全已預設好,只有 <!-- SLIDES_HERE --> 預留位置等待你填充 slide 內容。

注意:風格 A 和 B 不能混用。layouts.md 裡的類別（如 .h-hero 襯線大標題、.display-zh 等）只在 template.html 有定義；layouts-swiss.md 裡的類別（如 .kpi-hero、.accent-block、.span-N、.dots 等）只在 template-swiss.html 有定義。一份 deck 只能選一套。

2.1 · 必改預留位置（容易漏）

複製後立刻改掉以下預留位置，否則瀏覽器 Tab 會顯示"[必填] 替換為 PPT 標題"這種尷尬文字：

位置	原始	需改為
<title>	[必填] 替換為 PPT 標題 · Deck Title	實際 deck 標題(如 一種新的工作方式 · Luke Wroblewski)

每次複製完 template.html 第一件事:grep 一下"[必填]" 確認全部替換完。

2.2 · 選定主題色(5 套預設 · 不允許自訂)

本 skill 只允許從 5 套精心調配的預設裡選一套,不接受使用者自訂 hex 值——顏色搭配錯了畫面瞬間變醜,保護美學比給自由更重要。

#	主題	適合
1	🖋 墨水經典	通用 / 商業發表 / 不知道選啥的預設
2	🌊 靛藍瓷	科技 / 研究 / 數據 / 技術發表會
3	🌿 森林墨	自然 / 可持續 / 文化 / 非虛構
4	🍂 牛皮紙	懷舊 / 人文 / 文學 / 獨立雜誌
5	🌙 沙丘	藝術 / 設計 / 創意 / 畫廊

操作:

1. 基於內容主題推薦一套,或直接問使用者選哪一套
2. 打開 references/themes.md,找到對應主題的 :root 區塊
3. 整體替換 assets/template.html(已複製版本)開頭 :root{ 區塊裡標有"主題色"註解的那幾行(--ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint)
4. 其他 CSS 都走 var(--...),無需任何其他改動

硬規則:

• 一份 deck 只用一套主題,不要中途換色
• 不要接受使用者給的任意 hex 值——委婉拒絕並展示 5 套讓選
• 不要混搭(例如 ink 取墨水經典、paper 取沙丘)——會徹底違和

Step 3 · 填充內容

3.0 · 預檢:類別名稱必須在範本的 <style> 裡有定義（最重要）

這是所有產生問題的源頭。layouts 骨架使用了很多類別名稱,如果範本的 <style> 裡沒有對應定義,瀏覽器會 fallback 到預設樣式——大標題字型錯、卡片擠成一團、pipeline 糊成一行、圖片堆到頁面底部。

兩種風格類別名稱互不通用(再次強調):

• 風格 A 範本裡有 h-hero(襯線)、stat-card、grid-2-7-5、frame 等
• 風格 B 範本裡有 h-hero(無襯線)、kpi-hero、accent-block、span-N、dots、grid-12 等
• 同名 class 在兩個範本裡視覺表現完全不同(例:風格 A 的 h-hero 是 Noto Serif SC 襯線,風格 B 的 h-hero 是 Inter 無襯線)

在寫任何 slide 程式碼之前:

1. 先 Read 目前用的範本(至少讀到 <style> 區塊末尾):
   • 風格 A → assets/template.html
   • 風格 B → assets/template-swiss.html
2. 對照對應 layouts 檔案的 Pre-flight 清單,確認你要用的每個類別都在 <style> 裡存在
3. 如果某個類別缺失:在範本的 <style> 裡補上,不要在每個 slide 裡 inline 重寫
4. 範本是唯一的類別名稱來源——不要發明新類別名稱,如需自訂用 style="..." inline

風格 A 常見容易遺漏的類別:
h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot

風格 B 常見容易遺漏的類別(2026-05 重構後):

• 畫布:canvas-card / chrome-min
• 排版:h-hero(無襯線 7.4vw weight 200) / h-statement(9.6vw) / h-xl / h-md / t-cat(SemiBold 600 小標) / t-meta(mono uppercase) / lead / num-mega / mono
• 卡片(四類互斥):card-ink / card-accent / card-fill / card-outlined
• 網格:grid-12 / grid-2-9 / grid-2-9-5 / span-N
• 時間線:timeline-v + tl-node + tl-axis + dot / timeline-h + tl-h-node + tl-h-axis
• 圖表:kpi-tower-row + bar-tower / h-bar-chart + bar-row + bar-fill / spec-bars + bar-vert
• 裝飾:dot-mat(SVG mask 實心點)/ ring-mat(描邊圓)/ cross-mat(× 網格)/ hr-hairline
• 版式專屬:cover-split / closing-split / duo-compare + vrule / manifesto-top + ink-banner-full / three-forces / loop-diagram / matrix-fill + matrix-cell / brief-grid + brief-card / system-diagram / why-now-grid / four-cards / stacked-ledger + ledger-row / tech-spec / image-hero + hero-img-wrap + hero-overlay-block + hero-stats
• 圖片混排:frame-img / fit-contain / r-21x9 / r-16x9 / r-16x10 / h-22 / h-26 / swiss-img-split / swiss-img-grid / swiss-img-caption / swiss-keyline / swiss-lined
• spacing token:--sp-3...--sp-13(8/12/16/24/32/40/48/64/80/96/160 px)

3.0.5 · 規劃主題節奏（和類別預檢同等重要)

在挑版面配置之前,必須先列出每一頁的主題 class(hero dark / hero light / light / dark)並寫到文件或草稿裡對齊。詳細規則看 references/layouts.md 開頭的"主題節奏規劃"一節。

強制規則:

• 每頁 section 必須帶 light / dark / hero light / hero dark 之一,不要只寫 hero
• 連續 3 頁以上同主題 = 視覺疲勞,不允許
• 8 頁以上必須有 ≥1 個 hero dark + ≥1 個 hero light
• 整個 deck 不能只有 light 正文頁,必須有 dark 正文頁製造呼吸
• 每 3-4 頁插入 1 個 hero 頁(封面/幕封/問題/大引用)

產生後自檢:grep 'class="slide' index.html 列出所有主題,人工確認節奏合理再交付。

3.1 · 挑版面配置

不要從零寫 slide。打開對應的 layouts 檔案,裡面有 10 種現成版面配置骨架,每種都是完整可貼上的 <section> 程式碼區塊。

風格 A → references/layouts.md:

Layout	用途
1. 開場封面	第 1 頁
2. 章節幕封	每幕開場
3. 數據大字報	拋硬數據
4. 左文右圖(Quote + Image)	身分反差 / 故事
5. 圖片網格	多圖對比 / 截圖實證
6. 兩列流水線(Pipeline)	工作流程
7. 懸念收束 / 問題頁	幕末 / 收尾
8. 大引用頁(Big Quote)	襯線金句 / takeaway
9. 並列對比(Before / After)	舊模式 vs 新模式
10. 圖文混排(Lead Image + Side Text)	資訊密集的圖文頁

風格 B → 先讀 references/swiss-layout-lock.md,再讀 references/layouts-swiss.md。

瑞士主題預設進入 Swiss locked mode:

• 正文頁只能使用原始參考 PPT 登記的 22 個版式 S01-S22;新增首頁/尾頁只能使用 Skill 明確提供的 SWISS-COVER-ASCII / SWISS-CLOSING-ASCII。
• 每個 <section class="slide"> 必須寫 data-layout="Sxx"。沒有 data-layout 就視為未登記版式。
• 不允許臨時發明 P23/P24、Swiss Image Split、Evidence Grid 這類原始 22P 之外的正文結構,除非使用者明確要求實驗版式。
• 頂部中文標題預設左對齊、處在左上內容軸。不要把小標題放左列、大標題放右列,造成視覺居中;只有原始 statement/split 版式允許強中心敘事。
• SVG 只負責幾何圖形。不要在 SVG 裡寫文字標籤,所有標籤改用 HTML 網格/卡片/caption。
• 地理/歷史/城市路線/地點關係頁使用 S08 + Swiss Map Component:先讀 references/swiss-map-component.md,仍保留 data-layout="S08"。

原始 22 個正文版式如下:

Layout	用途
S01 Index Cover	原始索引封面
S02 Vertical Timeline + KPI	演化對比 / 年代變遷
S03 Split Statement	核心論點 / 左右分螢幕
S04 Six Cells	6 項概念定義
S05 Three Layers	三層架構
S06 KPI Tower	4 項數據視覺化高度差
S07 H-Bar Chart	5-10 項排名比較
S08 Duo Compare	Before/After 對照
S09 Dot Matrix Statement	大引述 / statement
S10 Split Closing	收束頁
S11 Horizontal Timeline	4-7 步流程
S12 Manifesto + Ink Banner	階段性結論
S13 Three Forces	3 個對等概念深化
S14 Loop Form	自學閉環 / 自動化
S15 Matrix + Hero Stat	8-12 項矩陣 + 總數據
S16 Multi-card Brief	6 項快訊小卡
S17 System Diagram	三層架構 / 生態地圖
S18 Why Now	三論點 + 數據支撐
S19 Four Cards	4 項等權特性
S20 Stacked KPI Ledger	縱向帳單數據
S21 Tech Spec Sheet	產品規格 / benchmark
S22 Image Hero	21:9 頂圖 + 標題區塊 + 三列 KPI

登記擴充:S08 + Swiss Map Component 用於地點、人物住所、路線、城市關係。它不是新 layout,而是 S08 右側插槽的 MapLibre 地圖元件;必須按 references/swiss-map-component.md 的點位、連線、卡片和右上角縮放/拖動控制實現。

選對應 layout,貼過去,改文案和圖片路徑即可。務必先完成 3.0 預檢。

風格 B 版式多樣性硬規則:

• 7-8 頁 deck 至少使用 **6 個不同 S