make-a-video

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Make 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
    /short-form-video
    from Gate 5 onward
  • 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
    BRIEF.md
    and wait for explicit approval.
  • 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
AskUserQuestion
, multiple-choice where possible.
  1. What's this video for? (promo · social ad · launch teaser · product demo · tutorial · explainer · intro/outro card · other)
  2. Who's the audience? (open-ended)
  3. Target duration? (10–20s short · 20–45s promo · 45–90s explainer · 1.5–3 min lesson · custom)
  4. Aspect ratio? (16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080)
  5. Frame rate? (30 default · 60 for crisp UI · 24 cinematic)
  6. 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
/short-form-video
at Gate 5.
Full question bank:
Read: references/interview-questions.md

通过
AskUserQuestion
逐个提问,尽可能采用选择题形式。
  1. 该视频的用途是什么?(推广·社交广告·发布预告·产品演示·教程·讲解·片头/片尾卡片·其他)
  2. 目标受众是谁?(开放式问题)
  3. 目标时长?(10-20秒短视频·20-45秒推广视频·45-90秒讲解视频·1.5-3分钟课程·自定义时长)
  4. 画面比例?(16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080)
  5. 帧率?(默认30帧·清晰UI用60帧·电影质感用24帧)
  6. 平台/交付限制?(文件大小·截止日期·播放平台)
完成标志: 收集到以上6项信息。如果用户选择9:16比例+摄像头画面,计划在第5环节转交至
/short-form-video
完整问题库:
Read: references/interview-questions.md

Gate 2 · Script & voice

第2环节 · 脚本与语音

  1. Script source? (paste · outline → I'll draft · I'll record · TTS from text · no narration)
  2. If TTS: voice preference. Offer choices from
    npx hyperframes tts --help
    . Also capture pace.
  3. If face-cam: recording path · full-screen or corner placement · need transcription? (
    npx hyperframes transcribe <file> --model small.en --json
    )
  4. Captions? (off · hype · corporate · karaoke-word-by-word · minimal)
Gate: script captured (or drafted), audio plan captured, caption plan captured.

  1. 脚本来源?(粘贴脚本·提供大纲→我来撰写·自行录制·文本转语音(TTS)·无旁白)
  2. 若选择TTS:语音偏好。提供
    npx hyperframes tts --help
    中的选项,同时记录语速要求。
  3. 若使用摄像头画面:录制文件路径·全屏或角落放置·是否需要转录?(命令:
    npx hyperframes transcribe <file> --model small.en --json
  4. 是否添加字幕?(关闭·活力风格·商务风格·逐词卡拉OK风格·极简风格)
完成标志: 已收集到脚本(或已撰写)、音频方案、字幕方案。

Gate 3 · Style intake

第3环节 · 风格采集

Before asking the user anything, inventory existing assets. Check
<workspace-root>/assets/
and any project
assets/
folder. Don't ask for what's already there.
Then ask progressively — they don't need answers to all of these:
  1. Style guide or brand doc? (paste/path · no)
  2. Color palette? (hex codes · none — use MOTION_PHILOSOPHY defaults)
  3. Fonts? (Google Fonts name(s) · file paths · none — use Inter + JetBrains Mono defaults)
  4. Logo file? (path · none — use text wordmark instead)
  5. Reference videos for vibe? (URLs/paths · none)
  6. Other assets? (screenshots · product photos · b-roll · music — list paths)
  7. MOTION_PHILOSOPHY aesthetic (black canvas · chrome type · perspective grid · whip transitions) or a different feel?
  8. Pacing? (kinetic 1–2s · balanced 2–3s · relaxed 3–5s)
  9. Music? (none · ambient pad 0.15 · music bed 0.4 · full 0.8 — file path if they have one)
  10. 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/
文件夹,不要询问已存在的素材。
然后逐步提问——用户无需回答所有问题:
  1. 是否有风格指南或品牌文档?(粘贴内容/提供路径·无)
  2. 配色方案?(十六进制代码·无——使用MOTION_PHILOSOPHY默认配色)
  3. 字体?(Google Fonts名称·文件路径·无——使用Inter + JetBrains Mono默认字体)
  4. Logo文件?(路径·无——使用文字标识替代)
  5. 参考风格视频?(URL/路径·无)
  6. 其他素材?(截图·产品照片·B-roll素材·音乐——列出路径)
  7. 采用MOTION_PHILOSOPHY美学风格(黑色画布·镀铬文字·透视网格·快速转场)还是其他风格?
  8. 节奏?(动感1-2秒·平衡2-3秒·舒缓3-5秒)
  9. 音乐?(无·氛围铺垫0.15·背景音乐0.4·完整配乐0.8——若有文件请提供路径)
  10. 片尾/行动号召(CTA)文本?
切勿向用户强加品牌风格。仅当用户明确拒绝提供风格信息时,才使用MOTION_PHILOSOPHY默认设置。
完整风格采集流程+MOTION_PHILOSOPHY默认设置:
Read: references/style-intake.md

Gate 4 · Brief synthesis (HARD-GATE before building)

第4环节 · 需求简报整理(构建前的强制环节)

  1. Read
    MOTION_PHILOSOPHY.md
    if it exists in the workspace root — mandatory if present. If missing, proceed with the defaults in
    references/style-intake.md
    and note the absence in the brief.
  2. Ask where projects live if it's not obvious:
    • If
      video-projects/
      exists → use
      video-projects/<slug>/
    • Otherwise → ask the user
  3. 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
  4. Show the brief. WAIT for explicit approval. Don't proceed to Gate 5 without a clear "yes, build it."

  1. 阅读
    MOTION_PHILOSOPHY.md
    :如果工作区根目录存在该文件则必须阅读;若缺失,使用
    references/style-intake.md
    中的默认设置,并在简报中注明文件缺失。
  2. 询问项目存储位置(若不明确):
    • video-projects/
      已存在 → 使用
      video-projects/<slug>/
    • 否则 → 询问用户
  3. 撰写
    <project-folder>/BRIEF.md
    • 项目标识(slug)·目标意图·受众·尺寸·帧率·时长
    • 脚本(完整内容或大纲)
    • 语音选择·字幕方案·摄像头画面方案
    • 风格配置:配色(十六进制)、字体、Logo路径、参考视频
    • 节奏
    • 素材清单及路径
    • 片尾/CTA文本
  4. 展示简报,等待用户明确批准。未得到明确的“同意,开始构建”前,请勿进入第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
/short-form-video
NOW and hand off the brief. Its 4-layer scaffold is purpose-built for that format.
Otherwise continue:
如果简报描述的是9:16竖屏带摄像头画面+场景叠加的访谈类视频,立即调用
/short-form-video
并转交简报。该工具的4层框架专为该格式设计。
否则继续以下步骤:

Scaffold

搭建项目框架

  1. mkdir <project-folder>
  2. If a sibling project with similar format exists, offer to copy its
    hyperframes.json
    +
    meta.json
    as a template. Otherwise from inside the folder:
    npx hyperframes init
  3. Edit
    meta.json
    with the user's slug, dimensions, fps.
  4. Copy supplied assets into
    <project-folder>/assets/
    .
  5. Create
    <project-folder>/assets/style-profile.md
    from Gate 3 — single source of truth for palette/fonts/logo.
  1. mkdir <project-folder>
  2. 若存在格式类似的同级项目,可提议复制其
    hyperframes.json
    +
    meta.json
    作为模板。否则进入项目文件夹执行:
    npx hyperframes init
  3. 编辑
    meta.json
    ,填入用户的项目标识(slug)、尺寸、帧率。
  4. 将提供的素材复制到
    <project-folder>/assets/
  5. 根据第3环节的内容创建
    <project-folder>/assets/style-profile.md
    ——作为配色/字体/Logo的唯一参考来源。

Storyboard

制作分镜脚本

Generate
<project-folder>/STORYBOARD.md
using the template in
references/storyboard-template.md
. Every beat gets:
Beat 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.md
Gate: 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
/hyperframes
for framework rules. This skill owns the scaffold and discipline;
/hyperframes
enforces the rules.
调用
/hyperframes
获取框架规则。本技能负责项目框架和流程规范;
/hyperframes
负责执行规则。

Scaffold 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.md
html
<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.md

Build rules

构建规则

  • Ambient background on
    data-track-index="0"
    for the full composition duration.
  • Kinetic-type openers: per-word stagger 0.06–0.10s.
  • Captions as body-level siblings of the root composition in
    index.html
    , each with
    data-track-index ≥ 20
    . Never inside scene timelines (MOTION_PHILOSOPHY §3.13).
  • Catalog blocks installed via
    npx hyperframes add <name>
    . Immediately scope the block's CSS to
    [data-composition-id="..."]
    — catalog blocks ship with
    html, body { ... }
    rules that bleed into the parent document when loaded as sub-compositions.
  • Vertical + face-cam: wrap native 1920×1080 face in a transform (
    translate
    +
    scale
    ) for bottom-half or full-screen mode. (If you end up here instead of
    /short-form-video
    , strongly consider the handoff.)
  • 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
    中根合成模块的同级元素,每个字幕的
    data-track-index ≥ 20
    。切勿放在场景时间轴内(MOTION_PHILOSOPHY §3.13)。
  • 组件库模块通过
    npx hyperframes add <name>
    安装。立即将模块的CSS作用域限定为
    [data-composition-id="..."]
    ——组件库模块默认带有
    html, body { ... }
    规则,作为子合成加载时会影响父文档。
  • 竖屏+摄像头画面:将原生1920×1080摄像头画面通过transform(
    translate
    +
    scale
    )调整为下半屏或全屏模式。(若未转交至
    /short-form-video
    而进入此步骤,强烈建议转交。)
  • 仅使用用户提供的内容:用户指定的配色、字体、Logo。请勿添加其他内容。若用户选择MOTION_PHILOSOPHY默认设置,从
    references/style-intake.md
    中获取配色+字体组合。

Determinism

确定性要求

No
Math.random()
, no
Date.now()
, no render-time
fetch()
. Use seeded PRNGs or harmonic-sin hashes (MOTION_PHILOSOPHY §3.10).

禁止使用
Math.random()
Date.now()
、渲染时的
fetch()
。仅使用种子化伪随机数生成器(PRNG)或谐波正弦哈希(MOTION_PHILOSOPHY §3.10)。

Gate 7 · Lint → Studio preview (PREVIEW GATE 1 — MANDATORY)

第7环节 · 代码检查→Studio预览(强制预览环节1)

  1. npx hyperframes lint
    — fix all errors, triage warnings.
  2. npx hyperframes preview
    in the background.
  3. Wait for "Studio running" on
    http://localhost:3002
    .
  4. Hand the user the URL plus individual composition URLs (
    http://localhost:3002/?comp=<id>
    ). If the project has WebGL shader blocks, lead with the individual URLs — software WebGL fallback can stall the master composition.
  5. WAIT for explicit "looks good, render a draft" before proceeding. Silence is not approval.
Hot reload is on — edits show up live.

  1. npx hyperframes lint
    — 修复所有错误,分类处理警告。
  2. 在后台执行
    npx hyperframes preview
  3. 等待提示“Studio running”,地址为
    http://localhost:3002
  4. 将URL加上单个合成模块的URL(
    http://localhost:3002/?comp=<id>
    )提供给用户。如果项目包含WebGL着色器模块,优先提供单个模块的URL——软件WebGL fallback可能会导致主合成模块加载卡顿。
  5. **等待用户明确回复“看起来不错,渲染草稿”**后再继续。沉默不代表批准。
热重载已开启——修改内容会实时显示。

Gate 8 · Draft render → visual verification → MP4 preview → final

第8环节 · 草稿渲染→视觉验证→MP4预览→最终渲染

Draft render

草稿渲染

bash
npx hyperframes render --quality draft --output renders/<slug>-draft.mp4
bash
npx hyperframes render --quality draft --output renders/<slug>-draft.mp4

Visual verification (MANDATORY before delivery)

视觉验证(交付前强制环节)

Lint passing ≠ design working. Extract frames and view them.
  1. mkdir -p renders/frames
  2. 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
  3. Call the
    Read
    tool on every PNG.
    The Read tool loads the image into context — don't just list filenames.
  4. 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.
  5. If anything's wrong: fix → re-render → re-verify. Never ship a broken draft.
代码检查通过≠设计无误。提取帧并查看每帧内容
  1. mkdir -p renders/frames
  2. 针对每个节拍的关键画面以及每个转场执行:
    bash
    ffmpeg -y -ss <t> -i renders/<slug>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png
  3. 对每张PNG调用
    Read
    工具
    。Read工具会将图片加载到上下文——请勿仅列出文件名。
  4. 逐帧确认:无面部裁剪、每个场景的摄像头模式正确、文字清晰且符合配色、无内容溢出、转场落在预期文字上、无空白帧。
  5. 若发现问题:修复→重新渲染→重新验证。切勿交付有问题的草稿。

MP4 preview (PREVIEW GATE 2 — MANDATORY)

MP4预览(强制预览环节2)

bash
npx serve renders -p 8080 -n
Do NOT use Python's
http.server
— it doesn't support HTTP Range requests, so scrubbing breaks.
Hand the user
http://localhost:8080/<slug>-draft.mp4
. WAIT for explicit sign-off on playback and audio sync.
bash
npx serve renders -p 8080 -n
请勿使用Python的
http.server
——它不支持HTTP Range请求,会导致拖拽播放失效。
http://localhost:8080/<slug>-draft.mp4
提供给用户。等待用户明确确认播放和音频同步无误

Final render

最终渲染

bash
npx hyperframes render --quality standard --output renders/<slug>-final.mp4
Report the output path. Done.
Full preflight + pre-delivery checklist:
Read: references/build-checklist.md

bash
npx hyperframes render --quality standard --output renders/<slug>-final.mp4
告知用户输出路径。完成。
完整预检+交付前检查清单:
Read: references/build-checklist.md

Non-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
    index.html
    at the workspace root.
  • DO NOT ask the user for assets before inventorying their workspace.
  • DO NOT skip the
    tl.to({}, { duration: SLOT_DURATION }, 0)
    anchor tween
    at the end of every sub-composition timeline. MOTION_PHILOSOPHY Law 11.
  • DO NOT use
    Math.random()
    /
    Date.now()
    inside render logic. Seeded hashes only.
  • DO NOT add
    class="clip"
    to
    <video>
    tags.
    It breaks them.
  • 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
    放在工作区根目录。
  • 在盘点用户工作区素材前,请勿向用户索要素材
  • 请勿省略每个子合成时间轴末尾的
    tl.to({}, { duration: SLOT_DURATION }, 0)
    锚点补间
    。这是MOTION_PHILOSOPHY第11条规则。
  • 请勿在渲染逻辑中使用
    Math.random()
    /
    Date.now()
    。仅使用种子化哈希。
  • 请勿给
    <video>
    标签添加
    class="clip"
    。这会导致视频失效。
  • 请勿向用户强加品牌风格。先询问;仅当用户明确拒绝提供时,才使用MOTION_PHILOSOPHY默认设置。

References

参考资料

  • references/interview-questions.md
    — full question bank by Gate
  • references/style-intake.md
    — style interview + MOTION_PHILOSOPHY defaults
  • references/catalog-intent-map.md
    — "user says X → install Y"
  • references/storyboard-template.md
    — beat-by-beat template + worked example
  • references/composition-scaffold.md
    — scoped-styles + IIFE GSAP boilerplate
  • references/build-checklist.md
    — preflight + pre-delivery gates
External (workspace-level):
  • MOTION_PHILOSOPHY.md
    — the one external reference this skill assumes exists. Aesthetic baseline. Fallback lives in
    references/style-intake.md
    if the file is missing.
  • references/interview-questions.md
    — 各环节的完整问题库
  • references/style-intake.md
    — 风格访谈+MOTION_PHILOSOPHY默认设置
  • references/catalog-intent-map.md
    — “用户需求X→安装组件Y”映射
  • references/storyboard-template.md
    — 逐节拍模板+示例
  • references/composition-scaffold.md
    — 作用域样式+IIFE GSAP模板
  • references/build-checklist.md
    — 预检+交付前环节
外部(工作区级别):
  • MOTION_PHILOSOPHY.md
    — 本技能假设存在的唯一外部参考资料,作为美学基准。若文件缺失,使用
    references/style-intake.md
    中的 fallback 设置。

Related skills

相关技能

  • /hyperframes
    — framework rules, invoke at Gate 6
  • /hyperframes-cli
    — init · lint · preview · render · transcribe · tts
  • /hyperframes-registry
    — installing catalog blocks
  • /gsap
    — GSAP animation reference
  • /short-form-video
    — hand off at Gate 5 for 9:16 talking-head format
  • /website-to-hyperframes
    — hand off at Gate 1 if the starting input is a URL
  • /hyperframes
    — 框架规则,在第6环节调用
  • /hyperframes-cli
    — 初始化·代码检查·预览·渲染·转录·文本转语音
  • /hyperframes-registry
    — 安装组件库模块
  • /gsap
    — GSAP动画参考
  • /short-form-video
    — 第5环节转交,用于9:16访谈类格式
  • /website-to-hyperframes
    — 第1环节转交,用于输入为URL的场景