website-to-framevideo

网站转 FrameVideo

编排 7 步工作流，捕获网站并制作专业视频。此技能是工作流协调器——每一步都会加载相应的技能或参考资料，以了解实现细节。

适用场景

• 用户提供 URL 并想制作视频（产品演示、社交广告、品牌短片）
• 用户说“捕获这个网站”“把这个做成视频”“制作宣传片”
• 用户想根据现有网站内容制作视频

快速开始

网站 → 视频的基本工作流：

# User provides URL
"Make a 30-second product demo video from https://example.com"

# System orchestrates:
1. Capture site (Step 0) → extract brand + content
2. Create DESIGN.md (Step 1) → lock visual identity
3. Align on message (Step 2) → get video brief approval 💬
4. Storyboard + script (Step 3) → get narrative approval 💬
5. Generate voiceover (Step 4) → produce audio + timing
6. Build HTML (Step 5) → create FrameVideo composition
7. Validate + deliver (Step 6) → QA + Studio URL

要点：

• 💬 = 需要用户批准
• 每一步都会逐步加载特定技能或参考资料
• 自主模式仍需验证（不得跳过 QA）

---

工作流概览

每一步都会生成一个用于进入下一步的产物。标记为 💬 的关卡需要用户批准。工作流会逐步加载技能和参考资料——只需阅读当前步骤所需的内容。

Step 0: Capture & Brand       → Site summary
Step 1: Brand Identity         → DESIGN.md
Step 2: Strategy & Messaging   → Video brief 💬
Step 3: Storyboard + Script    → STORYBOARD.md + SCRIPT.md 💬
Step 4: VO, Timing + Captions  → Audio + transcript 💬
Step 5: Build Compositions     → index.html + compositions
Step 6: Validate & Deliver     → Studio URL

自主模式规则

如果用户表示希望使用自主模式（“替我决定”“给我惊喜”）：

• ✅ 自动决定： TTS 提供商、语音、颜色、节拍数量、音乐、字幕
• ❌ 仍需完成： 资源审查、逐节拍 HTML 审核、DoD 清单、验证结果说明

自主模式 = 决定偏好，而不是跳过验证。

---

步骤 0：捕获网站并了解品牌

加载： references/step-0-capture.md

使用合适的工具捕获网站，提取品牌资源（颜色、字体、图片、文案），了解产品的功能及其目标用户。

关卡： 输出网站摘要——先介绍策略（产品价值、受众、品牌语气），再列出资源清单。

---

步骤 1：品牌形象

加载： references/step-1-design.md

编写 DESIGN.md，涵盖视觉形象：调色板、排版、组件样式、布局原则。使用 design-styles.json 获取准确的计算值。

关卡： DESIGN.md 已创建，包含调色板、字体选择以及注意事项。

---

步骤 2：策略与信息传达

加载： references/step-2-brief.md，浏览 references/capabilities.md 的目录

与用户确认视频必须传达的内容。解析用户的提示词，确定视频类型和风格。在制作分镜之前确定信息和叙事弧线。

关卡： 视频类型、时长、格式、信息和叙事弧线均已确定。

---

步骤 3：分镜 + 脚本 💬

加载： references/step-3-storyboard.md

先确定概念，再编写分镜：信息 → 叙事弧线 → 节拍 → 每个节拍的技巧 → 品牌点缀。编写相匹配的旁白脚本。将两者提交用户审批。

关卡： STORYBOARD.md + SCRIPT.md 已创建，且用户已批准方案。

---

步骤 4：旁白、时间安排 + 字幕 💬

加载： references/step-4-vo.md 使用： 使用 framevideo-media 生成 TTS；如需控制发音，则使用 framevideo-voiceover-ssml

如果用户不需要旁白：询问是否添加背景音乐，然后跳至步骤 5。否则：选择 TTS 提供商、生成音频、转录，并将时间戳映射到各个节拍。

关卡： 满足以下任一条件：(a) 无旁白，且分镜中设有手动节拍时间；或 (b) 已创建 narration.wav + transcript.json，并更新节拍时间。

---

步骤 5：构建合成

加载： framevideo 技能（完整技能——每条规则都很重要） 加载： references/step-5-build.md 使用： 使用 gsap 制作动画（默认），并按需使用其他动画适配器

根据分镜架构构建 index.html 和各节拍合成。子 Agent 会对每个节拍运行 framevideo lint 和 framevideo snapshot。

关卡： 主 Agent 已按照 DESIGN.md 和 STORYBOARD.md 从头到尾审阅每个 compositions/beat-N.html。

第 6 步：验证并交付

加载： references/step-6-validate.md 使用： 使用 framevideo-visual-qa 进行最终审核，使用 framevideo-cli 进行验证

运行 lint、validate 和 inspect。拍摄快照（公式：max(beats × 3, ceil(duration_seconds / 2))）。逐一审核每张快照。使用视觉 QA 确认品牌素材不会遮挡信息，字幕不会与内容重叠。交付前修复问题。

交付让你引以为傲的作品。 问问自己：我愿意署上自己的名字发布这段视频吗？

关卡： npx framevideo lint、validate、inspect 均通过且没有未解决的问题，视觉 QA 通过，最终回复中包含 Studio URL。

---

快速参考

常见视频格式

• 横屏： 1920x1080（默认）
• 竖屏： 1080x1920（Instagram Stories、TikTok）
• 方形： 1080x1080（Instagram 信息流）

参考文件

文件	何时加载
step-0-capture.md	第 0 步：捕获网站，撰写品牌摘要
step-1-design.md	第 1 步：编写 DESIGN.md
step-2-brief.md	第 2 步：就信息和叙事弧线达成一致
capabilities.md	第 2 和第 5 步：浏览目录，按需深入了解
step-3-storyboard.md	第 3 步：编写分镜脚本和脚本
step-4-vo.md	第 4 步：生成音频和时间安排
step-5-build.md	第 5 步：构建合成
step-6-validate.md	第 6 步：验证并交付

各步骤加载的技能

步骤	技能
0	（捕获工具）
1	（文件操作）
2	（对齐，无需技能）
3	（规划，无需技能）
4	framevideo-media、framevideo-voiceover-ssml（可选）
5	framevideo、gsap，以及按需使用的动画适配器
6	framevideo-cli、framevideo-visual-qa

---

集成

此技能负责协调以下工具：

• framevideo — 核心合成编写（第 5 步）
• framevideo-cli — 验证命令（第 6 步）
• framevideo-media — TTS 和转录（第 4 步）
• framevideo-voiceover-ssml — 发音控制（第 4 步，可选）
• framevideo-visual-qa — 最终质量审核（第 6 步）
• gsap — 动画（第 5 步，默认适配器）
• chanjing-digital-human — 用户需要数字人主持人时使用（第 4–5 步）

---

验证

完成工作流后：

• 所有关卡均已通过
• npx framevideo lint 通过
• npx framevideo validate 通过
• npx framevideo inspect 通过
• 视觉 QA 检查清单已完成
• 已交付 Studio URL
• 摘要中包含“我未验证的内容”部分

---

致谢与参考

• FrameVideo 文档：https://framevideo.dev
• 工作流参考：此技能中的 references/ 目录