网站到 HyperFrames
捕获一个网站，然后从中制作专业视频。
用户会说：
- "捕获 https://... 并为我制作一个 25 秒的产品发布视频"
- "将此网站转换成 15 秒的 Instagram 社交广告"
- "从 https://... 创建一个 30 秒的产品演示视频"
工作流包含 7 个步骤。每个步骤都会生成一个工件，用于进入下一步。
步骤 1：捕获与理解
阅读： references/step-1-capture.md
运行捕获，读取提取的数据，并使用“写下来然后忘记”的方法构建一个工作摘要。
关卡： 打印你的网站摘要（名称、主色调、字体、关键资产、一句话氛围）。
步骤 2：编写 DESIGN.md
阅读： references/step-2-design.md
为捕获的网站编写一个简单的品牌参考。包含 6 个部分，约 90 行。这是一个速查表，不是创意计划——创意计划将在步骤 4 中完成。
关卡： DESIGN.md 存在于项目目录中。
步骤 3：编写脚本
阅读： references/step-3-script.md
编写旁白脚本。故事的骨干。场景时长来自旁白，而不是猜测。
关卡： SCRIPT.md 存在于项目目录中。
步骤 4：编写分镜
阅读： references/step-4-storyboard.md
编写每个节奏的创意方向：情绪、镜头、动画、过渡、资产、深度层次、音效。这是创意北极星——工程师用来构建每个合成的文档。
关卡： STORYBOARD.md 包含逐节奏方向和一个资产审计表。
步骤 5：生成配音并映射时间
生成 TTS 音频，逐字转录时间戳，并将时间戳映射到节奏。使用真实时长更新 STORYBOARD.md。
关卡： narration.wav（或 .mp3）+ transcript.json 存在。STORYBOARD.md 中的节奏时长已更新。
步骤 6：构建合成
阅读： /hyperframes 技能（调用它——每条规则都很重要）
阅读： references/step-6-build.md
按照分镜构建每个合成。在每个合成之后：进行自我审查，检查布局、资产放置和动画质量。
关卡： 每个合成都经过自我审查。没有重叠元素，没有错位资产，没有无动效的静态图像。
步骤 7：验证与交付
阅读： references/step-7-validate.md
代码检查、验证、预览。创建 HANDOFF.md 以实现多会话连续性。
关卡： npx hyperframes lint 和 npx hyperframes validate 通过，零错误。
快速参考
视频类型
| 类型 | 时长 | 节拍数 | 旁白 |
|---|---|---|---|
| 社交广告 (IG/TikTok) | 10-15 秒 | 3-4 | 可选钩子句 |
| 产品演示 | 30-60 秒 | 5-8 | 完整旁白 |
| 功能公告 | 15-30 秒 | 3-5 | 完整旁白 |
| 品牌视频 | 20-45 秒 | 4-6 | 可选，以音乐为主 |
| 发布预告片 | 10-20 秒 | 2-4 | 极简，高能量 |
格式
- 横屏： 1920x1080（默认）
- 竖屏： 1080x1920（Instagram 故事、TikTok）
- 方形： 1080x1080（Instagram 信息流）
参考文件
| 文件 | 何时阅读 |
|---|---|
| step-1-capture.md | 步骤 1 —— 读取捕获的数据 |
| step-2-design.md | 步骤 2 —— 编写 DESIGN.md |
| step-3-script.md | 步骤 3 —— 编写旁白脚本 |
| step-4-storyboard.md | 步骤 4 —— 逐节奏创意方向 |
| step-5-vo.md | 步骤 5 —— TTS、转录、时间映射 |
| step-6-build.md | 步骤 6 —— 构建合成并进行自我审查 |
| step-7-validate.md | 步骤 7 —— 代码检查、验证、预览、交接 |
| techniques.md | 步骤 4 和 6 —— 10 种视觉技巧及代码模式（SVG 绘制、Canvas 2D、3D、字体排印、Lottie、视频、打字效果、可变字体、MotionPath、过渡） |