website-to-hyperframes

网站转 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：编写 SCRIPT

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

编写旁白稿。这是故事主线。场景时长应根据旁白确定，而不是凭猜测。

关卡： 项目目录中存在 SCRIPT.md。

---

步骤 4：编写 STORYBOARD

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

为每个节拍编写创意指导：氛围、镜头、动画、转场、素材、景深层次和音效。这是创意的指引——工程师将依据这份文档构建每个合成。

关卡： STORYBOARD.md 中包含逐节拍指导和素材审核表。

---

步骤 5：生成 VO + 映射时间

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

生成 TTS 音频，转录并获取词级时间戳，再将时间戳映射到各个节拍。使用实际时长更新 STORYBOARD.md。

关卡： 存在 narration.wav（或 .mp3）和 transcript.json。STORYBOARD.md 中的节拍时间已更新。

---

步骤 6：构建合成

阅读： /hyperframes 技能（调用该技能——每条规则都很重要） 阅读： references/step-6-build.md

按照分镜构建每个合成。每完成一个合成后，都要自行检查布局、素材摆放和动画质量。

关卡： 每个合成都已完成自检。没有元素重叠、素材摆放错误或缺少动态效果的静态图片。

---

步骤 7：验证并交付

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

执行 lint、验证和预览。为多会话协作创建 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 信息流）

参考文件

文件	阅读时机
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 — lint、验证、预览、交接
techniques.md	步骤 4 和 6 — 10 种视觉技巧及代码模式（SVG 绘图、Canvas 2D、3D、排版、Lottie、视频、打字效果、可变字体、MotionPath、转场）