HyperFrames：用 HTML 与智能体渲染视频

Write HTML. Render video. Built for agents.

Write HTML. Render video. Built for agents. Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows. Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video. Quick Start With an AI coding agent For Claude Code, install the versioned plugin: claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes To enable auto-update for the hyperframes marketplace, run claude in a terminal in your project. In Claude Code's terminal UI, run /plugin, then select Marketplaces → hyperframes → Enable auto-update. Afterward, use /hyperframes:hyperframes. See the plugin guide for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration. For standalone skills (including OpenCode), use: npx skills add heygen-com/hyperframes The picker opens with nothing pre-selected — the Core Skills group is all you need; /slideshow, /remotion-to-hyperframes and /figma install on demand. Agents and non-interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas skills add --all installs all 7 published skills. The six repo-internal skills under .claude/skills / .agents/skills are excluded by default. For the full published set use npx hyperframes skills. skills add resolves the skills.sh registry blob, which can lag main by hours. npx hyperframes skills update installs from the current main, so reach for it when you need the newest copy of a skill. Run project-local installs from your video project's directory. From a HyperFrames checkout, use npx hyperframes skills update for a global install instead: a project-local installer target can overlap the tracked skills/ source and overwrite uncommitted edits. See contributor setup. Try a prompt like: Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music. The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that support skills. Skills HyperFrames ships 7 skills. Make any video by asking for it; the /hyperframes skill carries the contract and the references (film, captions, overlays, motion, look). Read it first. For standalone installation, default to the core set (/hyperframes, /hyperframes-cli, /hyperframes-registry, /media-use). npx hyperframes skills update installs exactly that from anywhere; the interactive picker (npx skills add heygen-com/hyperframes) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without --skill installs all 7. Use npx skills add heygen-com/hyperframes --all to install the complete published set deliberately (skips the picker), or npx skills add heygen-com/hyperframes --skill <name> for just one (bare name, no leading /). Standalone installs stay lean after that: npx hyperframes init installs the core set only when it is missing and never touches a skill you already have (npx hyperframes skills update refreshes them, and never removes one); /figma, /slideshow and /remotion-to-hyperframes install on demand with npx hyperframes skills update <name>. Nothing re-pulls the full set behind your back. Plugin packages Plugins bundle the full skill catalog and use their agent's update manager. bun run package:agent-plugin builds the committed portable ZIP, source metadata, and SHA-256 checksum. See the maintainer checklist. Upload to Codex Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills: bun run package:codex-plugin This writes dist/hyperframes-plugin.zip with a hyperframes/ root folder and fails if the archive exceeds Codex's 100 MB upload limit. Core set Skill Use when /hyperframes Read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays with HyperFrames (HTML rendered to video). Holds the render contract and the work loop, and points to the references for format, motion, look, captions, whole films and storyboards. /hyperframes-cli The HyperFrames CLI by job — scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history — plus reading its JSON and recovering from build or render failures. /hyperframes-registry About 450 ready-made blocks and components installed as editable source — transitions, overlays, titles, kinetic type, captions, charts, maps, 3D, camera moves. Use before hand-building any named visual; also for hyperframes add and catalog. /media-use Get or make any media for a video — music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks — with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull. On demand Skill Use when /figma Bring Figma into a video — rendered assets, brand tokens, components, storyboard frames as reconstructed motion, shaders and connector-assisted motion. Use when you paste a figma.com link. /slideshow A presentation, pitch deck or interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode with speaker notes. Output is a navigable deck, not a rendered MP4. /remotion-to-hyperframes Bringing existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, other tools' renders), verified frame by frame. For visual design handoff workflows, see the Claude Design guide and Open Design guide. Manually wi