website-to-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

media-use: Before sourcing audio/images, call
/media-use
to resolve BGM/SFX/images from the HeyGen catalog. Run
--adopt
first to register existing assets. See
/media-use
skill.

media-use: 在获取音频/图像之前，调用
/media-use
从HeyGen资源库中获取背景音乐（BGM）/音效（SFX）/图像。先运行
--adopt
来注册现有资产。请查看
/media-use
技能。

Website to HyperFrames

网站转HyperFrames视频

Capture a website, then produce a professional video from it.

Confirm the route before Step 0. This skill makes a video of / from a general site. If the user is really marketing / launching / promoting a product (even from this URL, even "promo for our site") →
/product-launch-video
. A topic explainer with no site →
/faceless-explainer
; a GitHub PR →
/pr-to-video
; re-cutting / recoloring / reordering an existing video file → out of scope. Routed here on a vague "make a video", or unsure launch-vs-general-site? Read
/hyperframes
first (full routing table + § What HyperFrames cannot do).

Users say things like:

"Turn this website into a 15-second social clip for Instagram"
"Make a 30-second site tour / showcase from https://..."
"Capture our homepage and build a video from its own visuals"

The workflow has 7 steps. Each produces an artifact that gates the next. By default it's collaborative — gates marked 💬 stop and ask the user. If the user signals autonomous mode ("decide for me", "surprise me"), 💬 user-preference gates are skipped; see step-2-brief.md for how that propagates.

Autonomous mode is NOT "skip all gates." Auto mode covers user-preference questions (TTS provider, voice, color emphasis, beat count, music yes/no, captions yes/no — where the agent decides on the user's behalf). It does NOT cover quality-verification gates. The following remain non-skippable in auto mode:

Asset Audit (Step 3) — viewing contact sheets and justifying USE/SKIP for each asset
Per-beat HTML read (Step 5) — structured evidence block per beat
DoD checklist (Step 6) — including animation-map, per-warning WCAG verification, audio/motion playback
Honest disclosure section (Step 6) — "What I did NOT verify" must appear in your final summary

If you find yourself reasoning "auto mode says bias toward action, so I'll skip X" — and X is a verification gate, not a preference question — that reasoning is wrong. Bias toward action applies to deciding what to build, not to deciding whether to verify.

捕获网站内容，然后生成专业视频。

在第0步之前确认路径。本技能用于制作通用网站的视频。如果用户实际是要营销/发布/推广产品（即使素材来自该URL，即使是“为我们的网站做推广”）→ 请使用
/product-launch-video
。无网站的主题讲解→ 使用
/faceless-explainer
；GitHub PR→ 使用
/pr-to-video
；重新剪辑/调色/排序现有视频文件→ 不在本技能范围内。如果用户模糊要求“制作视频”，或不确定是发布场景还是通用网站场景？请先阅读
/hyperframes
（完整路径表 + § HyperFrames无法完成的任务）。

用户的常见需求如下：

“将这个网站转换成适合Instagram的15秒社交片段”
“从https://...制作一个30秒的网站导览/展示视频”
“捕获我们的主页并使用其自身视觉素材制作视频”

工作流程分为7个步骤，每个步骤都会生成一个成果，作为进入下一步的前提。默认模式为协作模式——标记💬的节点会暂停并询问用户。如果用户开启自主模式（“帮我决定”、“给我惊喜”），则会跳过💬标记的用户偏好节点；具体规则请查看step-2-brief.md。

自主模式并非“跳过所有节点”。自主模式仅覆盖用户偏好类问题（TTS提供商、语音类型、强调色、节拍数、是否添加音乐、是否添加字幕——由代理替用户决定）。它不会跳过质量验证节点。以下节点在自主模式下仍不可跳过：

资产审核（第3步）——查看联系表并说明每个资产的使用/跳过理由
逐节拍HTML检查（第5步）——每个节拍的结构化证据块
DoD检查清单（第6步）——包括动画映射、每项警告的WCAG验证、音频/动效播放检查
诚实披露部分（第6步）——最终总结中必须包含“我未验证的内容”

如果你认为“自主模式要求偏向行动，所以我要跳过X”——而X是验证节点而非偏好问题——这种想法是错误的。偏向行动适用于决定要构建什么，而非决定是否验证。

Step 0: Capture & Understand the Brand

第0步：捕获并理解品牌

Read: references/step-0-capture.md

Capture the site, then read the extracted data to understand the brand and product — what it does, who it's for, what voice it speaks in, what mood it lives in. The captured assets are a brand toolkit for later, not the building blocks the video is made from.

Show sign-in status before the brief — run

npx hyperframes auth status

and relay its output verbatim (don't paraphrase or rewrite it). It reports whether voice/BGM will use HeyGen or local engines and, when not signed in, how to sign in. If not signed in, STOP and wait for the user to choose — sign in, or say "go"/"offline" to continue with local engines — before asking the brief or anything else. Treat it as a real decision point, not a passing note; don't fold the choice into the brief question, and don't write keys into a per-repo

.env

. (In autonomous mode, note the status and continue offline.) See

../hyperframes-media

→ Preflight for the canonical guidance.

Gate: Site summary printed — strategy-first (what the product does, who it's for, brand voice) before the asset / color / font inventory; sign-in status was shown (signed in, or continuing offline).

阅读： references/step-0-capture.md

捕获网站内容，然后读取提取的数据以理解品牌和产品——它的功能、目标用户、品牌语气、风格氛围。捕获的资产将作为后续的品牌工具包，而非视频制作的直接素材。

在简报前显示登录状态——运行

npx hyperframes auth status

并逐字传达输出内容（不要意译或改写）。它会报告语音/BGM将使用HeyGen还是本地引擎，以及未登录时的登录方式。如果未登录，请暂停并等待用户选择——登录，或输入“go”/“offline”以使用本地引擎继续——之后再询问简报或其他问题。 将其视为真实的决策点，而非附带说明；不要将选择融入简报问题，也不要将密钥写入每个仓库的

.env

文件。（在自主模式下，记录状态并离线继续。）请查看

../hyperframes-media

→ Preflight获取标准指导。

节点要求： 输出网站摘要——优先说明策略（产品功能、目标用户、品牌语气），然后是资产/颜色/字体清单；已显示登录状态（已登录，或离线继续）。

Step 1: Brand Identity

第1步：品牌标识

Read: references/step-1-design.md

Write DESIGN.md — a brand cheat sheet covering the visual identity: colors, typography, component styles, layout principles. Use

design-styles.json

for exact computed values.

Speed option: For fast-pacing videos (billboard-per-beat), DESIGN.md can be a 50-line summary of colors + fonts + do's/don'ts — not a 300-line document. The sub-agent prompt in Step 5 pastes brand values directly, so DESIGN.md depth only matters for complex compositions.

Gate:

DESIGN.md

exists (any length) with at minimum: color palette, font choices, and do's/don'ts.

阅读： references/step-1-design.md

编写DESIGN.md——一份涵盖视觉标识的品牌备忘单：颜色、排版、组件样式、布局原则。使用

design-styles.json

获取精确的计算值。

快速选项： 对于快节奏视频（逐节拍展示），DESIGN.md可以是一份50行的颜色+字体+注意事项摘要——无需300行的文档。第5步中的子代理提示会直接粘贴品牌价值，因此DESIGN.md的深度仅对复杂合成内容有影响。

节点要求： 存在DESIGN.md（任意长度），至少包含：调色板、字体选择、注意事项。

Step 2: Strategy & Messaging

第2步：策略与信息传递

Read: references/step-2-brief.md, references/capabilities.md (scan the Table of Contents — deep-dive sections only as needed)

Align with the user on what the video must communicate before talking visuals or assets. Parse the user's prompt — they probably already gave you the video type and style. Ask only what's missing: the ONE thing this video must say, the narrative arc, and the audience.

Gate: Video type, duration, format, and — critically — the message and narrative arc are locked. Without those, Step 3 can't write a concept-first storyboard.

阅读： references/step-2-brief.md、references/capabilities.md（扫描目录——仅在需要时深入阅读特定章节）

在讨论视觉效果或资产之前，与用户对齐视频必须传达的内容。解析用户的提示——他们可能已经说明了视频类型和风格。仅询问缺失的信息：视频必须传达的核心内容、叙事脉络、目标受众。

节点要求： 视频类型、时长、格式，以及关键的——核心信息和叙事脉络已确定。没有这些，第3步无法编写以概念为先的故事板。

Step 3: Storyboard + Script 💬

第3步：故事板 + 脚本 💬

Read: references/step-3-storyboard.md

Write the storyboard concept-first: message → narrative arc → beats that serve the arc → techniques per beat → brand accents pass at the end. Then write the narration script to match. Present both to the user with a beat-by-beat summary. Iterate until they approve.

Gate:

STORYBOARD.md

SCRIPT.md

exist AND the user has approved the plan.

阅读： references/step-3-storyboard.md

编写以概念为先的故事板：核心信息→叙事脉络→服务于脉络的节拍→每个节拍的技巧→最后添加品牌亮点。然后编写匹配的旁白脚本。向用户展示两者并提供逐节拍摘要，迭代直至用户批准。

节点要求： 存在

STORYBOARD.md

SCRIPT.md

，且用户已批准方案。

Step 4: VO, Timing + Captions 💬

第4步：旁白、计时 + 字幕 💬

Read: references/step-4-vo.md

If Step 2 said no narration — ask about background music, then skip to Step 5. Otherwise: ask the user which TTS provider (HeyGen TTS, ElevenLabs, or Kokoro), generate audio, transcribe, map timestamps to beats. Then ask about captions.

Gate: Either (a) no narration was requested and storyboard has manual beat timings, or (b)

narration.wav

transcript.json

exist and beat timings updated with real durations.

阅读： references/step-4-vo.md

如果第2步要求无旁白——询问背景音乐相关问题，然后跳至第5步。否则：询问用户选择哪个TTS提供商（HeyGen TTS、ElevenLabs或Kokoro），生成音频，转录，将时间戳映射到节拍。然后询问字幕相关问题。

节点要求： 要么(a)未要求旁白且故事板有手动节拍计时，要么(b)存在

narration.wav

transcript.json

且节拍计时已更新为实际时长。

Step 5: Build Compositions

第5步：构建合成内容

Read: The

hyperframes

skill (load it — every rule matters) Read: references/step-5-build.md

Build index.html and compositions following the architecture and pacing chosen in the storyboard (Step 3). Sub-agents run

hyperframes lint

and

hyperframes snapshot

on each beat before reporting back.

Gate: Every

compositions/beat-N.html

has been read top-to-bottom by the main agent against DESIGN.md and STORYBOARD.md. The per-beat checklist lives in step-5-build.md.

阅读：

hyperframes

技能（加载它——每条规则都很重要） 阅读： references/step-5-build.md

按照故事板（第3步）中选择的架构和节奏构建index.html和合成内容。子代理会在每个节拍运行

hyperframes lint

和

hyperframes snapshot

，然后反馈结果。

节点要求： 主代理已对照DESIGN.md和STORYBOARD.md从头到尾检查每个

compositions/beat-N.html

。逐节拍检查清单位于step-5-build.md中。

Step 6: Validate & Deliver

第6步：验证与交付

Read: references/step-6-validate.md

Lint, validate, take snapshots scaled to video length (formula:

max(beats × 3, ceil(duration_seconds / 2))

), and review each one. Fix issues before delivering. Deliver the localhost Studio project URL — only render to MP4 on explicit user request. Surface that Studio URL only at handoff — it is the final, stable preview; the build-phase snapshots are headless, so do not pop a preview mid-build.

Deliver something you're proud of. Before handing off, ask yourself: would I post this on social media with my name on it? If not, fix what's wrong.

Gate:

npx hyperframes lint

and

npx hyperframes validate

pass with zero errors, and the final response includes the active Studio project URL.

阅读： references/step-6-validate.md

进行代码检查、验证、截取与视频时长匹配的快照（公式：

max(beats × 3, ceil(duration_seconds / 2))

），并逐一审核。交付前修复问题。交付本地Studio项目URL——仅在用户明确要求时才渲染为MP4。仅在交接时显示Studio URL——它是最终的稳定预览；构建阶段的快照是无头模式的，因此不要在构建过程中弹出预览。

交付你引以为傲的成果。交接前，问问自己：我会把这个视频署上自己的名字发布到社交媒体吗？如果不会，就修复问题。

节点要求：

npx hyperframes lint

和

npx hyperframes validate

零错误通过，且最终回复包含可用的Studio项目URL。

Quick Reference

快速参考

Video Types

视频类型

Typical constraints by video type — use as a starting point, not a formula. Beat count should follow from the content and the narration, not from a target range.

Type	Typical duration	Duration driver	Narration
Social ad (IG/TikTok)	10–15s	Platform limit	Optional
Product demo	30–60s	Script length	Full narration
Feature announcement	15–30s	Feature complexity	Full narration
Brand reel	20–45s	Music track	Optional, music focus
Launch teaser	10–20s	Hook energy	Minimal

Beat count is not in this table intentionally — it should come from the storyboard, not from "social ad = 3-4 beats." A social ad for a complex product might need 5 well-timed beats. A brand reel with one strong visual thesis might need 3.

不同视频类型的典型约束——用作起点，而非固定公式。节拍数应来自内容和旁白，而非目标范围。

类型	典型时长	时长决定因素	旁白
社交广告（IG/TikTok）	10–15秒	平台限制	可选
产品演示	30–60秒	脚本长度	完整旁白
功能发布公告	15–30秒	功能复杂度	完整旁白
品牌宣传片	20–45秒	音乐曲目	可选，以音乐为主
发布预告	10–20秒	吸引力强度	极简旁白

本表未包含节拍数，因为它应来自故事板，而非“社交广告=3-4个节拍”。复杂产品的社交广告可能需要5个节奏恰当的节拍。视觉主题鲜明的品牌宣传片可能只需要3个节拍。

Format

格式

Landscape: 1920x1080 (default)
Portrait: 1080x1920 (Instagram Stories, TikTok)
Square: 1080x1080 (Instagram feed)

横屏: 1920x1080（默认）
竖屏: 1080x1920（Instagram Stories、TikTok）
方形: 1080x1080（Instagram动态）

Reference Files

参考文件

File	When to read
step-0-capture.md	Step 0 — capture, understand the brand and product, write strategy-first site summary
step-1-design.md	Step 1 — write DESIGN.md brand cheat sheet (5 sections, 250-350 lines; 50-line fast-path for billboard-style social ads)
step-2-brief.md	Step 2 — align on message, narrative arc, audience with user
capabilities.md	Steps 2 & 5 — full inventory of what HyperFrames can do (24 sections). Scan the TOC during the brief, deep-dive specific sections during build
step-3-storyboard.md	Step 3 — storyboard + script (combined) with user review gate
step-4-vo.md	Step 4 — TTS provider choice, generation, timing
step-5-build.md	Step 5 — build index.html + compositions
step-6-validate.md	Step 6 — lint, validate, snapshots (scaled to video length), preview
techniques.md	Steps 3 & 5 — 13 primitive animation techniques with code patterns (adapt, don't copy-paste)
html-in-canvas-patterns.md	Step 5 — complete code patterns for HTML-in-Canvas effects (lives in the hyperframes skill)

文件	阅读时机
step-0-capture.md	第0步——捕获内容、理解品牌和产品、编写以策略为先的网站摘要
step-1-design.md	第1步——编写DESIGN.md品牌备忘单（5个章节，250-350行；快节奏社交广告可使用50行的快速版本）
step-2-brief.md	第2步——与用户对齐核心信息、叙事脉络、目标受众
capabilities.md	第2步和第5步——HyperFrames的完整功能清单（24个章节）。简报阶段扫描目录，构建阶段深入阅读特定章节
step-3-storyboard.md	第3步——故事板+脚本（合并），需用户审核
step-4-vo.md	第4步——TTS提供商选择、音频生成、计时
step-5-build.md	第5步——构建index.html + 合成内容
step-6-validate.md	第6步——代码检查、验证、快照（与视频时长匹配）、预览
techniques.md	第3步和第5步——13种基础动画技巧及代码模式（适配使用，不要复制粘贴）
html-in-canvas-patterns.md	第5步——HTML-in-Canvas效果的完整代码模式（位于hyperframes技能中）