HyperFrames Design
品牌、節奏、風格與構圖方向。請在 /hyperframes/core 的技術合約就緒後使用。
如需運動模式、場景藍圖、轉場及 CSS 標記效果，請使用 hyperframes-motion — 此技能明確定義為非動畫。
對於任何非平凡的構圖，請先閱讀以下兩份文件 — 它們會覆蓋網頁直覺：
references/house-style.md—「解讀提示，產生真實內容」、懶惰預設清單，以及背景/前景圖層配方。這能將字面上的重新造型轉變為一個 概念。references/video-composition.md— 影片媒介密度、比例、前景後設資料（「製作感，非產生感」的細節：資料條、註冊記號、等寬字體讀數、每場景 8-10 個元素）。跳過這些是產生泛型、網頁風格輸出的最大單一原因。它們在下面的路由表中並非可選項目 — 對於任何超過一行編輯的工作，請在選擇顏色或撰寫 HTML 之前先開啟這兩份文件。
工作流程
- 如果專案有設計規格，請先閱讀它，並將其 frontmatter 符號視為品牌事實（顏色、字體、間距、語氣、限制）。要讀取哪個檔案（優先順序
frame.md→design.md→DESIGN.md）以及如何解析它（frontmatter 為規範性，散文為上下文）在references/design-spec.md中一次定義 — 請依該文件解析並載入。 - 如果沒有設計規格，且使用者要求視覺方向，請選擇一條路線：
- 現成框架預設（可選）→
frame-presets/（採用FRAME.md作為frame.md；請參閱references/design-spec.md） - 命名風格或氛圍 →
references/visual-styles.md - 快速預設 →
references/house-style.md
- 現成框架預設（可選）→
- 對於多場景工作，請在撰寫 HTML 之前先規劃節拍與節奏 →
references/beat-direction.md。如需場景轉場，請跳轉至hyperframes-motion/transitions/。 - 對於動作密集型工作，請閱讀
references/motion-principles.md（高階護欄），然後前往hyperframes-motion取得原子規則。
路由
| 主題 | 閱讀文件 |
|---|---|
採用現成框架預設作為 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 |
腳本
scripts/contrast-report.mjs— 檢查已渲染畫面中的對比度警告。scripts/package-loader.mjs— 支援腳本，用於捆綁創意工具。
請從儲存庫根目錄使用明確路徑執行。
動畫分析（animation-map.mjs）位於 hyperframes-motion/scripts/。
邊界
- 請勿覆蓋
/hyperframes/core的技術規則。 - 對於極簡技術構圖，請勿要求設計系統。
- 除非請求要求或您先提議擴展，否則請勿添加額外場景、字幕或轉場。
- 保持配方參考文件針對特定任務；對於簡單編輯，請勿閱讀所有參考文件。