---
id: gh-hyperframes-creative
name: "hyperframes-creative"
url: https://skills.yangsir.net/skill/gh-hyperframes-creative
author: heygen-com
domain: design
tags: ["creative-direction", "video-design", "typography", "brand-guidelines", "composition"]
install_count: 81700
rating: 4.70 (120 reviews)
github: https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-creative
---

# hyperframes-creative

> 此技能为 HyperFrames 视频提供非动画创意指导，专注于设计规范处理、品牌风格决策、视觉调色板、排版和构图模式。它帮助定义视频的美学和叙事结构，包括旁白、节拍规划和音频响应式视觉效果，确保视频项目具有一致的风格和高质量的视觉输出。使用该 Skill 在动画制作前确立基础创意元素。

**Stats**: 81,700 installs · 4.7/5 (120 reviews)

## Before / After 对比

### 视频创意决策效率

**Before**:

用户在没有此技能时，需要手动查阅大量设计文档、风格指南，并反复尝试不同的调色板和排版，导致视频创意决策过程漫长且容易出现风格不一致。

**After**:

该 Skill 能够快速提供设计规范、品牌风格和构图模式的指导，大幅缩短创意决策时间，确保视频视觉风格的一致性和专业性。

| Metric | Before | After | Change |
|---|---|---|---|
| 创意决策时间 | 60分钟 | 10分钟 | -83% |

## Readme

# HyperFrames Creative

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.

## Workflow

1. If a project has a design spec, **read it first** and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints). Which file to read (precedence `frame.md` → `design.md` → `DESIGN.md`) and how to parse it (frontmatter = normative, prose = context) are defined once in [`references/design-spec.md`](references/design-spec.md) — resolve and load per that doc.
2. If no design spec exists and the user asks for visual direction, choose a route:
   - Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`)
   - Named style or mood → `references/visual-styles.md`
   - Fast defaults → `references/house-style.md`
   - Interactive selection → `references/design-picker.md`
3. For multi-scene work, plan beats and rhythm before writing HTML → `references/beat-direction.md`. For scene transitions, jump to `hyperframes-animation/transitions/`.
4. For motion-heavy work, read `references/motion-principles.md` (high-level guardrails), then go to `hyperframes-animation` for atomic rules.

## Routing

| Topic                                                                    | Read                                           |
| ------------------------------------------------------------------------ | ---------------------------------------------- |
| Adopt a ready-made frame-preset as `frame.md` (optional)                 | `frame-presets/` · `references/design-spec.md` |
| 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`                 |

## 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/`.

## 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.


---
*Source: https://skills.yangsir.net/skill/gh-hyperframes-creative*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-hyperframes-creative/markdown*