make-a-video
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMake a Video — The Beginner-to-Finished-MP4 Skill
制作视频——从新手到成品MP4的技能指南
Two phases, eight sequential gates. Every gate produces a concrete artifact the next gate consumes. Don't skip gates.
分为两个阶段,八个连续环节。每个环节生成的具体成果将作为下一个环节的输入,请勿跳过任何环节。
When to use this skill — and when to hand off
何时使用本技能——以及何时转交其他工具
Use this skill when:
- The user is new to HyperFrames and starting from a concept, script, or outline
- They want an end-to-end walkthrough, not framework reference material
- They haven't decided on format yet
Hand off when:
- The user pastes a URL and wants a video from that site → invoke
/website-to-hyperframes - The user explicitly wants a 9:16 vertical talking-head with face-cam + scene overlays → run Gates 1–4 here, then invoke from Gate 5 onward
/short-form-video - The user asks for framework rules, not a video → invoke
/hyperframes
使用本技能的场景:
- 用户是HyperFrames新手,从概念、脚本或大纲开始创作
- 用户需要端到端的引导流程,而非框架参考资料
- 用户尚未确定视频格式
转交其他工具的场景:
- 用户粘贴URL并希望从该网站生成视频 → 调用
/website-to-hyperframes - 用户明确想要9:16竖屏带摄像头画面+场景叠加的访谈类视频 → 完成本技能的第1-4环节后,从第5环节开始调用
/short-form-video - 用户询问框架规则而非视频制作方法 → 调用
/hyperframes
The two phases
两个阶段
- Phase 1 — INTERVIEW (Gates 1–4): one conversational pass to gather everything before touching code. Intent, format, script, voice, style, assets, pacing. Synthesize into a and wait for explicit approval.
BRIEF.md - Phase 2 — BUILD (Gates 5–8): scaffold → storyboard → compositions → lint → Studio preview → draft render → visual verification → MP4 preview → final render.
- 阶段1 — 需求访谈(第1-4环节): 通过一轮对话收集所有需求后再进行代码操作。包括目标意图、格式、脚本、语音、风格、素材、节奏。将信息整理为并等待用户明确批准。
BRIEF.md - 阶段2 — 视频构建(第5-8环节): 搭建项目框架→制作分镜脚本→合成视频→代码检查→Studio预览→草稿渲染→视觉验证→MP4预览→最终渲染。
Gate 1 · Intent & format
第1环节 · 目标意图与格式
Ask one question at a time via , multiple-choice where possible.
AskUserQuestion- What's this video for? (promo · social ad · launch teaser · product demo · tutorial · explainer · intro/outro card · other)
- Who's the audience? (open-ended)
- Target duration? (10–20s short · 20–45s promo · 45–90s explainer · 1.5–3 min lesson · custom)
- Aspect ratio? (16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080)
- Frame rate? (30 default · 60 for crisp UI · 24 cinematic)
- Platform / delivery constraints? (file size · deadline · where it'll play)
Gate: all six captured. If the answer is 9:16 + face-cam, plan to hand off to at Gate 5.
/short-form-videoFull question bank:
Read: references/interview-questions.md通过逐个提问,尽可能采用选择题形式。
AskUserQuestion- 该视频的用途是什么?(推广·社交广告·发布预告·产品演示·教程·讲解·片头/片尾卡片·其他)
- 目标受众是谁?(开放式问题)
- 目标时长?(10-20秒短视频·20-45秒推广视频·45-90秒讲解视频·1.5-3分钟课程·自定义时长)
- 画面比例?(16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080)
- 帧率?(默认30帧·清晰UI用60帧·电影质感用24帧)
- 平台/交付限制?(文件大小·截止日期·播放平台)
完成标志: 收集到以上6项信息。如果用户选择9:16比例+摄像头画面,计划在第5环节转交至。
/short-form-video完整问题库:
Read: references/interview-questions.mdGate 2 · Script & voice
第2环节 · 脚本与语音
- Script source? (paste · outline → I'll draft · I'll record · TTS from text · no narration)
- If TTS: voice preference. Offer choices from . Also capture pace.
npx hyperframes tts --help - If face-cam: recording path · full-screen or corner placement · need transcription? ()
npx hyperframes transcribe <file> --model small.en --json - Captions? (off · hype · corporate · karaoke-word-by-word · minimal)
Gate: script captured (or drafted), audio plan captured, caption plan captured.
- 脚本来源?(粘贴脚本·提供大纲→我来撰写·自行录制·文本转语音(TTS)·无旁白)
- 若选择TTS:语音偏好。提供中的选项,同时记录语速要求。
npx hyperframes tts --help - 若使用摄像头画面:录制文件路径·全屏或角落放置·是否需要转录?(命令:)
npx hyperframes transcribe <file> --model small.en --json - 是否添加字幕?(关闭·活力风格·商务风格·逐词卡拉OK风格·极简风格)
完成标志: 已收集到脚本(或已撰写)、音频方案、字幕方案。
Gate 3 · Style intake
第3环节 · 风格采集
Before asking the user anything, inventory existing assets. Check and any project folder. Don't ask for what's already there.
<workspace-root>/assets/assets/Then ask progressively — they don't need answers to all of these:
- Style guide or brand doc? (paste/path · no)
- Color palette? (hex codes · none — use MOTION_PHILOSOPHY defaults)
- Fonts? (Google Fonts name(s) · file paths · none — use Inter + JetBrains Mono defaults)
- Logo file? (path · none — use text wordmark instead)
- Reference videos for vibe? (URLs/paths · none)
- Other assets? (screenshots · product photos · b-roll · music — list paths)
- MOTION_PHILOSOPHY aesthetic (black canvas · chrome type · perspective grid · whip transitions) or a different feel?
- Pacing? (kinetic 1–2s · balanced 2–3s · relaxed 3–5s)
- Music? (none · ambient pad 0.15 · music bed 0.4 · full 0.8 — file path if they have one)
- Outro / call-to-action text?
Never impose a brand on the user. Fall back to MOTION_PHILOSOPHY defaults only when they explicitly decline to supply a style.
Full style flow + MOTION_PHILOSOPHY defaults:
Read: references/style-intake.md在向用户提问前,先盘点现有素材。检查及项目的文件夹,不要询问已存在的素材。
<workspace-root>/assets/assets/然后逐步提问——用户无需回答所有问题:
- 是否有风格指南或品牌文档?(粘贴内容/提供路径·无)
- 配色方案?(十六进制代码·无——使用MOTION_PHILOSOPHY默认配色)
- 字体?(Google Fonts名称·文件路径·无——使用Inter + JetBrains Mono默认字体)
- Logo文件?(路径·无——使用文字标识替代)
- 参考风格视频?(URL/路径·无)
- 其他素材?(截图·产品照片·B-roll素材·音乐——列出路径)
- 采用MOTION_PHILOSOPHY美学风格(黑色画布·镀铬文字·透视网格·快速转场)还是其他风格?
- 节奏?(动感1-2秒·平衡2-3秒·舒缓3-5秒)
- 音乐?(无·氛围铺垫0.15·背景音乐0.4·完整配乐0.8——若有文件请提供路径)
- 片尾/行动号召(CTA)文本?
切勿向用户强加品牌风格。仅当用户明确拒绝提供风格信息时,才使用MOTION_PHILOSOPHY默认设置。
完整风格采集流程+MOTION_PHILOSOPHY默认设置:
Read: references/style-intake.mdGate 4 · Brief synthesis (HARD-GATE before building)
第4环节 · 需求简报整理(构建前的强制环节)
- Read if it exists in the workspace root — mandatory if present. If missing, proceed with the defaults in
MOTION_PHILOSOPHY.mdand note the absence in the brief.references/style-intake.md - Ask where projects live if it's not obvious:
- If exists → use
video-projects/video-projects/<slug>/ - Otherwise → ask the user
- If
- Write :
<project-folder>/BRIEF.md- slug · intent · audience · dimensions · fps · duration
- script (full or outline)
- voice choice · caption plan · face-cam plan
- style profile: palette (hex), fonts, logo path, reference videos
- pacing
- asset inventory with paths
- outro / CTA text
- Show the brief. WAIT for explicit approval. Don't proceed to Gate 5 without a clear "yes, build it."
- 阅读:如果工作区根目录存在该文件则必须阅读;若缺失,使用
MOTION_PHILOSOPHY.md中的默认设置,并在简报中注明文件缺失。references/style-intake.md - 询问项目存储位置(若不明确):
- 若已存在 → 使用
video-projects/video-projects/<slug>/ - 否则 → 询问用户
- 若
- 撰写:
<project-folder>/BRIEF.md- 项目标识(slug)·目标意图·受众·尺寸·帧率·时长
- 脚本(完整内容或大纲)
- 语音选择·字幕方案·摄像头画面方案
- 风格配置:配色(十六进制)、字体、Logo路径、参考视频
- 节奏
- 素材清单及路径
- 片尾/CTA文本
- 展示简报,等待用户明确批准。未得到明确的“同意,开始构建”前,请勿进入第5环节。
Gate 5 · Scaffold & storyboard
第5环节 · 搭建项目框架与制作分镜脚本
Handoff check first
先检查是否需要转交
If the brief describes a 9:16 vertical talking-head with face-cam + scene overlays, invoke NOW and hand off the brief. Its 4-layer scaffold is purpose-built for that format.
/short-form-videoOtherwise continue:
如果简报描述的是9:16竖屏带摄像头画面+场景叠加的访谈类视频,立即调用并转交简报。该工具的4层框架专为该格式设计。
/short-form-video否则继续以下步骤:
Scaffold
搭建项目框架
mkdir <project-folder>- If a sibling project with similar format exists, offer to copy its +
hyperframes.jsonas a template. Otherwise from inside the folder:meta.jsonnpx hyperframes init - Edit with the user's slug, dimensions, fps.
meta.json - Copy supplied assets into .
<project-folder>/assets/ - Create from Gate 3 — single source of truth for palette/fonts/logo.
<project-folder>/assets/style-profile.md
mkdir <project-folder>- 若存在格式类似的同级项目,可提议复制其+
hyperframes.json作为模板。否则进入项目文件夹执行:meta.jsonnpx hyperframes init - 编辑,填入用户的项目标识(slug)、尺寸、帧率。
meta.json - 将提供的素材复制到。
<project-folder>/assets/ - 根据第3环节的内容创建——作为配色/字体/Logo的唯一参考来源。
<project-folder>/assets/style-profile.md
Storyboard
制作分镜脚本
Generate using the template in . Every beat gets:
<project-folder>/STORYBOARD.mdreferences/storyboard-template.mdBeat N — TITLE (start–end, duration) — Concept in one sentence
Visual elements: [each element, size, animation, timing]
Motion language: [kind of motion]
Eases used: [3–4 distinct GSAP eases]
Exit: [transition into next beat]
Audio: [VO line / SFX / music layer]Top of file: a timing table with scene · start · duration · composition file.
Propose a rule-of-threes structure:
- Act 1 (hook) ≈ 20% of duration
- Act 2 (body) ≈ 55%
- Act 3 (payoff + outro with 4–6 second hold) ≈ 25%
(MOTION_PHILOSOPHY §0 Law 9, §1.)
Map user intents → catalog blocks:
Read: references/catalog-intent-map.mdGate: show storyboard + timing table. Iterate until the user approves.
使用中的模板生成。每个节拍需包含:
references/storyboard-template.md<project-folder>/STORYBOARD.md节拍N — 标题(开始-结束时间,时长)—— 一句话描述概念
视觉元素:[每个元素的大小、动画、时间点]
动效语言:[动效类型]
缓动效果:[3-4种不同的GSAP缓动效果]
转场:[进入下一节拍的转场方式]
音频:[旁白台词/音效/音乐层]文件顶部:包含场景·开始时间·时长·合成文件的时间轴表格。
建议采用三段式结构:
- 第一幕(钩子)≈ 总时长的20%
- 第二幕(主体)≈ 总时长的55%
- 第三幕(收尾+片尾停留4-6秒)≈ 总时长的25%
(MOTION_PHILOSOPHY §0 第9条,§1)
用户意图→组件映射:
Read: references/catalog-intent-map.md完成标志: 展示分镜脚本+时间轴表格,迭代至用户批准。
Gate 6 · Build compositions
第6环节 · 合成视频
Invoke for framework rules. This skill owns the scaffold and discipline; enforces the rules.
/hyperframes/hyperframes调用获取框架规则。本技能负责项目框架和流程规范;负责执行规则。
/hyperframes/hyperframesScaffold every sub-composition
搭建每个子合成模块
html
<div data-composition-id="scene-name" data-start="..." data-duration="...">
<style>[data-composition-id="scene-name"] { /* scoped */ }</style>
<!-- DOM -->
<script>
(function(){
const SLOT_DURATION = ...;
const tl = gsap.timeline({ paused: true });
// ... tweens ...
tl.to({}, { duration: SLOT_DURATION }, 0); // anchor — MOTION_PHILOSOPHY Law 11
window.__timelines["scene-name"] = tl;
})();
</script>
</div>Full boilerplate + captions pattern + ambient-bg pattern:
Read: references/composition-scaffold.mdhtml
<div data-composition-id="scene-name" data-start="..." data-duration="...">
<style>[data-composition-id="scene-name"] { /* 作用域样式 */ }</style>
<!-- DOM元素 -->
<script>
(function(){
const SLOT_DURATION = ...;
const tl = gsap.timeline({ paused: true });
// ... 动画补间 ...
tl.to({}, { duration: SLOT_DURATION }, 0); // 锚点——MOTION_PHILOSOPHY第11条规则
window.__timelines["scene-name"] = tl;
})();
</script>
</div>完整模板+字幕模式+背景模式:
Read: references/composition-scaffold.mdBuild rules
构建规则
- Ambient background on for the full composition duration.
data-track-index="0" - Kinetic-type openers: per-word stagger 0.06–0.10s.
- Captions as body-level siblings of the root composition in , each with
index.html. Never inside scene timelines (MOTION_PHILOSOPHY §3.13).data-track-index ≥ 20 - Catalog blocks installed via . Immediately scope the block's CSS to
npx hyperframes add <name>— catalog blocks ship with[data-composition-id="..."]rules that bleed into the parent document when loaded as sub-compositions.html, body { ... } - Vertical + face-cam: wrap native 1920×1080 face in a transform (+
translate) for bottom-half or full-screen mode. (If you end up here instead ofscale, strongly consider the handoff.)/short-form-video - Apply ONLY what the user supplied. Their palette, their fonts, their logo. Don't inject anything else. If they chose MOTION_PHILOSOPHY defaults, pull the palette + font pair from .
references/style-intake.md
- 背景层放在,覆盖整个合成时长。
data-track-index="0" - 动感文字开场:逐字 stagger 0.06-0.10秒。
- 字幕作为中根合成模块的同级元素,每个字幕的
index.html。切勿放在场景时间轴内(MOTION_PHILOSOPHY §3.13)。data-track-index ≥ 20 - 组件库模块通过安装。立即将模块的CSS作用域限定为
npx hyperframes add <name>——组件库模块默认带有[data-composition-id="..."]规则,作为子合成加载时会影响父文档。html, body { ... } - 竖屏+摄像头画面:将原生1920×1080摄像头画面通过transform(+
translate)调整为下半屏或全屏模式。(若未转交至scale而进入此步骤,强烈建议转交。)/short-form-video - 仅使用用户提供的内容:用户指定的配色、字体、Logo。请勿添加其他内容。若用户选择MOTION_PHILOSOPHY默认设置,从中获取配色+字体组合。
references/style-intake.md
Determinism
确定性要求
No , no , no render-time . Use seeded PRNGs or harmonic-sin hashes (MOTION_PHILOSOPHY §3.10).
Math.random()Date.now()fetch()禁止使用、、渲染时的。仅使用种子化伪随机数生成器(PRNG)或谐波正弦哈希(MOTION_PHILOSOPHY §3.10)。
Math.random()Date.now()fetch()Gate 7 · Lint → Studio preview (PREVIEW GATE 1 — MANDATORY)
第7环节 · 代码检查→Studio预览(强制预览环节1)
- — fix all errors, triage warnings.
npx hyperframes lint - in the background.
npx hyperframes preview - Wait for "Studio running" on .
http://localhost:3002 - Hand the user the URL plus individual composition URLs (). If the project has WebGL shader blocks, lead with the individual URLs — software WebGL fallback can stall the master composition.
http://localhost:3002/?comp=<id> - WAIT for explicit "looks good, render a draft" before proceeding. Silence is not approval.
Hot reload is on — edits show up live.
- — 修复所有错误,分类处理警告。
npx hyperframes lint - 在后台执行。
npx hyperframes preview - 等待提示“Studio running”,地址为。
http://localhost:3002 - 将URL加上单个合成模块的URL()提供给用户。如果项目包含WebGL着色器模块,优先提供单个模块的URL——软件WebGL fallback可能会导致主合成模块加载卡顿。
http://localhost:3002/?comp=<id> - **等待用户明确回复“看起来不错,渲染草稿”**后再继续。沉默不代表批准。
热重载已开启——修改内容会实时显示。
Gate 8 · Draft render → visual verification → MP4 preview → final
第8环节 · 草稿渲染→视觉验证→MP4预览→最终渲染
Draft render
草稿渲染
bash
npx hyperframes render --quality draft --output renders/<slug>-draft.mp4bash
npx hyperframes render --quality draft --output renders/<slug>-draft.mp4Visual verification (MANDATORY before delivery)
视觉验证(交付前强制环节)
Lint passing ≠ design working. Extract frames and view them.
mkdir -p renders/frames- For every beat hero moment AND every transition:
bash
ffmpeg -y -ss <t> -i renders/<slug>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png - Call the tool on every PNG. The Read tool loads the image into context — don't just list filenames.
Read - Confirm per frame: no cropped faces, correct face-mode per scene, text readable and on-palette, no overflow, transitions land on intended words, no blank frames.
- If anything's wrong: fix → re-render → re-verify. Never ship a broken draft.
代码检查通过≠设计无误。提取帧并查看每帧内容。
mkdir -p renders/frames- 针对每个节拍的关键画面以及每个转场执行:
bash
ffmpeg -y -ss <t> -i renders/<slug>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png - 对每张PNG调用工具。Read工具会将图片加载到上下文——请勿仅列出文件名。
Read - 逐帧确认:无面部裁剪、每个场景的摄像头模式正确、文字清晰且符合配色、无内容溢出、转场落在预期文字上、无空白帧。
- 若发现问题:修复→重新渲染→重新验证。切勿交付有问题的草稿。
MP4 preview (PREVIEW GATE 2 — MANDATORY)
MP4预览(强制预览环节2)
bash
npx serve renders -p 8080 -nDo NOT use Python's — it doesn't support HTTP Range requests, so scrubbing breaks.
http.serverHand the user . WAIT for explicit sign-off on playback and audio sync.
http://localhost:8080/<slug>-draft.mp4bash
npx serve renders -p 8080 -n请勿使用Python的——它不支持HTTP Range请求,会导致拖拽播放失效。
http.server将提供给用户。等待用户明确确认播放和音频同步无误。
http://localhost:8080/<slug>-draft.mp4Final render
最终渲染
bash
npx hyperframes render --quality standard --output renders/<slug>-final.mp4Report the output path. Done.
Full preflight + pre-delivery checklist:
Read: references/build-checklist.mdbash
npx hyperframes render --quality standard --output renders/<slug>-final.mp4告知用户输出路径。完成。
完整预检+交付前检查清单:
Read: references/build-checklist.mdNon-negotiables (load-bearing — do not soften)
不可协商规则(核心要求——请勿放宽)
- DO NOT skip PREVIEW GATE 1 (Studio) or PREVIEW GATE 2 (rendered MP4). Two gates per build, always.
- DO NOT claim a render is done until frames have been extracted AND Read via the Read tool.
- DO NOT build anywhere but inside a dedicated project folder. Never put at the workspace root.
index.html - DO NOT ask the user for assets before inventorying their workspace.
- DO NOT skip the anchor tween at the end of every sub-composition timeline. MOTION_PHILOSOPHY Law 11.
tl.to({}, { duration: SLOT_DURATION }, 0) - DO NOT use /
Math.random()inside render logic. Seeded hashes only.Date.now() - DO NOT add to
class="clip"tags. It breaks them.<video> - DO NOT impose a brand on the user. Ask first; fall back to MOTION_PHILOSOPHY defaults only when they explicitly decline.
- 请勿跳过预览环节1(Studio)或预览环节2(渲染后的MP4)。每次构建必须经过这两个环节。
- 除非提取帧并通过Read工具查看,否则请勿宣称渲染完成。
- 请勿在专用项目文件夹外构建。切勿将放在工作区根目录。
index.html - 在盘点用户工作区素材前,请勿向用户索要素材。
- 请勿省略每个子合成时间轴末尾的锚点补间。这是MOTION_PHILOSOPHY第11条规则。
tl.to({}, { duration: SLOT_DURATION }, 0) - 请勿在渲染逻辑中使用/
Math.random()。仅使用种子化哈希。Date.now() - 请勿给标签添加
<video>。这会导致视频失效。class="clip" - 请勿向用户强加品牌风格。先询问;仅当用户明确拒绝提供时,才使用MOTION_PHILOSOPHY默认设置。
References
参考资料
- — full question bank by Gate
references/interview-questions.md - — style interview + MOTION_PHILOSOPHY defaults
references/style-intake.md - — "user says X → install Y"
references/catalog-intent-map.md - — beat-by-beat template + worked example
references/storyboard-template.md - — scoped-styles + IIFE GSAP boilerplate
references/composition-scaffold.md - — preflight + pre-delivery gates
references/build-checklist.md
External (workspace-level):
- — the one external reference this skill assumes exists. Aesthetic baseline. Fallback lives in
MOTION_PHILOSOPHY.mdif the file is missing.references/style-intake.md
- — 各环节的完整问题库
references/interview-questions.md - — 风格访谈+MOTION_PHILOSOPHY默认设置
references/style-intake.md - — “用户需求X→安装组件Y”映射
references/catalog-intent-map.md - — 逐节拍模板+示例
references/storyboard-template.md - — 作用域样式+IIFE GSAP模板
references/composition-scaffold.md - — 预检+交付前环节
references/build-checklist.md
外部(工作区级别):
- — 本技能假设存在的唯一外部参考资料,作为美学基准。若文件缺失,使用
MOTION_PHILOSOPHY.md中的 fallback 设置。references/style-intake.md
Related skills
相关技能
- — framework rules, invoke at Gate 6
/hyperframes - — init · lint · preview · render · transcribe · tts
/hyperframes-cli - — installing catalog blocks
/hyperframes-registry - — GSAP animation reference
/gsap - — hand off at Gate 5 for 9:16 talking-head format
/short-form-video - — hand off at Gate 1 if the starting input is a URL
/website-to-hyperframes
- — 框架规则,在第6环节调用
/hyperframes - — 初始化·代码检查·预览·渲染·转录·文本转语音
/hyperframes-cli - — 安装组件库模块
/hyperframes-registry - — GSAP动画参考
/gsap - — 第5环节转交,用于9:16访谈类格式
/short-form-video - — 第1环节转交,用于输入为URL的场景
/website-to-hyperframes