hyperframes-creative

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HyperFrames Creative

HyperFrames 创意指导

Brand, pacing, style, narration, and composition direction. Use after the technical contract from

hyperframes-core

is in place.

For motion patterns, scene blueprints, transitions, and CSS marker effects, use

hyperframes-animation

— this skill is intentionally non-animation.

Read these two FIRST for any non-trivial composition — they override web instincts:
references/house-style.md
— "interpret the prompt, generate real content," the lazy-default list, and the background/foreground layer recipe. This is what turns a literal restyle into a concept.
references/video-composition.md
— video-medium density, scale, foreground metadata (the "produced, not generated" detailing: data bars, registration marks, monospace readouts, 8-10 elements/scene).
Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.

品牌、节奏、风格、旁白和构图指导。需在

hyperframes-core

的技术协议确定后使用。

如需运动模式、场景蓝图、转场效果和CSS标记特效，请使用

hyperframes-animation

——本技能专门针对非动画内容。

任何非简单构图请先阅读以下两份文档——它们会颠覆网页设计直觉：
references/house-style.md
——「解读提示词，生成真实内容」、惰性默认列表以及背景/前景图层方案。这是将字面意义上的重新设计转化为概念的关键。
references/video-composition.md
——视频媒介的密度、比例、前景元数据（即「制作而非生成」的细节：数据栏、定位标记、等宽读数、每个场景8-10个元素）。
跳过这两份文档是产出通用、类似网页风格内容的最大原因。它们并非下方路由表中的可选项——除了单行编辑外，在选择颜色或编写HTML前，请务必打开这两份文档。

Workflow

工作流程

If a project has a design spec, read it first — precedence
```
frame.md
```
→
```
design.md
```
→
```
DESIGN.md
```
.
```
frame.md
```
is the preferred spec for video/hyperframes projects and wins if more than one exists (same format as
```
design.md
```
); it is always lowercase, no
```
FRAME.md
```
variant, while
```
design.md
```
and
```
DESIGN.md
```
are different files on Linux. Treat it as brand truth: colors, fonts, spacing, tone, and constraints.
If no design spec exists and the user asks for visual direction, choose a route:
- Named style or mood →
```
references/visual-styles.md
```
- Fast defaults →
```
references/house-style.md
```
- Interactive selection →
```
references/design-picker.md
```
For multi-scene work, plan beats and rhythm before writing HTML →
```
references/beat-direction.md
```
. For scene transitions, jump to
```
hyperframes-animation/transitions/
```
.
For motion-heavy work, read
```
references/motion-principles.md
```
(high-level guardrails), then go to
```
hyperframes-animation
```
for atomic rules.

如果项目有设计规范，请先阅读——优先级为
```
frame.md
```
→
```
design.md
```
→
```
DESIGN.md
```
。
```
frame.md
```
是视频/HyperFrames项目的首选规范，若存在多个规范则以它为准（格式与
```
design.md
```
相同）；它始终为小写，没有
```
FRAME.md
```
变体，而在Linux系统中
```
design.md
```
和
```
DESIGN.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
```
查看原子规则。

Routing

路由

Topic	Read
Default palettes, motion, typography, lazy defaults to question	`references/house-style.md`
Named style presets, mood-to-style routing	`references/visual-styles.md`
Palette-specific color tokens	`palettes/*.md`
Composition patterns — PiP, text-behind-subject, title card, slide show	`references/composition-patterns.md`
Stats / infographic presentation	`references/data-in-motion.md`
Structured expansion for open-ended prompts	`references/prompt-expansion.md`
Video-medium density, scale, color, frame composition	`references/video-composition.md`
Per-beat direction, rhythm planning, transition timing	`references/beat-direction.md`
Post-authoring spec verification (colors, type, corners, spacing, depth)	`references/design-adherence.md`
High-level motion guardrails and GSAP-quality rules	`references/motion-principles.md`
Font selection, pairings, rendered-video type guardrails	`references/typography.md`
Script pacing, tone, openings, number pronunciation	`references/narration.md`
Precomputed audio bands mapped to motion	`references/audio-reactive.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/narration.md`
预计算音频频段映射到运动效果	`references/audio-reactive.md`

Scripts

脚本

```
scripts/contrast-report.mjs
```
— inspect contrast warnings from rendered frames.
```
scripts/extract-audio-data.py
```
— pre-extract audio bands for audio-reactive compositions.
```
scripts/package-loader.mjs
```
— support script for bundled creative tooling.

Run from the repo root with explicit paths, for example:

bash

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

Animation analysis (

animation-map.mjs

) lives in

hyperframes-animation/scripts/

```
scripts/contrast-report.mjs
```
——检查渲染帧的对比度警告。
```
scripts/extract-audio-data.py
```
——预提取音频频段用于音频响应式构图。
```
scripts/package-loader.mjs
```
——创意工具打包的支持脚本。

从仓库根目录使用明确路径运行，例如：

bash

python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>

动画分析脚本(

animation-map.mjs

)位于

hyperframes-animation/scripts/

中。

Boundaries

边界

Do not override
```
hyperframes-core
```
technical rules.
Do not require a design system for a minimal technical composition.
Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
Keep recipe references task-specific; do not read every reference for simple edits.

请勿覆盖
```
hyperframes-core
```
的技术规则。
对于最小化技术构图，请勿要求使用设计系统。
除非请求要求或您先提出扩展建议，否则请勿添加额外场景、旁白、音乐、字幕或转场。
仅在特定任务中引用方案文档；简单编辑无需阅读所有参考文档。