--- id: daily-website-to-hyperframes name: "website-to-hyperframes" url: https://skills.yangsir.net/skill/daily-website-to-hyperframes author: heygen-com domain: multimedia tags: ["video-editing", "web-scraping", "automation", "content-creation", "marketing"] install_count: 56600 rating: 4.70 (19 reviews) github: https://github.com/heygen-com/hyperframes --- # website-to-hyperframes > 自动截取网站并生成专业产品视频，支持自定义时长和平台格式，AI Agent Skill，提升工作效率和自动化能力 **Stats**: 56,600 installs · 4.7/5 (19 reviews) ## Before / After 对比 ### 产品视频制作 **Before**: 手动录制网站操作、剪辑视频、添加转场和配乐，一个产品演示视频需要 4-6 小时 **After**: 提供网站链接和目标时长，自动生成带动画和转场的专业产品视频，10 分钟完成 | Metric | Before | After | Change | |---|---|---|---| | 制作时间 | 300分钟 | 10分钟 | -96.7% | ## Readme # website-to-hyperframes # Website to 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. ## Step 1: Capture & Understand **Read:** [references/step-1-capture.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/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). ## Step 2: Write DESIGN.md **Read:** [references/step-2-design.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/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. ## Step 3: Write SCRIPT **Read:** [references/step-3-script.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/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. ## Step 4: Write STORYBOARD **Read:** [references/step-4-storyboard.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/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. ## Step 5: Generate VO + Map Timing **Read:** [references/step-5-vo.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/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. ## Step 6: Build Compositions **Read:** The `/hyperframes` skill (invoke it — every rule matters) **Read:** [references/step-6-build.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/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. ## Step 7: Validate & Deliver **Read:** [references/step-7-validate.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/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. ## 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 ### Format - **Landscape**: 1920x1080 (default) - **Portrait**: 1080x1920 (Instagram Stories, TikTok) - **Square**: 1080x1080 (Instagram feed) ### Reference Files File When to read [step-1-capture.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/step-1-capture.md) Step 1 — reading captured data [step-2-design.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/step-2-design.md) Step 2 — writing DESIGN.md [step-3-script.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/step-3-script.md) Step 3 — writing the narration script [step-4-storyboard.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/step-4-storyboard.md) Step 4 — per-beat creative direction [step-5-vo.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/step-5-vo.md) Step 5 — TTS, transcription, timing [step-6-build.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/step-6-build.md) Step 6 — building compositions with self-review [step-7-validate.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/step-7-validate.md) Step 7 — lint, validate, preview, handoff [techniques.md](https://github.com/heygen-com/hyperframes/blob/HEAD/skills/website-to-hyperframes/references/techniques.md) Steps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions) Weekly Installs2.4KRepository[heygen-com/hyperframes](https://github.com/heygen-com/hyperframes)GitHub Stars1.3KFirst Seen1 day agoSecurity Audits[Gen Agent Trust HubPass](/heygen-com/hyperframes/website-to-hyperframes/security/agent-trust-hub)[SocketPass](/heygen-com/hyperframes/website-to-hyperframes/security/socket)[SnykWarn](/heygen-com/hyperframes/website-to-hyperframes/security/snyk)Installed oncodex2.4Kcursor2.4Kopencode2.4Kgithub-copilot2.4Kgemini-cli2.4Kamp2.4K --- *Source: https://skills.yangsir.net/skill/daily-website-to-hyperframes* *Markdown mirror: https://skills.yangsir.net/api/skill/daily-website-to-hyperframes/markdown*