插件安装: 在执行设置或新鲜度命令之前,请遵循 插件执行规则(当此技能位于 HyperFrames 插件内部时)。独立安装则保留下方的更新说明。
HyperFrames Creative
品牌、节奏、风格、旁白和构图方向。在 hyperframes-core 确立技术框架后使用。
对于运动模式、场景蓝图、转场和 CSS 标记效果,请使用 hyperframes-animation——此技能专门排除动画。
在进行任何非平凡构图之前,请先阅读以下两项——它们会覆盖网页习惯:
references/house-style.md— “解释提示,生成真实内容”,懒加载默认列表,以及背景/前景图层配方。这将字面重新样式转变为_概念_。references/video-composition.md— 视频媒介的尺度、深度和前景细节。它解释了如何避免空网页布局,而无需强制设定元素数量。忽略这两项是导致输出看起来像通用网页的最大原因。它们在下面的路由表中不是可选项——对于任何超过一行的编辑,在选择颜色或编写 HTML 之前,请同时打开这两个文件。
工作流程
- 如果项目有设计规范,请先阅读它,并将其 frontmatter 标记视为品牌真相(颜色、字体、间距、语调、约束)。要读取哪个文件(优先级
frame.md→design.md→DESIGN.md)以及如何解析它(frontmatter = 规范,prose = 上下文)在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 |
| 构图模式 — 画中画、文字在主体后方、标题卡、幻灯片 | 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的技术规则。 - 对于最小的技术构图,不要要求设计系统。
- 除非请求要求,或者你首先提出扩展,否则不要添加额外的场景、旁白、音乐、字幕或转场。
- 保持配方引用特定于任务;对于简单编辑,不要阅读每个参考文件。