website-to-framevideo

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Website to FrameVideo

网站转FrameVideo

Orchestrate the 7-step workflow to capture a website and produce a professional video. This skill is the workflow coordinator — each step loads the appropriate skill or reference for implementation details.

编排7步工作流来捕获网站内容并制作专业视频。此技能是工作流协调器——每一步都会加载合适的技能或参考文档以获取实现细节。

When To Use

使用场景

User provides a URL and wants a video (product demo, social ad, brand reel)
User says "capture this site", "turn this into a video", "make a promo"
User wants a video based on existing website content

用户提供URL并想要生成视频（产品演示、社交广告、品牌短片）
用户提出“捕获这个网站”、“把这个转换成视频”、“制作宣传视频”等需求
用户需要基于现有网站内容生成视频

Quick Start

快速开始

Basic workflow for website → video:

bash

undefined

网站转视频的基础工作流：

bash

undefined

User provides URL

用户提供URL

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

"从https://example.com制作一个30秒的产品演示视频"

System orchestrates:

系统编排流程：

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


**Key points:**
- 💬 = requires user approval gate
- Each step loads specific skills/references progressively
- Autonomous mode still requires verification (no skipping QA)

---

捕获网站（步骤0）→ 提取品牌信息与内容
创建DESIGN.md（步骤1）→ 锁定视觉标识
确认核心信息（步骤2）→ 获取视频简报审批 💬
制作分镜脚本（步骤3）→ 获取叙事方案审批 💬
生成旁白（步骤4）→ 制作音频与时间轴
构建HTML（步骤5）→ 创建FrameVideo合成内容
验证与交付（步骤6）→ 质量检测 + Studio链接


**关键点：**
- 💬 = 需要用户审批环节
- 每一步会逐步加载特定技能/参考文档
- 自主模式仍需验证（不可跳过质量检测）

---

Workflow Overview

工作流概述

Each step produces an artifact that gates the next. Gates marked 💬 require user approval. The workflow loads skills and references progressively — only read what's needed for the current step.

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

每一步都会生成一个产物作为进入下一步的门槛。标记💬的环节需要用户审批。工作流会逐步加载技能与参考文档——仅阅读当前步骤所需内容即可。

步骤0：捕获与品牌分析       → 网站摘要
步骤1：品牌视觉标识         → DESIGN.md
步骤2：策略与核心信息       → 视频简报 💬
步骤3：分镜脚本创作        → STORYBOARD.md + SCRIPT.md 💬
步骤4：旁白、时间轴与字幕  → 音频 + 转录文本 💬
步骤5：构建合成内容         → index.html + 合成片段
步骤6：验证与交付           → Studio链接

Autonomous Mode Rules

自主模式规则

If user signals autonomous mode ("decide for me", "surprise me"):

✅ Auto-decide: TTS provider, voice, colors, beat count, music, captions
❌ Still required: Asset audit, per-beat HTML review, DoD checklist, verification disclosure

Autonomous mode = decide preferences, NOT skip verification.

如果用户开启自主模式（“帮我决定”、“给我惊喜”）：

✅ 自动决策： TTS服务商、语音类型、配色、节拍数、音乐、字幕
❌ 仍需完成： 资产审核、逐节拍HTML审查、DoD检查清单、验证披露

自主模式 = 决定偏好设置，而非跳过验证环节。

Step 0: Capture & Understand the Brand

步骤0：捕获与品牌分析

Load: references/step-0-capture.md

Capture the website using appropriate tool, extract brand assets (colors, fonts, images, copy), understand what the product does and who it's for.

Gate: Print site summary — strategy-first (product value, audience, brand voice) before asset inventory.

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

使用合适工具捕获网站，提取品牌资产（配色、字体、图片、文案），理解产品功能与目标受众。

门槛： 输出网站摘要——优先聚焦策略层面（产品价值、受众、品牌调性），再进行资产盘点。

Step 1: Brand Identity

步骤1：品牌视觉标识

Load: references/step-1-design.md

Write DESIGN.md covering visual identity: color palette, typography, component styles, layout principles. Use

design-styles.json

for exact computed values.

Gate:

DESIGN.md

exists with color palette, font choices, and do's/don'ts.

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

撰写DESIGN.md文档，涵盖视觉标识：调色板、排版、组件样式、布局原则。使用

design-styles.json

获取精确计算值。

门槛： 生成包含调色板、字体选择与设计规范的DESIGN.md文档。

Step 2: Strategy & Messaging

步骤2：策略与核心信息

Load: references/step-2-brief.md, scan references/capabilities.md TOC

Align with user on what the video must communicate. Parse user's prompt for video type and style. Lock the message and narrative arc before storyboarding.

Gate: Video type, duration, format, message, and narrative arc are locked.

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

与用户对齐视频必须传达的核心信息。解析用户提示中的视频类型与风格。在制作分镜前锁定核心信息与叙事脉络。

门槛： 视频类型、时长、格式、核心信息与叙事脉络已确认。

Step 3: Storyboard + Script 💬

步骤3：分镜脚本创作 💬

Load: references/step-3-storyboard.md

Write storyboard concept-first: message → narrative arc → beats → techniques per beat → brand accents. Write narration script to match. Present both to user for approval.

Gate:

STORYBOARD.md

SCRIPT.md

exist AND user has approved the plan.

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

以核心信息为起点创作分镜：核心信息→叙事脉络→节拍→每节拍技巧→品牌亮点。撰写匹配的旁白脚本。将两者提交给用户审批。

门槛： 生成STORYBOARD.md + SCRIPT.md文档，且用户已批准方案。

Step 4: VO, Timing + Captions 💬

步骤4：旁白、时间轴与字幕 💬

Load: references/step-4-vo.md Use:

framevideo-media

for TTS generation,

framevideo-voiceover-ssml

if pronunciation control needed

If no narration requested: ask about background music, skip to Step 5. Otherwise: choose TTS provider, generate audio, transcribe, map timestamps to beats.

Gate: Either (a) no narration, manual beat timings in storyboard, or (b)

narration.wav

transcript.json

exist and beat timings updated.

加载： references/step-4-vo.md 使用：

framevideo-media

生成TTS，如需控制发音可使用

framevideo-voiceover-ssml

如果无需旁白：询问背景音乐需求，直接进入步骤5。否则：选择TTS服务商、生成音频、转录文本、将时间戳映射到节拍。

门槛： 满足以下任一条件即可：(a) 无需旁白，分镜中包含手动设置的节拍时间；(b) 生成

narration.wav

transcript.json

文档，且已更新节拍时间。

Step 5: Build Compositions

步骤5：构建合成内容

Load:

framevideo

skill (entire skill — every rule matters) Load: references/step-5-build.md Use:

gsap

for animation (default), other animation adapters as needed

Build index.html and beat compositions following storyboard architecture. Sub-agents run

framevideo lint

and

framevideo snapshot

on each beat.

Gate: Every

compositions/beat-N.html

has been read top-to-bottom by main agent against DESIGN.md and STORYBOARD.md.

加载：

framevideo

技能（完整技能——所有规则均需遵守） 加载： references/step-5-build.md 使用：

gsap

制作动画（默认），按需使用其他动画适配器

按照分镜架构构建index.html与节拍合成内容。子代理会对每个节拍执行

framevideo lint

与

framevideo snapshot

操作。

门槛： 主代理已对照DESIGN.md与STORYBOARD.md完整审阅每个

compositions/beat-N.html

文件。

Step 6: Validate & Deliver

步骤6：验证与交付

Load: references/step-6-validate.md Use:

framevideo-visual-qa

for final review,

framevideo-cli

for validation

Run lint, validate, inspect. Take snapshots (formula:

max(beats × 3, ceil(duration_seconds / 2))

). Review each snapshot. Use visual QA to confirm brand assets don't obscure message and captions don't collide with content. Fix issues before delivering.

Deliver something you're proud of. Ask: would I post this with my name on it?

Gate:

npx framevideo lint

validate

inspect

pass with zero unaddressed issues, visual QA passes, final response includes Studio URL.

加载： references/step-6-validate.md 使用：

framevideo-visual-qa

进行最终审查，

framevideo-cli

进行验证

执行lint、验证、检查操作。生成快照（公式：

max(beats × 3, ceil(duration_seconds / 2))

）。审阅每个快照。使用视觉质量检测确认品牌资产未遮挡核心信息、字幕未与内容重叠。修复问题后再交付。

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

门槛：

npx framevideo lint

、

validate

、

inspect

操作零未解决问题通过，视觉质量检测通过，最终回复包含Studio链接。

Quick Reference

快速参考

Typical Video Formats

常见视频格式

Landscape: 1920x1080 (default)
Portrait: 1080x1920 (Instagram Stories, TikTok)
Square: 1080x1080 (Instagram feed)

横屏： 1920x1080（默认）
竖屏： 1080x1920（Instagram Stories、TikTok）
方形： 1080x1080（Instagram动态）

Reference Files

参考文件

File	When to Load
step-0-capture.md	Step 0: Capture site, write brand summary
step-1-design.md	Step 1: Write DESIGN.md
step-2-brief.md	Step 2: Align on message and arc
capabilities.md	Steps 2 & 5: Scan TOC, deep-dive as needed
step-3-storyboard.md	Step 3: Write storyboard + script
step-4-vo.md	Step 4: Generate audio and timing
step-5-build.md	Step 5: Build compositions
step-6-validate.md	Step 6: Validate and deliver

文件	加载时机
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：验证与交付

Skills Loaded by Step

各步骤加载的技能

Step	Skills
0	(capture tools)
1	(file operations)
2	(alignment, no skills)
3	(planning, no skills)
4	`framevideo-media` , `framevideo-voiceover-ssml` (optional)
5	`framevideo` , `gsap` , animation adapters as needed
6	`framevideo-cli` , `framevideo-visual-qa`

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

Integration

集成说明

This skill orchestrates:

framevideo — core composition authoring (Step 5)
framevideo-cli — validation commands (Step 6)
framevideo-media — TTS and transcription (Step 4)
framevideo-voiceover-ssml — pronunciation control (Step 4, optional)
framevideo-visual-qa — final quality review (Step 6)
gsap — animation (Step 5, default adapter)
chanjing-digital-human — if user wants digital human host (Step 4-5)

此技能编排以下工具：

framevideo — 核心合成内容创作（步骤5）
framevideo-cli — 验证命令（步骤6）
framevideo-media — TTS与转录（步骤4）
framevideo-voiceover-ssml — 发音控制（步骤4，可选）
framevideo-visual-qa — 最终质量审查（步骤6）
gsap — 动画制作（步骤5，默认适配器）
chanjing-digital-human — 若用户需要数字人主持（步骤4-5）

Validation

验证清单

After completing workflow:

All gates passed
```
npx framevideo lint
```
passes
```
npx framevideo validate
```
passes
```
npx framevideo inspect
```
passes
Visual QA checklist complete
Studio URL delivered
"What I did NOT verify" section included in summary

完成工作流后：

所有门槛已通过
```
npx framevideo lint
```
通过
```
npx framevideo validate
```
通过
```
npx framevideo inspect
```
通过
视觉质量检测清单已完成
已交付Studio链接
总结中包含“未验证内容”部分

Credits And References

致谢与参考

FrameVideo documentation: https://framevideo.dev
Workflow references:
```
references/
```
directory in this skill

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