hyperframes-creative

HyperFrames Creative

品牌、節奏、風格、旁白與構圖指導。在 hyperframes-core 的技術合約就緒後使用。

如需動畫模式、場景藍圖、轉場效果及 CSS 標記效果，請使用 hyperframes-animation — 此技能刻意不包含動畫。

進行任何非瑣碎的構圖前，請先閱讀以下兩份文件 — 它們會覆蓋網頁直覺：

• references/house-style.md — 「解讀提示，產生真實內容」、懶惰預設清單，以及背景/前景圖層配方。這是將字面上的重新造型轉變為 概念 的關鍵。
• references/video-composition.md — 影片媒介密度、比例、前景元資料（「製作而非生成」的細節：資料條、註冊標記、等寬字體讀數、每個場景 8-10 個元素）。

跳過這兩份文件是產生通用、網頁風格輸出的最大原因。它們在下方路由表中並非可選項目 — 對於任何超過一行編輯的內容，請在選擇顏色或撰寫 HTML 之前先開啟兩者。

工作流程

1. 如果專案有設計規格，請先閱讀，並將其 frontmatter 標記視為品牌真理（顏色、字體、間距、語氣、限制）。應讀取哪個檔案（優先順序 frame.md → design.md → DESIGN.md）以及如何解析（frontmatter = 規範性，散文 = 上下文）在 references/design-spec.md 中定義 — 請根據該文件解析並載入。
2. 如果沒有設計規格，且使用者要求視覺方向，請選擇一個路線：
   • 現成的 frame-preset（可選）→ frame-presets/（採用 FRAME.md 作為 frame.md；請參閱 references/design-spec.md）
   • 命名風格或氛圍 → references/visual-styles.md
   • 快速預設 → references/house-style.md
   • 互動選擇 → references/design-picker.md
3. 對於多場景作品，請在撰寫 HTML 之前規劃節拍與節奏 → references/beat-direction.md。如需場景轉場，請跳至 hyperframes-animation/transitions/。
4. 對於動畫密集型作品，請閱讀 references/motion-principles.md（高層級護欄），然後前往 hyperframes-animation 取得原子級規則。

路由

主題	閱讀
採用現成的 frame-preset 作為 frame.md（可選）	frame-presets/ · references/design-spec.md
預設色板、動畫、字體、懶惰預設提問	references/house-style.md
命名風格預設、氛圍到風格路由	references/visual-styles.md
特定色板的顏色標記	palettes/*.md
構圖模式 — PiP、文字在主題後方、標題卡、幻燈片	references/composition-patterns.md
統計/資訊圖表呈現	references/data-in-motion.md
開放式提示的結構化擴展	references/prompt-expansion.md
影片媒介密度、比例、顏色、畫面構圖	references/video-composition.md
逐拍方向、節奏規劃、轉場時間點	references/beat-direction.md
創作後規格驗證（顏色、字體、角落、間距、深度）	references/design-adherence.md
高層級動畫護欄與 GSAP 品質規則	references/motion-principles.md
字體選擇、搭配、渲染影片字體護欄	references/typography.md
腳本節奏、語氣、開場、數字發音	references/narration.md
預先計算的音訊頻段對應動畫	references/audio-reactive.md

腳本

• scripts/contrast-report.mjs — 檢查渲染畫面的對比度警告。
• scripts/extract-audio-data.py — 預先提取音訊頻段以用於音訊反應構圖。
• scripts/package-loader.mjs — 支援腳本，用於捆綁的創意工具。

從專案根目錄使用明確路徑執行，例如：

python skills/hyperframes-creative/scripts/extract-audio-data.py <音訊檔案>

動畫分析（animation-map.mjs）位於 hyperframes-animation/scripts/。

邊界

• 不要覆蓋 hyperframes-core 的技術規則。
• 不要為最小技術構圖要求設計系統。
• 除非請求要求或您先提議擴展，否則不要添加額外場景、旁白、音樂、字幕或轉場。
• 保持配方參考與任務相關；不要為簡單編輯閱讀所有參考資料。