hyperframes-creative

جهت‌دهی خلاقانه برای طراحی، روایت و ترکیب‌بندی ویدیوهای HyperFrames

این اسکیل برای تصمیم‌گیری‌های خلاقانه در ویدیوهای HyperFrames است؛ از انتخاب palette و typography تا طراحی composition، روایت، ریتم صحنه‌ها و سبک بصری. با بررسی design spec و منابع house style، خروجی را به یک زبان بصری منسجم و مناسب مدیوم ویدیو تبدیل می‌کند.

برای پروژه‌های چندصحنه‌ای، beat plan و ساختار روایت پیشنهاد می‌دهد و می‌تواند داده‌های صوتی را برای visualهای audio-reactive آماده کند. این اسکیل روی direction و طراحی تمرکز دارد، نه پیاده‌سازی motion pattern یا animationهای اتمیک.

چه چیزی می‌گیرید

تحلیل و اعمال design spec از فایل‌های frame.md، design.md یا DESIGN.md
پیشنهاد palette، typography، composition و جزئیات بصری متناسب با برند
برنامه‌ریزی beat، ریتم، narration و ساختار روایت برای ویدیوهای چندصحنه‌ای
الگوهای مناسب برای title card، PiP، infographic و text-behind-subject
ابزارهای بررسی contrast و استخراج داده‌های صوتی برای ترکیب‌های audio-reactive

برای چه کاری خوب است

تیم‌هایی که برای یک ویدیوی HyperFrames به direction بصری و تصمیم‌های برندمحور نیاز دارند
پروژه‌های تبلیغاتی، توضیحی یا داده‌محور با چند صحنه و نیاز به ریتم و روایت منسجم
زمانی که خروجی نباید شبیه یک صفحه وب عمومی باشد و به جزئیات تولیدشده و ویدیویی نیاز دارد

برای چه کاری نیست

ساخت transition، scene blueprint یا motion patternهای اتمیک؛ برای این کار از hyperframes-animation استفاده کنید
پروژه‌هایی که فقط به یک composition فنی بسیار ساده و بدون direction خلاقانه نیاز دارند
تغییر قوانین فنی پروژه که توسط hyperframes-core تعیین شده‌اند

دربارهٔ این اسکیل

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

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 — resolve and load per that doc.
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
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.

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:

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.

دانلود ZIP