Website to HyperFrames 是一个把网站捕捉并转化为专业视频的技能，归属于 hyperframes-student-kit。当用户提供一个 URL 并希望生成视频，或提出类似“capture this site”“turn this into a video”“make a promo from my site”的需求，或想要社交广告、产品导览、任何基于现有网站的视频内容时，可以使用该技能。即使用户只是粘贴一个网址，也可以适用。
该技能的工作流包含 7 个步骤，每一步都会产生一个产物，作为进入下一步的门槛。
第一步：捕捉与理解
运行捕捉，阅读提取的数据，并使用 write-down-and-forget 方法构建工作摘要。门槛：打印网站摘要（名称、主要颜色、字体、关键资产、一句话氛围）。参考文件：references/step-1-capture.md。
第二步：编写 DESIGN.md
为捕捉的网站编写一份简单的品牌参考。共 6 个部分，约 90 行。它是速查表，而不是创意方案，创意方案在第四步。门槛：项目目录中存在 DESIGN.md。参考文件：references/step-2-design.md。
第三步：编写 SCRIPT
撰写旁白脚本。这是故事骨架。场景时长来自旁白，而不是靠猜测。门槛：项目目录中存在 SCRIPT.md。参考文件：references/step-3-script.md。
第四步：编写 STORYBOARD
编写逐节拍的创意指导：情绪、镜头、动画、转场、资产、景深层次、音效。这是创意北极星，是工程师构建每个 composition 时遵循的文档。门槛：存在 STORYBOARD.md，包含逐节拍指导和资产审计表。参考文件：references/step-4-storyboard.md。
第五步：生成 VO 并映射时间
生成 TTS 音频，转写以获得词级时间戳，并把时间戳映射到节拍。用真实时长更新 STORYBOARD.md。门槛：存在 narration.wav（或 .mp3）和 transcript.json，STORYBOARD.md 中的节拍时间已更新。参考文件：references/step-5-vo.md。
第六步：构建 Compositions
阅读 /hyperframes 技能（调用它，每条规则都很重要），并阅读 references/step-6-build.md。按照 storyboard 构建每个 composition。每完成一个后进行自审，检查布局、资产放置和动画质量。门槛：每个 composition 都已自审。没有重叠元素、没有错放资产、没有无运动的静态图像。
第七步：验证与交付
阅读 references/step-7-validate.md。进行 lint、validate、preview。创建 HANDOFF.md 以支持多会话连续性。门槛：npx hyperframes lint 和 npx hyperframes validate 通过且零错误。
快速参考
视频类型
| 类型 | 时长 | 拍数 | 旁白 |
|---|---|---|---|
| 社交广告（IG/TikTok） | 10-15s | 3-4 | 可选钩子句 |
| 产品演示 | 30-60s | 5-8 | 完整旁白 |
| 功能发布 | 15-30s | 3-5 | 完整旁白 |
| 品牌短片 | 20-45s | 4-6 | 可选，音乐为主 |
| 发布预告 | 10-20s | 2-4 | 极简，高能 |
格式
- 横屏：1920x1080（默认）
- 竖屏：1080x1920（Instagram Stories、TikTok）
- 方形：1080x1080（Instagram feed）
参考文件
| 文件 | 阅读时机 |
|---|---|
| references/step-1-capture.md | 第一步 — 阅读捕捉数据 |
| references/step-2-design.md | 第二步 — 编写 DESIGN.md |
| references/step-3-script.md | 第三步 — 编写旁白脚本 |
| references/step-4-storyboard.md | 第四步 — 逐节拍创意指导 |
| references/step-5-vo.md | 第五步 — TTS、转写、时间 |
| references/step-6-build.md | 第六步 — 构建 compositions 并自审 |
| references/step-7-validate.md | 第七步 — lint、validate、preview、交接 |
| references/techniques.md | 第四步和第六步 — 10 种视觉技术及代码模式（SVG 绘图、Canvas 2D、3D、排版、Lottie、视频、打字、可变字体、MotionPath、转场） |
关于该技能的收费、价格、平台支持范围、具体效果等事实，资料中暂未提供。