website-to-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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-read-first
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-read-first
（完整路由表 + 《HyperFrames无法完成的任务》章节）。

用户的需求通常如下：

“把这个网站转换成15秒的Instagram社交短视频”
“从https://...制作30秒的网站导览/展示视频”
“捕获我们的主页，并用其视觉素材制作视频”

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

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

资产审核（步骤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.

Gate: Site summary printed — strategy-first (what the product does, who it's for, brand voice) before the asset / color / font inventory.

参考文档：references/step-0-capture.md

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

节点要求：输出网站摘要——先阐述战略层面内容（产品功能、目标受众、品牌语气），再列出资产/颜色/字体清单。

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中的子Agent提示会直接粘贴品牌价值，因此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和合成内容。子Agent会在每个节拍运行

hyperframes lint

和

hyperframes snapshot

，然后反馈结果。

节点要求：主Agent已对照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个章节）。 brief阶段浏览目录，构建阶段深入阅读特定章节
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技能中）