HyperFrames 創意指導
品牌、節奏、風格、旁白與構圖方向。在 hyperframes-core 的技術合約就緒後使用。
對於動畫模式、場景藍圖、轉場與 CSS 標記效果，請使用 hyperframes-animation — 此技能特意不包含動畫。
對於任何非平凡構圖，請先閱讀以下兩份文件 — 它們能覆蓋網頁直覺：
references/house-style.md— 「解讀提示、產出真實內容」，懶惰預設清單，以及前景/背景圖層配方。這能將字面上的重新樣式化轉變為一個 概念。references/video-composition.md— 影片媒介的比例、深度與前景細節。它說明如何避免空蕩的網頁版面，同時不強加統一的元素數量。跳過這兩份文件是產生千篇一律、像網頁版面之輸出品的單一最大原因。它們在下方的路由表中並非可選項目 — 對於任何超出一行編輯的工作，請在選擇顏色或撰寫 HTML 之前，先打開這兩份文件。
工作流程
- 如果專案有設計規格，請先閱讀它，並將其前端事項視為品牌真理（顏色、字型、間距、語調、限制）。應讀取哪個檔案（優先順序
frame.md→design.md→DESIGN.md）以及如何解析它（前端事項為規範性內容，正文為脈絡）已在references/design-spec.md中定義 — 請依照該文件進行解析與載入。 - 如果不存在設計規格，且使用者要求視覺方向，請選擇一個路線：
- 現成的幀預設集（可選）→
frame-presets/（採用一個FRAME.md作為frame.md；參閱references/design-spec.md） - 命名風格或氛圍 →
references/visual-styles.md - 快速預設 →
references/house-style.md - 互動式選擇 →
references/design-picker.md
- 現成的幀預設集（可選）→
- 對於多重場景作品，請在撰寫 HTML 之前先規劃節奏與韻律 →
references/beat-direction.md。對於場景轉場，請跳轉至hyperframes-animation/transitions/。 - 對於動畫密集的作品，請閱讀
references/motion-principles.md（高階導引原則），然後前往hyperframes-animation取得原子級規則。
路由
| 主題 | 閱讀來源 |
|---|---|
採用現成的幀預設集作為 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/story-spine.md |
| 腳本節奏、語調、開場、數字發音 | references/narration.md |
| 預先計算的音訊頻帶對應至動畫 | references/audio-reactive.md |
腳本
scripts/contrast-report.mjs— 檢查已渲染幀中的對比度警告。scripts/extract-audio-data.py— 預先擷取音訊頻帶，用於音訊反應式構圖。scripts/package-loader.mjs— 支援腳本，用於捆綁的創意工具集。
contrast-report.mjs 會先從目前專案解析輔助套件，然後可以引導載入捆綁的 HyperFrames 套件版本。僅在技能於捆綁的 CLI/技能安裝環境之外執行，且需要明確固定該引導版本時，才設定 HYPERFRAMES_SKILL_PKG_VERSION=<版本>。
從倉儲根目錄使用明確路徑執行，例如：
python skills/hyperframes-creative/scripts/extract-audio-data.py <音訊檔案>
動畫分析 (animation-map.mjs) 位於 hyperframes-animation/scripts/。
邊界
- 請勿覆蓋
hyperframes-core的技術規則。 - 請勿為最小技術構圖強制要求設計系統。
- 除非請求明確要求，或您先提出擴展提案，否則請勿增加額外場景、旁白、音樂、字幕或轉場。
- 保持配方參考文件與特定任務相關；對於簡單編輯，請勿閱讀所有參考文件。