name: video-visual-styles slug: video-visual-styles displayName: 影片視覺風格庫 description: 影片視覺風格模組庫 — 16種產品資訊圖風格 → HTML/CSS 影片模板。用於把 product-infographic-styles 的16種風格（手工紙藝/3D粘土/黑板粉筆/孟菲斯/實驗室藍圖等）轉化為 HyperFrames 可渲染的 HTML 模板，嵌入到模組化影片引擎的影片視覺風格維度中。觸發詞：影片風格、視覺風格、做影片換風格、產品資訊圖風格、16種風格。 version: 1.0.0 author: AtomCode tags: [影片, 視覺, 風格, 模板]

影片視覺風格模組庫（16種產品資訊圖風格 → 影片模板）

來源：Word Buddy 的 product-infographic-styles 技能庫 融合目標：把這16種風格變成影片生產的視覺風格模組，每種風格對應一套 HTML/CSS 模板 技術標準：HyperFrames 可渲染（1080×1920 豎屏，GSAP 動畫，≤25秒）

融合架構

模組化影片引擎（現有）
├── A. 鉤子模組（35個）← 不變
├── B. 資訊模組（37個）← 不變
├── C. 風格模組（8個語音風格）← 擴充為"語音風格+視覺風格"雙維度
│   ├── C1. 語音風格（聊天式/算賬式/故事式...）← 原有
│   └── C2. 視覺風格（16種產品資訊圖風格）← 新增 ⭐
├── D. 結尾模組（6個）← 不變
└── E. 熱點模組（5類）← 不變

視覺風格選擇：使用者可以說"用黑板粉筆風格做影片"或"要孟菲斯扁平感的"，AI 自動匹配對應 HTML 模板。

16種風格 → 影片視覺模板對映

核心設計原則

每種視覺風格 = 一套 CSS 變數 + 背景紋理 + 字型效果 + 卡片樣式 + 裝飾元素 + 動畫節奏

⭐ = 鑫源光電高頻適用場景

想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。

模板技術規範

每個視覺風格模板的結構

<!-- 示例：VS05 黑板粉筆風格 -->
<style>
  /* 1. CSS 變數定義 */
  :root {
    --bg-color: #2d5a27;        /* 黑板綠 */
    --text-color: #f5f5f0;      /* 粉筆白 */
    --accent-color: #ffeb3b;    /* 黃色粉筆 */
    --card-bg: rgba(255,255,255,0.08);
    --font-main: 'Courier New', monospace;  /* 手寫感 */
  }

  /* 2. 背景紋理 */
  body {
    background: 
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
      linear-gradient(135deg, #2d5a27, #1a3a15);
  }

  /* 3. 卡片樣式 */
  .chalk-card {
    background: var(--card-bg);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;           /* 輕微圓角，不像粘土那麼圓 */
    font-family: var(--font-main);
  }

  /* 4. 裝飾元素 */
  .chalk-dust { /* 粉筆灰效果 */ }
  .hand-drawn-arrow { /* 手繪箭頭 */ }
</style>

通用技術要求（所有風格共享）

風格選擇指南

按內容型別匹配視覺風格

按釋出平臺匹配

與現有 P0 標準的對比

核心價值：P0 標準是"保底風格"（任何時候都不會出錯），新視覺風格模組是"進階選項"（針對特定內容和平臺做差異化）。

⚠️ P0 vs 新風格決策規則（2026-07-02 新增 ⭐⭐⭐）

核心認知：P0是保底，新風格是進階。不是"哪個更好"，是"什麼時候用哪個"。

混合使用模式： - 模式A：P0打底+新風格點睛（鉤子用P0、科普用黑板、資料用孟菲斯、結尾用P0） - 模式B：系列影片風格輪換（第1集黑板、第2集藍圖、第3集孟菲斯） - 模式C：平臺差異化（影片號用孟菲斯/藍圖、抖音用漫畫/可愛、朋友圈用莫蘭迪/手工）

實施計劃

Phase 1：高優先順序風格模板（5個）⭐⭐⭐

進度（2026-07-02）: 5/5 全部完成 ✅

全部通過質檢：1080×1920 / 30fps / AAC音訊 / MD5幀差異校驗 渲染耗時基準：標準渲染~20秒，VS18低記憶體模式~30秒，產品大圖卡模式~29秒

Phase 2：中優先順序風格模板（5個）⭐⭐

1. VS08 復古學術 — 高階旗艦
2. VS01 手工紙藝 — 走心種草
3. VS19 莫蘭迪手賬 — 精緻文藝
4. VS03 日式可愛 — 少女/快消
5. VS21 馬卡龍手繪 — 溫馨教育

Phase 3：剩餘6種風格

S02 3D粘土、S04 水彩繪本、S11 摺紙幾何、S12 8-bit畫素、S17 樂高積木、S20 70年代復古

模板檔案結構

~/.hermes/skills/video-visual-styles/
├── SKILL.md                                    ← 本檔案
├── references/
│   ├── style-mapping.md                        ← 16種風格→影片場景對映表
│   ├── template-vs05-chalkboard.md             ← VS05 黑板粉筆模板
│   ├── template-vs09-memphis.md                ← VS09 孟菲斯模板
│   ├── template-vs18-lab-blueprint.md          ← VS18 實驗室藍圖模板
│   ├── template-vs07-pop-comic.md              ← VS07 漫畫波普模板
│   ├── template-vs16-knolling.md               ← VS16 排列平鋪模板
│   └── ...（後續Phase 2/3）
├── templates/
│   ├── vs05-chalkboard.html                    ← ✅ 黑板粉筆（已渲染驗證，1.8MB）
│   ├── vs09-memphis.html                       ← ✅ 孟菲斯（已渲染驗證，535KB）
│   ├── vs16-knolling.html                      ← ✅ 排列平鋪（已渲染驗證，268KB）
│   ├── vs18-lab-blueprint.html                 ← ✅ 實驗室藍圖（已渲染驗證，1.1MB，需LOW_MEMORY_MODE）
│   ├── vs07-pop-comic.html                     ← ✅ 漫畫波普（已渲染驗證，853KB）
│   └── ...（後續Phase 2/3）
└── scripts/
    └── style-selector.py                       ← 風格選擇輔助指令碼

與 product-infographic-styles 的關係

互補關係： - product-infographic-styles 生成靜態產品圖（朋友圈配圖、公眾號封面、產品目錄） - video-visual-styles 生成動態影片（影片號、抖音、朋友圈影片） - 兩者共用同一套16種風格的視覺語言，保持品牌一致性

使用示例

使用者說："用黑板粉筆風格做個鋼化膜科普影片"

AI 執行流程： 1. 從 module-library 選鉤子（如 H14 曲面屏翹邊痛點） 2. 從 module-library 選資訊（如 I22 曲面膜翹邊原理） 3. 從 module-library 選語音風格（S04 教學式） 4. 從 video-visual-styles 選視覺風格（VS05 黑板粉筆） ← 新增 5. 從 module-library 選結尾（C04 教學式結尾） 6. 載入 templates/vs05-chalkboard.html 模板 7. 替換文案內容 8. 生成配音 + HyperFrames 渲染

使用者說："我要做一批產品目錄影片，要孟菲斯風格"

AI 執行流程： 1. 選資訊模組：I01-I10（各系列膜） 2. 選視覺風格：VS09 孟菲斯扁平 ← 多品展示最佳 3. 載入 templates/vs09-memphis.html 模板 4. 批次生成（每個產品一個影片，模板不變只換內容）

注意事項

1. CSS 相容性：HyperFrames 基於 Chromium，不支援 backdrop-filter 的部分特性，用 background: rgba() 替代
2. 字型限制：不能用 PingFang SC/Noto Sans SC（編譯超時），用 Inter/Arial 回退
3. 動畫簡化：複雜3D變換（rotateX/Y）在 HyperFrames 中可能不支援，優先用 opacity+y+scale
4. 檔案大小：紋理背景（如牛皮紙、水彩）如果用 CSS 漸變模擬，檔案小；如果用圖片，需壓縮到 100KB 以內
5. 風格輪換：同一系列影片不要連續用同一種視覺風格，避免觀眾審美疲勞
6. ⚠️ 時長應匹配內容，不固定22秒（2026-07-02 新增 ⭐⭐⭐）：
7. 4場景影片（鉤子→引數→賣點→品牌）= 12秒足夠，每個場景2-3秒
8. 22秒=浪費渲染時間（每個22秒影片要15-17秒渲染），使用者明確要求"按需定時長"
9. 簡單內容10-12秒，中等內容15秒，複雜內容20秒

10. 模板中 data-duration 設為實際需要的秒數，不要預設22

11. ⚠️ 影片必須帶配音（2026-07-02 新增 ⭐⭐⭐）：

12. 使用者要求"有畫面、有聲音、有文字"才是完整體驗
13. Edge-TTS 生成配音 → FFmpeg 混合到影片
14. 配音文案 = 每個場景一句核心話術，總字數控制在 40-60 字（12秒配音約48字，按4字/秒）
15. Edge-TTS 命令：edge-tts --voice zh-CN-XiaoxiaoNeural --rate="-10%" --text "文案" --write-media voice.wav

16. FFmpeg 混合：ffmpeg -i video.mp4 -i voice.wav -c:v copy -c:a aac -af "volume=0.9" -shortest output.mp4

17. ⚠️ 靜態圖 ≠ 影片模板：skr 生成的 HTML（900×600 橫屏單頁）不能直接複用為 HyperFrames 影片模板。影片模板需要 1080×1920 豎屏 + 4個 scene 依次切換 + GSAP 時間線。每次做新風格影片模板都要從零寫 HTML。

⚠️ 已知陷阱

⚠️ HyperFrames DOM節點預算（2026-07-02 新增 ⭐⭐⭐）

問題：HTML中DOM節點過多 → Set maximum size exceeded 記憶體溢位，即使低記憶體模式也不行。 根因：5個場景×每個場景多個div（裝飾元素、卡片、標籤等）→ 750幀每幀都要渲染整個DOM樹。 修復： 1. 裝飾元素用CSS類代替div：<div class="dot d1"></div> 代替 <div class="memphis-dot"></div><div class="memphis-line"></div> 2. 每個場景最少DOM節點：場景容器 + 標題 + 卡片 + 卡片內元素，越少越好 3. 用CSS偽元素或背景：能寫CSS的不用額外div 4. 產品大圖卡模式：產品圖片+描述+標籤放在一個大card內，而不是分散多個元素 5. 如果仍然OOM：減少場景數（4→3），或降低時長（30→25） 適用範圍：所有HyperFrames渲染的HTML影片模板 驗證方法：先數DOM節點，<30個節點安全，30-50個有風險，>50個大機率OOM

⚠️ VS18藍圖渲染OOM（2026-07-02）

問題：repeat:-1（無限迴圈）+ 複雜GSAP動畫 → Set maximum size exceeded 記憶體溢位 修復： 1. repeat:-1 → repeat:3（有限次數） 2. 渲染時加環境變數：PRODUCER_LOW_MEMORY_MODE=true bash render.sh 3. 或使用 --workers 1 限制併發 適用範圍：所有含 repeat:-1 的GSAP動畫（不僅是藍圖風格）

⚠️ CSS transform與GSAP動畫衝突（2026-07-02）

問題：元素CSS中寫了 transform: scale(X)，GSAP又動畫同一個屬性 → GSAP覆蓋整個transform，丟失CSS中的translate/center定位 修復：CSS中不要寫 transform，全部用GSAP的 fromTo() 或 to() 控制 適用範圍：所有視覺風格模板

⚠️ 檔案大小差異巨大（2026-07-02）

實測Phase1五個風格檔案大小： - VS16排列平鋪：268KB（純白背景+少量色塊，壓縮率極高） - VS09孟菲斯：535KB（白色背景+幾何色塊） - VS07漫畫波普：853KB（網點紋理+粗輪廓） - VS18實驗室藍圖：1.1MB（深藍底色+網格線） - VS05黑板粉筆：1.8MB（綠色紋理+粉筆灰效果）

經驗：背景越複雜（紋理/漸變/粒子），檔案越大。純白背景+幾何圖形最小。

⚠️ HyperFrames 版本相容性（2026-07-07 ⭐⭐⭐⭐⭐ 致命）

問題：npx hyperframes render . 在 0.7.38+ 版本全部報 HierarchyRequestError: Only one element on document allowed，0.7.37 正常。 根因：0.7.38+ 的 Chromium 渲染引擎對 DOM 結構校驗更嚴格，<div id="root"> 外的巢狀結構導致 insertBefore 失敗。 修復： 1. 始終用 npx hyperframes@0.7.37 渲染，不要用最新版 2. 模板結構必須：<div id="root"> 包裹所有內容，場景用 #root .s1 選擇器 3. 不要在外層再用 <div id="root"> 套一層（雙重 root 會導致 HierarchyRequestError） 適用範圍：所有 HyperFrames 渲染的 HTML 影片模板 驗證方法：渲染前 npx hyperframes@0.7.37 render . --output renders/test.mp4 先試跑一版

⚠️ edge-tts 雙 Python 環境問題（2026-07-07 ⭐⭐⭐⭐）

問題：hermes venv 的 edge-tts 不支援中文語音名（zh-CN-XiaoxiaoNeural），homebrew python3.14 的 edge-tts 報 asyncio 錯誤但檔案已生成。 根因：兩個 Python 環境的 edge-tts 版本不同（venv=3.11/舊版 vs homebrew=3.14/新版），asyncio.run(main()) 在 3.14 中 main 不是 coroutine。 修復： 1. 用 homebrew python3.14 呼叫 edge_tts：/opt/homebrew/opt/python3/bin/python3.14 -c 'import asyncio; from edge_tts.util import main; asyncio.run(main())' 2. 語音名必須用 zh-CN-XiaoxiaoNeural（中文 locale），不是 XiaoxiaoNeural（英文 locale） 3. 如果 s2/s3 生成 0KB，重新生成一次（asyncio 報錯但檔案已寫入） 適用範圍：所有需要 edge-tts 生成中文配音的場景

⚠️ VS09 孟菲斯模板標準結構（2026-07-07 ⭐⭐⭐⭐⭐ 新增）

最佳實踐：從 vs09-memphis-v7 提取的標準模板結構，所有新影片基於此結構修改。 關鍵特徵： - <div id="root"> 包裹全部場景 - 場景選擇器：#root .s1, #root .s2, #root .s3, #root .s4 - GSAP 時間線：tl.set('#root .s1', {opacity:1}) 開頭，tl.to('#root .s1', {opacity:0}) 結尾 - 裝飾元素：.deco dc1/dc2/dc3 三個靜態裝飾 - 場景過渡：每個場景先 set(opacity:1) 再動畫子元素，最後 to(opacity:0) 轉場 適用範圍：所有 VS09 孟菲斯風格影片

⚠️ HyperFrames 版本相容性（2026-07-07 ⭐⭐⭐⭐⭐ 致命）

問題：npx hyperframes render . 在 0.7.38+ 版本全部報 HierarchyRequestError: Only one element on document allowed，0.7.37 正常。 根因：0.7.38+ 的 Chromium 渲染引擎對 DOM 結構校驗更嚴格，<div id="root"> 外的巢狀結構導致 insertBefore 失敗。 修復： 1. 始終用 npx hyperframes@0.7.37 渲染，不要用最新版 2. 模板結構必須：<div id="root"> 包裹全部內容，場景用 #root .s1 選擇器 3. 不要在外層再用 <div id="root"> 套一層（雙重 root 會導致 HierarchyRequestError） 適用範圍：所有 HyperFrames 渲染的 HTML 影片模板 驗證方法：渲染前 npx hyperframes@0.7.37 render . --output renders/test.mp4 先試跑一版

⚠️ edge-tts 雙 Python 環境問題（2026-07-07 ⭐⭐⭐⭐）

問題：hermes venv 的 edge-tts 不支援中文語音名（zh-CN-XiaoxiaoNeural），homebrew python3.14 的 edge-tts 報 asyncio 錯誤但檔案已生成。 根因：兩個 Python 環境的 edge-tts 版本不同（venv=3.11/舊版 vs homebrew=3.14/新版），asyncio.run(main()) 在 3.14 中 main 不是 coroutine。 修復： 1. 用 homebrew python3.14 呼叫 edge_tts：/opt/homebrew/opt/python3/bin/python3.14 -c 'import asyncio; from edge_tts.util import main; asyncio.run(main())' 2. 語音名必須用 zh-CN-XiaoxiaoNeural（中文 locale），不是 XiaoxiaoNeural（英文 locale） 3. 如果 s2/s3 生成 0KB，重新生成一次（asyncio 報錯但檔案已寫入） 適用範圍：所有需要 edge-tts 生成中文配音的場景

⚠️ VS09 孟菲斯模板標準結構（2026-07-07 ⭐⭐⭐⭐⭐ 新增）

最佳實踐：從 vs09-memphis-v7 提取的標準模板結構，所有新影片基於此結構修改。 關鍵特徵： - <div id="root"> 包裹全部場景 - 場景選擇器：#root .s1, #root .s2, #root .s3, #root .s4 - GSAP 時間線：tl.set('#root .s1', {opacity:1}) 開頭，tl.to('#root .s1', {opacity:0}) 結尾 - 裝飾元素：.deco dc1/dc2/dc3 三個靜態裝飾 - 場景過渡：每個場景先 set(opacity:1) 再動畫子元素，最後 to(opacity:0) 轉場 適用範圍：所有 VS09 孟菲斯風格影片

⚠️ 字號可讀性標準（2026-07-02 ⭐⭐⭐⭐⭐ 關鍵）

問題：Phase1五個影片的小標題和正文/描述字號太小，在手機豎屏1080x1920上看不清。 根因：參考舊模板字號體系，沒有考慮豎屏手機上正文至少需要36-44px才可讀。

強制字號標準（所有1080x1920影片模板必須遵守）：

檢查方法：渲染前 grep -oE 'font-size:[^;"]+' index.html \| grep -oE '[0-9]+' \| sort -n \| head -3，確認最小字號≥28px，正文字號≥36px。

修復記錄：Phase1五個影片全部在21:08-21:12重渲染，正文最小字號從18-30px提升到26-44px。

此 skill 是 product-infographic-styles 和 modular-video-engine 的橋樑，把靜態產品圖風格轉化為動態影片視覺風格。

參考資源

• 模板參考文件: references/template-vs05-chalkboard.md — VS05 黑板粉筆影片模板
• 模板參考文件: references/template-vs09-memphis.md — VS09 孟菲斯扁平影片模板
• 模板參考文件: references/template-vs18-lab-blueprint.md — VS18 實驗室藍圖影片模板
• 風格對映表: references/style-mapping.md — 16種風格→影片場景對映（按內容型別/平臺/月度輪換）
• 上游風格源: ~/.workbuddy/skills/product-infographic-styles/ — Word Buddy 的 product-infographic-styles 技能庫，16種風格的英文提示詞和參考圖（ImageGen 靜態產品圖）
• 下游應用: 本 skill 的視覺風格通過 HTML/CSS/GSAP 轉化為 HyperFrames 可渲染的 MP4 影片（1080×1920 豎屏）
• 渲染報告: references/render-vs05-09-16-validation.md — VS05/VS09/VS16 批次渲染驗證報告（模板結構、關鍵教訓、時長控制）
• 渲染報告: references/render-vs05-chalkboard-report.md — VS05黑板粉筆第一條影片渲染驗證報告（2026-07-02）
• Phase1實戰經驗: references/phase1-render-experience.md — 5個風格全部渲染驗證記錄（檔案大小基準、GSAP陷阱、CSS衝突、配音字數）⭐⭐⭐
• Phase4模世界品牌影片: references/phase4-mosze-brand-videos.md — 4個品牌系列影片（F晶鑽/S防窺/K殼瓷/O電鍍）標準化生產記錄（HyperFrames版本、edge-tts雙Python、模板結構）⭐⭐⭐
• 產品圖片提取: references/mmbiz-image-extraction.md
• 產品圖片提取: references/mmbiz-image-extraction.md — 從公眾號文章HTML提取產品圖片URL的方法（mmbiz.qpic.cn域名特徵、提取命令、已知圖片列表）
• 融合操作手冊: references/fusion-manual.md — 16種風格×P0標準×模組化引擎完整融合方案（2026-07-02新增）

這套視覺風格庫質量較好，提供了16種不同風格的影片模板選擇，能滿足不同產品和平臺的展示需求。已完成的黑板粉筆、孟菲斯扁平等5種模板效果專業，文件中的風格選擇指南實用易懂。不足是可選風格數量有限，文件部分內容有重複，建議增加更多風格模板以豐富選擇。