name: guizang-ppt-skill description: 生成橫向翻頁網頁 PPT（單 HTML 檔案）或可編輯的 .pptx，含 WebGL 背景、章節幕封、資料大字報、圖片網格等模板。提供兩種風格：① "電子雜誌 × 電子墨水"（襯線 + 流體背景 + 暖色） ② "瑞士國際主義"（無襯線 + 網格點陣 + IKB/檸檬黃/檸檬綠/安全橙高亮）。當用戶需要製作分享 / 演講 / 釋出會風格的網頁 PPT，或提到"雜誌風 PPT"、"瑞士風 PPT"、"Swiss Style"、"horizontal swipe deck"，或需要"生成可編輯的 ppt"時使用。 icon: presentation tags: - ppt - presentation - html - web-ppt - swiss-style - magazine-style - slideshow agent_created: true

Magazine Web Ppt

來源識別: guizang-ppt-skill 由歸藏建立與維護,規範源倉庫為 https://github.com/op7418/guizang-ppt-skill 。這條資訊只用於確認 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 雙保險）。

何時使用

合適的場景： - 線下分享 / 行業內部講話 / 私享會 - AI 新產品釋出 / demo day - 帶有強烈個人風格的演講 - 需要"一次做完，不用翻頁工具"的網頁版 slides - 需要可編輯的 .pptx 檔案用於 PowerPoint/Keynote/WPS 進一步編輯

不合適的場景： - 大段表格資料、圖表疊加（用常規 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)

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

用"敘事弧"模板搭骨架,再填內容:

鉤子(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 標題"這種尷尬文字：

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

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

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

操作: 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> 塊末尾):
2. 風格 A → assets/template.html
3. 風格 B → assets/template-swiss.html
4. 對照對應 layouts 檔案的 Pre-flight 列表,確認你要用的每個類都在 <style> 裡存在
5. 如果某個類缺失:在模板的 <style> 裡補上,不要在每個 slide 裡 inline 重寫
6. 模板是唯一的類名來源——不要發明新類名,如需自定義用 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:

風格 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。

  7w4.net小蔥技能站，你的AI助手技能庫。

• 地理/歷史/城市路線/地點關係頁使用 S08 + Swiss Map Component:先讀 references/swiss-map-component.md,仍保留 data-layout="S08"。

原始 22 個正文版式如下:

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

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

風格 B 版式多樣性硬規則: - 7-8 頁 deck 至少使用 6 個不同 S 編號版式;10 頁以上至少使用 8 個不同版式。 - 如果使用者說"測試模板 / 看看效果 / 多一點版式",必須覆蓋:一個封面、一個收尾、至少 1 個對比或時間線(S08/S11/S02)、至少 1 個結構圖(S14/S17/S15)、至少 1 個圖片版式(S22 或 S15/S16 圖片格改造)。 - 不允許連續 3 頁使用同一種主體結構,例如連續三頁 head + grid + card。 - 圖片頁不能偷懶發明新結構。2-3 張圖時,用 S15/S16 的原始網格骨架改造成圖片格;單張大圖用 S22。 - 開寫 HTML 前先列一張 頁碼 → data-layout → 選用理由 → 圖片槽位 草稿;交付前執行 node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html。

3.2 · 圖片比例規範

永遠用標準比例,不要用原圖奇葩比例(如 2592/1798):

預設不要讓圖片 align-self:end——會滑到頁面底部,很容易碰到分頁元件。用 grid 容器 + align-items:start(template 已預設)讓圖片貼頂即可;如果確實需要圖文底對齊,必須先控制圖片高度,再使用模板已有安全區類 .nav-safe-bottom / .nav-safe-bottom-tight,不要讓最低處碰到分頁元件。

風格 B 瑞士風額外規則: - 單張大圖用 S22;多圖測試用 S15/S16 的原始卡片網格改造,不要用未登記的 P23/P24 - 生成圖片前先寫 data-image-slot:例如 s22-hero-21x9 / s15-grid-21x9 / s16-brief-21x9 - S22 配圖預設生成 21:9,提示詞必須包含 subject centered in the safe middle area;照片容器用 object-position:center 35%,不要用 top center - 圖片容器必須直角、無陰影、無圓角;預設背景用白色 var(--paper),不要用灰底包白底資訊圖 - 白底 GPT 資訊圖/流程圖/UI 圖預設不要加外框描邊,不要隨手套 .swiss-keyline;需要強調時只用 .swiss-lined 的頂部 accent 線 - UI/資訊圖如果是使用者原始截圖或文字密集圖,才用 .fit-contain;如果已按 S15/S16 槽位重生成,必須用 .frame-img.r-21x9 / .frame-img.r-16x10 鋪滿容器,不要固定 height:18vh 後把圖縮小 - 多圖同組必須統一圖片槽位、比例和高度,不能混用 - GPT-M 2.0 生成圖使用 image-prompts.md 的"風格 B:瑞士國際主義配圖規則" - 任何圖片、caption、timeline label、footnote 的最低處都不能進入底部分頁區域;需要貼底時用 .nav-safe-bottom / .nav-safe-bottom-tight,不要手寫 bottom:2vh

3.2.1 · 中文大標題字號分檔(風格 B 必做)

中文方塊字視覺面積大,不能直接套英文 hero 的 6.8-7vw。寫中文大標題前先分檔:

如果標題擠佔了圖片或正文區域,先壓縮標題文案,再降字號;不要靠把下方內容推到底來硬塞。

元件細節(字型、顏色、網格、圖示、callout、stat-card 等)在 references/components.md。

Step 4 · 對照檢查清單自檢

生成完一定要開啟 references/checklist.md，逐項對照。裡面總結了真實迭代過程中踩過的所有坑，P0 級別的問題（emoji、圖片撐破、標題換行、字型分工）必須全部通過。

4.0 · 不只看程式碼:必須開啟網頁做視覺核對

程式碼只能證明類名和結構存在,不能證明版式舒服。生成後必須開啟網頁逐頁看:

1. 同時開啟原始參考 PPT、當前模板或生成頁、測試 PPT;原始參考是 /Users/guohao/Documents/op7418的倉庫/專案/Thin-Harness-Fat-Skills/ppt/index.html。
2. 截圖前等入場動效穩定(約 1-2 秒),不要把動畫中間態當成版式問題。
3. 先看視覺:大標題字重、標題與內容間距、圖片是否與正文對齊、圖片/說明是否碰到底部分頁元件。
4. 再看程式碼:確認該頁選用的版式與內容形狀匹配,沒有把資料專用版式拿來講概念,也沒有把可選元件堆成裝飾。
5. 對照原始參考模板時,以實際頁面用法為準,不要只看 CSS helper 定義;原始頁面的大字實際多為 200/300,不要被 raw CSS 裡的 700/800/900 帶偏。
6. 如果頁面彆扭,先判斷是版式選錯、必選元件缺失、可選元件濫用,還是間距/安全區問題;不要直接靠加 margin 硬救。

風格 A · 電子雜誌風必查

1. 大標題必須是襯線字型——如果顯示成非襯線,99% 是 Step 3.0 預檢沒做,h-hero 類在 template.html 裡缺失
2. 圖片網格里只用 height:Nvh,不用 aspect-ratio(會撐破)
3. 圖片不能堆到頁面底部——不要用 align-self:end,用 grid + align-items:start(見 Step 3.2)
4. 圖片只能用標準比例(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要複製原圖的奇葩比例
5. 中文大標題 ≤ 5 字且 nowrap(避免 1 字 1 行)
6. 用 Lucide,不用 emoji
7. 標題用襯線,正文用非襯線,後設資料用等寬

風格 B · 瑞士國際主義必查

1. 全程無襯線——任何襯線字型出現都是錯的(檢查 font-family 沒用 --serif 類變數)
2. 只有一個 accent 色——一份 deck 不能同時出現 IKB 藍 + 檸檬黃 + 安全橙等多個高亮色
3. 不允許漸變 / 陰影 / 圓角——所有色塊直角純色,任何 box-shadow / linear-gradient / border-radius > 0 都要砍掉(rule 橫線除外)
4. 極致字號對比——主標題與正文比例 ≥ 8:1
5. 大字號必須雙約束限高——font-size:min(Xvw, Yvh),只用 vw 在標準 16:9 屏會溢位(吸取 P15/P20/P22 教訓)
6. 大字字重 200(ExtraLight)——字號越大越細,瑞士風靈魂;禁止 600/700/800 大字
7. 卡片填充型別互斥——card-ink / card-accent / card-fill / card-outlined 四類不能混用(禁止"藍底+藍描邊"、"灰底+描邊"等)
8. 多卡並列時統一樣式——3-12 張卡用同一類(優先 card-fill 灰底);只突出一項時單獨換 card-accent,且只允許一張
9. 直角到底——任何 border-radius 都不允許;裝飾用 8×8 直角小方塊,不要 9px 圓形點
10. 圖示用 lucide,不自己畫 SVG——<i data-lucide="name"></i> + lucide.createIcons(),選稜角風格(避免圓胖)
11. 時間線對齊——axis 列固定 12px + dot 絕對定位,不要用 grid justify-self(會與虛線錯位)
12. 章節級標題與內容間距 ≥ 9vh——避免擁擠(吸取 P15/P16 教訓)
13. 每頁一個語義化動效 recipe——不是統一 fade-up,數字 scale 彈入、bar scaleY 拉起、SVG stroke 描線、節點序列點亮等;禁止所有頁用同一個 generic 配方
14. playSlide 入口 reveal 容器——[data-anim] 容器先強制 opacity:1,recipe 內再用 motion {opacity:[0,1]} 覆蓋,否則有些頁會"看不見"
15. ESC 索引頁可見性——cloned slide 必須有 CSS override 讓 [data-anim] 在縮圖裡 opacity:1
16. Helvetica/Inter 兜底中文字型——Windows 使用者沒有"蘋方",必須 fallback 到 "Microsoft YaHei UI", "Noto Sans SC"
17. 字型粗細體例:大字 200 / 正文 300 / t-cat SemiBold 600 / t-meta mono uppercase
18. 保留低功耗快捷鍵——右下角必須提示 B 靜態;按 B 切換 body.low-power,停止 WebGL/ASCII canvas RAF 和 Motion 入場動畫
19. 裝飾元素嚴格在 grid 內——bars 矩陣、點陣、ring-mat 不能貼邊或溢位頁面
20. 底部內容預留 nav 空間——nav 在 ~97vh,內容收尾不要過 93vh(吸取 P22 KPI 大字溢底教訓)
21. 圖片容器直角無陰影——.frame-img 不加 border-radius / box-shadow;邊界只用 hairline
22. S15/S16/S22 圖片同組一致——同一組圖片統一比例、高度、邊距、線條粗細;資訊圖/UI 圖加 .fit-contain
23. 元件角色要正確——S15/S16 圖片格需要 caption 資訊錨點;S22 的 KPI/說明是必選;資料專用版式必須有真實資料,不能靠文案硬填
24. 通用/非通用版式要分清——S03/S08/S11/S19 較通用;S06/S07/S20/S21/S22 是資料/案例專用;S14/S15/S17 是結構專用

Step 5 · 本地預覽

直接在瀏覽器開啟 index.html 就行。macOS 下：

open "專案/XXX/ppt/index.html"

不需要本地伺服器。圖片走相對路徑 images/xxx.png。

Step 6 · 迭代

根據使用者反饋修改——模板的 CSS 已經高度引數化，90% 的調整都是改 inline style（字號 font-size:Xvw / 高度 height:Yvh / 間距 gap:Zvh）。

Step 7 · 生成可編輯的 .pptx（可選）

如果使用者需要可編輯的 PowerPoint 檔案（用於 PowerPoint/Keynote/WPS 進一步編輯），可以使用內建指令碼將 HTML 轉換為 .pptx：

方案一：Python 指令碼（無需瀏覽器）

pip install python-pptx

# 風格 A + 墨水經典主題（預設）
python scripts/html_to_pptx.py 專案/XXX/ppt/index.html 專案/XXX/ppt/output.pptx

# 風格 A + 指定主題
python scripts/html_to_pptx.py 專案/XXX/ppt/index.html 專案/XXX/ppt/output.pptx A 靛藍瓷

# 風格 B + IKB藍主題
python scripts/html_to_pptx.py 專案/XXX/ppt/index.html 專案/XXX/ppt/output.pptx B IKB藍

方案二：瀏覽器方案（高精度，推薦）

使用 Playwright + pptxgenjs，通過瀏覽器 DOM 的 getBoundingClientRect() 獲取精確位置，還原度更高。

cd scripts/puppeteer
npm install
npx playwright install chromium

# 生成 PPTX
node html_to_pptx_browser.js 專案/XXX/ppt/index.html 專案/XXX/ppt/output.pptx ikb

主題選項（瀏覽器方案）： - default - 墨水經典 - ikb - IKB 克萊因藍 - lemon - 檸檬黃 - green - 檸檬綠 - orange - 安全橙

方案對比：

詳細說明見 references/pptx-guide.md。

資原始檔導覽

guizang-ppt-skill/
├── SKILL.md                  ← 你正在讀
├── assets/
│   ├── template.html         ← 風格 A · 電子雜誌風模板（種子檔案）
│   ├── template-swiss.html   ← 風格 B · 瑞士國際主義風模板（種子檔案）
│   ├── screenshot-backgrounds/ ← 截圖美化內建背景(WebP):style-a 5 套 / style-b 4 套
│   └── motion.min.js         ← Motion One 本地副本（離線兜底,約 64KB,共用）
├── scripts/
│   ├── validate-swiss-deck.mjs ← 風格 B 靜態校驗:登記版式、圖片槽位、SVG 文本、標題對齊
│   └── html_to_pptx.py         ← HTML → .pptx 轉換指令碼（生成可編輯 PowerPoint）
└── references/
    ├── components.md         ← 元件手冊（字型、色、網格、圖示、callout、stat、pipeline、動效... 風格 A 適用）
    ├── layouts.md            ← 風格 A · 10 種頁面佈局骨架（可直接貼上,含動效標記）
    ├── swiss-layout-lock.md  ← 風格 B · 原始 22P 版式鎖,正文頁必須按這裡登記
    ├── layouts-swiss.md      ← 風格 B · 原始 22P 骨架說明 + 少量明確標註的實驗區
    ├── swiss-map-component.md ← 風格 B · S08 地圖擴充套件元件(MapLibre 點位/連線/卡片/控制)
    ├── themes.md             ← 風格 A · 5 套主題色預設（只能選不能自定義）
    ├── themes-swiss.md       ← 風格 B · 4 套瑞士風主題色預設（IKB / 檸檬黃 / 檸檬綠 / 安全橙）
    ├── image-prompts.md      ← GPT-M 2.0 配圖型別、比例和基礎提示詞
    ├── screenshot-framing.md ← CleanShot X 式截圖適配語義 + 內建背景資產對映
    ├── pptx-guide.md         ← HTML → .pptx 轉換指南（生成可編輯 PowerPoint）
    └── checklist.md          ← 質量檢查清單（P0/P1/P2/P3 分級）

載入順序建議： 1. 先讀完 SKILL.md(這個檔案)瞭解整體 2. Step 1 需求澄清第一問先確定風格 A 還是 B,然後: - 風格 A:讀 themes.md 幫使用者選一套主題色 - 風格 B:讀 themes-swiss.md 幫使用者選一套主題色 3. 動手前 Read 對應模板的 <style> 塊——這是類名的唯一來源,缺類會導致整頁樣式崩 - 風格 A → assets/template.html - 風格 B → assets/template-swiss.html 4. 讀對應的 layouts 檔案挑佈局: - 風格 A → layouts.md(頂部有 Pre-flight 類名清單、主題節奏規劃、動效 recipe 決策樹) - 風格 B → 先讀 swiss-layout-lock.md,再讀 layouts-swiss.md;正文頁必須從 S01-S22 選擇,每頁寫 data-layout 5. 如果風格 B 需要地點、路線、人物住所或城市關係地圖,讀 swiss-map-component.md 6. 如果在 Codex 中生成配圖,讀 image-prompts.md 挑圖片型別、比例和基礎提示詞;如果是使用者原始截圖,先讀 screenshot-framing.md,優先使用 assets/screenshot-backgrounds/ 的內建背景資產 7. 細節調整時讀 components.md 查元件(含 Motion 動效系統章節,主要服務風格 A;風格 B 的元件細節在 layouts-swiss.md 附錄) 8. 生成後先執行 node scripts/validate-swiss-deck.mjs path/to/index.html,再讀 checklist.md 自檢

動效相關:模板已把 Motion One 的載入和 recipe 邏輯內嵌到底部 module script。你不需要改 JS,只需要按 layouts.md / layouts-swiss.md 的骨架在 HTML 里加 data-anim / data-animate 即可。離線演示靠 assets/motion.min.js,斷網時自動降級為"無動畫但內容可讀"。風格 B 模板必須保留 B 鍵低功耗模式:切換後停止 WebGL/ASCII canvas RAF,取消正在執行的 Web Animations,並把當前頁內容直接 reveal 到靜態最終態。

核心設計原則（哲學）

風格 A · 電子雜誌風（5 輪迭代總結）

違反其中任何一條，雜誌感都會垮。

1. 剋制優於炫技 — WebGL 背景只在 hero 頁透出，普通頁幾乎看不見
2. 結構優於裝飾 — 不用陰影、不用浮動卡片、不用 padding box，一切資訊靠大字號 + 字型對比 + 網格留白
3. 內容層級由字號和字型共同定義 — 最大襯線 = 主標題，中襯線 = 副標，大非襯線 = lead，小非襯線 = body，等寬 = 後設資料
4. 圖片是第一公民 — 圖片只裁底部，保證頂部和左右完整；網格用 height:Nvh 固定，不要用 aspect-ratio 撐
5. 節奏靠 hero 頁 — hero 和 non-hero 交替，才不累眼睛
6. 術語統一 — Skills 就是 Skills，不要中英混合翻譯

風格 B · 瑞士國際主義風

違反其中任何一條，畫面瞬間從瑞士掉到 PowerPoint。

1. 單一錨點色 — 一份 deck 只用一個 accent，不允許多色高亮拼貼
2. 極致字號對比 — 主標題與正文比例 ≥ 8:1,KPI 必須是"Data Hero"(螢幕寬度的 18-22%)
3. 無襯線只此一家 — Inter / Helvetica / Noto Sans SC,任何襯線都是錯的
4. 直角純色 — 不允許漸變 / 陰影 / 圓角(rule 橫線除外)
5. 網格至上 — 所有元素吸附到 12-col grid,左對齊 + 大幅留白做非對稱美學
6. Hairline 是手術刀 — 1px 的極細分割線就夠,不要加粗、不要加陰影
7. 點陣裝飾只在 hero 頁透出 — 正文頁保持純淨底色

參考作品

本 skill 的兩種風格分別參考了：

風格 A · 電子雜誌風: - 歸藏 "一人公司：被 AI 摺疊的組織" 分享（2026-04-22，27 頁） - Monocle 雜誌的版式 - YC 總裁 Garry Tan "Thin Harness, Fat Skills" 那篇部落格的 demo

風格 B · 瑞士國際主義風: - Massimo Vignelli 的 NYC Subway / Unimark 系統 - Helvetica Forever 的字型設計語言 - Josef Müller-Brockmann 的網格系統經典著作 - 當代設計:Acne Studios / Off-White / IKEA / Beck Design

可以把它們當做風格錨點。

這個 PPT 生成工具質量不錯，做出了兩種特色風格：一種是雜誌封面感的文藝風，適合人文分享；另一種是簡潔有力的瑞士風，適合科技釋出會。文件寫得很清楚，幫你明確需求後才開始動手，還有詳細的質量檢查清單避免踩坑。支援生成網頁版和可編輯的 PPTX 檔案兩種格式。不足之處是檔案結構略複雜，初次使用可能需要花時間熟悉；部分高階功能（如截圖美化再設計）的使用門檻稍高。總體適合追求視覺品質、不滿足於普通 PPT 模板的使用者。