关于 website-to-hyperframes
将网站采集结果转为 HyperFrames 视频项目的工作流技能，带领创作者完成品牌分析、脚本与分镜、旁白计时、作品构建和验证。
主要功能
- 01采集并总结网站信息
- 02生成 DESIGN.md、SCRIPT.md 和 STORYBOARD.md
- 03生成旁白并映射逐词时间
- 04构建并检查视频作品
- 05验证并预览 Studio 项目
适用场景
- 01根据网站制作短社交广告
- 02制作带旁白的产品演示
- 03准备功能发布视频或上线预告
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/website-to-hyperframes确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/step-1-capture.mdstep-2-design.mdstep-3-script.mdstep-4-storyboard.mdstep-5-vo.mdstep-6-build.mdstep-7-validate.md详细介绍
Website 转换为 HyperFrames
捕获网站，然后据此制作专业视频。
用户可能会这样提出需求：
- “捕获 https://...，并为我制作一段 25 秒的产品发布视频”
- “把这个网站改编成一段适用于 Instagram 的 15 秒社交广告”
- “根据 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 并映射时间
生成 TTS 音频，转录并获取词级时间戳，再将时间戳映射到各个节拍。使用实际时长更新 STORYBOARD.md。
门槛： 存在 narration.wav（或 .mp3）和 transcript.json。STORYBOARD.md 中的节拍时间已更新。
步骤 6：构建合成
阅读： hyperframes 技能（加载该技能——每条规则都很重要）
阅读： references/step-6-build.md
按照分镜构建每个合成。每完成一个合成后，都要自我检查布局、素材摆放和动画质量。
门槛： 每个合成都已完成自我检查。没有元素重叠、素材错位或缺少动态效果的静态图片。
步骤 7：验证并交付
阅读： references/step-7-validate.md
执行 lint、验证、生成快照和预览。首先向用户交付 localhost Studio 项目 URL
（http://localhost:<port>/#project/<project-name>）——只有在用户明确要求时
才渲染为 MP4。不要将 index.html 视为项目交付链接；它仅作为源代码上下文。
门槛： npx hyperframes lint 和 npx hyperframes validate 均通过且无错误，最终回复中包含当前有效的 Studio 项目 URL。
快速参考
视频类型
| 类型 | 时长 | 节拍数 | 旁白 |
|---|---|---|---|
| 社交广告（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 步 — 11 种视觉技巧及代码模式（SVG 绘图、Canvas 2D、3D、排版、Lottie、视频、打字、可变字体、MotionPath、转场、音频响应） |