website-to-hyperframes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Website to HyperFrames

网站转HyperFrames视频

Capture a website, then produce a professional video from it.

Users say things like:

"Capture https://... and make me a 25-second product launch video"
"Turn this website into a 15-second social ad for Instagram"
"Create a 30-second product tour from https://..."

The workflow has 7 steps. Each produces an artifact that gates the next.

捕获网站内容，然后生成专业视频。

用户的常见需求如下：

"捕获https://...并为我制作一个25秒的产品发布视频"
"把这个网站转换成适合Instagram的15秒社交广告"
"基于https://...制作一个30秒的产品导览视频"

该流程包含7个步骤，每个步骤生成的成果是进入下一步的前提条件。

Step 1: Capture & Understand

步骤1：捕获与理解

Read: references/step-1-capture.md

Run the capture, read the extracted data, and build a working summary using the write-down-and-forget method.

Gate: Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).

阅读参考文档： references/step-1-capture.md

执行捕获操作，读取提取的数据，并使用“记录后暂存”方法构建一份可用的摘要。

进入下一步的前提： 输出网站摘要（名称、主色调、字体、关键资源、一句话风格描述）。

Step 2: Write DESIGN.md

步骤2：编写DESIGN.md

Read: references/step-2-design.md

Write a simple brand reference for the captured website. 6 sections, ~90 lines. This is a cheat sheet, not the creative plan — that comes in Step 4.

Gate:

DESIGN.md

exists in the project directory.

阅读参考文档： references/step-2-design.md

为捕获的网站编写一份简洁的品牌参考文档，包含6个部分，约90行内容。这是一份速查手册，而非创意方案——创意方案将在步骤4中完成。

进入下一步的前提： 项目目录中存在

DESIGN.md

文件。

Step 3: Write SCRIPT

步骤3：编写脚本

Read: references/step-3-script.md

Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.

Gate:

SCRIPT.md

exists in the project directory.

阅读参考文档： references/step-3-script.md

编写旁白脚本，这是视频的故事核心。场景时长由旁白内容决定，而非主观猜测。

进入下一步的前提： 项目目录中存在

SCRIPT.md

文件。

Step 4: Write STORYBOARD

步骤4：编写分镜脚本

Read: references/step-4-storyboard.md

Write per-beat creative direction: mood, camera, animations, transitions, assets, depth layers, SFX. This is the creative north star — the document the engineer follows to build each composition.

Gate:

STORYBOARD.md

exists with beat-by-beat direction and an asset audit table.

阅读参考文档： references/step-4-storyboard.md

为每个节拍编写创意指导：氛围、镜头、动画、转场、资源、分层深度、音效。这是创意的核心基准——工程师将依据此文档构建每个画面组合。

进入下一步的前提： 存在包含逐节拍指导和资源审核表的

STORYBOARD.md

文件。

Step 5: Generate VO + Map Timing

步骤5：生成旁白音频 + 映射时间轴

Read: references/step-5-vo.md

Generate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.

Gate:

narration.wav

(or .mp3) +

transcript.json

exist. Beat timings in STORYBOARD.md updated.

阅读参考文档： references/step-5-vo.md

生成TTS（文本转语音）音频，转录得到逐词时间戳，并将时间戳映射到各个节拍。更新

STORYBOARD.md

中的实际时长。

进入下一步的前提： 存在

narration.wav

（或.mp3）文件和

transcript.json

文件，且

STORYBOARD.md

中的节拍时间已更新。

Step 6: Build Compositions

步骤6：构建画面组合

Read: The

/hyperframes

skill (invoke it — every rule matters) Read: references/step-6-build.md

Build each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.

Gate: Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.

阅读参考文档：

/hyperframes

技能（调用该技能——所有规则均需遵守） 阅读参考文档： references/step-6-build.md

按照分镜脚本构建每个画面组合。完成每个组合后，自行检查布局、资源位置和动画质量。

进入下一步的前提： 所有画面组合均已完成自我审核，无元素重叠、资源错位或无动态效果的静态图片。

Step 7: Validate & Deliver

步骤7：验证与交付

Read: references/step-7-validate.md

Lint, validate, preview. Create a HANDOFF.md for multi-session continuity.

Gate:

npx hyperframes lint

and

npx hyperframes validate

pass with zero errors.

阅读参考文档： references/step-7-validate.md

检查、验证、预览视频。创建

HANDOFF.md

文件以保证多会话的连续性。

进入下一步的前提：

npx hyperframes lint

和

npx hyperframes validate

命令执行无错误。

Quick Reference

快速参考

Video Types

视频类型

Type	Duration	Beats	Narration
Social ad (IG/TikTok)	10-15s	3-4	Optional hook sentence
Product demo	30-60s	5-8	Full narration
Feature announcement	15-30s	3-5	Full narration
Brand reel	20-45s	4-6	Optional, music focus
Launch teaser	10-20s	2-4	Minimal, high energy

类型	时长	节拍数	旁白要求
社交广告（IG/TikTok）	10-15秒	3-4	可选钩子语句
产品演示视频	30-60秒	5-8	完整旁白
功能发布视频	15-30秒	3-5	完整旁白
品牌宣传视频	20-45秒	4-6	可选，以音乐为主
发布预告视频	10-20秒	2-4	极简风格，高能量

Format

视频格式

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

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

Reference Files

参考文件

File	When to read
step-1-capture.md	Step 1 — reading captured data
step-2-design.md	Step 2 — writing DESIGN.md
step-3-script.md	Step 3 — writing the narration script
step-4-storyboard.md	Step 4 — per-beat creative direction
step-5-vo.md	Step 5 — TTS, transcription, timing
step-6-build.md	Step 6 — building compositions with self-review
step-7-validate.md	Step 7 — lint, validate, preview, handoff
techniques.md	Steps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions)

文件	阅读时机
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、转场）