插件安裝: 在執行設定或更新命令之前,請先遵循 插件執行規則(當此技能位於 HyperFrames 插件內部時)。獨立安裝則保留下方的更新說明。
HyperFrames 創意
品牌、節奏、風格、旁白和構圖指導。在用於 hyperframes-core 的技術合約就緒後使用。
如需動畫模式、場景藍圖、轉場和 CSS 標記效果,請使用 hyperframes-animation — 此技能刻意不包含動畫。
對於任何非平凡的構圖,請先閱讀以下兩個文件 — 它們會覆蓋網頁直覺:
references/house-style.md— 「解讀提示,生成真實內容」,懶人預設清單,以及背景/前景圖層配方。這是將字面意義的重新樣式轉變為 概念 的關鍵。references/video-composition.md— 影片媒介的尺度、深度和前景細節。它解釋了如何避免空洞的網頁佈局,同時不強加通用的元素數量。跳過這兩者是導致輸出看起來像普通網頁的最大原因。它們並非下方路由表中的可選項目 — 對於任何超過一行編輯的工作,請在選擇顏色或編寫 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 - 互動式選擇 →
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的技術規則。 - 對於最小化的技術構圖,不要要求設計系統。
- 除非請求要求您這樣做,或者您先提出擴展建議,否則不要添加額外的場景、旁白、音樂、字幕或轉場。
- 保持配方參考的任務特定性;不要為了簡單的編輯而閱讀每一個參考文件。