Communitygithub.com

HyperFrames CLI 视频工作室

使用 HyperFrames CLI 开发循环:初始化、添加、目录、捕获、检查、校验、快照、比较、质量比较、预览、播放、演示、节拍、关键帧、单次或批量渲染、发布、云端、云运行、反馈、lambda、诊断、浏览器、信息、升级、技能、合成、文档、基准测试、遥测、转录、认证、TTS 和背景移除。也用于诊断构建或渲染失败。validate、inspect 和 layout 是已弃用的别名;应使用 check。覆盖本地、HeyGen 托管云端、AWS Lambda 和 Google Cloud Run 渲染。

HyperFrames CLI 视频工作室 是什么?

HyperFrames CLI 是一个全面的开发者工具,用于构建和渲染基于 Web 的视频合成。它支持完整的开发工作流程:从项目初始化(`init`)、创作(通过 `/hyperframes-core`)、快速迭代检查(`lint`)和最终验证(`check`,自动包含 lint),到使用 Studio 预览(`preview`)和最终渲染(`render`)。该工具在多种平台上运行:本地开发(需要 Node.js 22+ 和 FFmpeg)、HeyGen 托管的零基础设施云端、AWS Lambda 和 Google Cloud Run,为不同的部署需求提供灵活性。其核心优势在于严谨的审计流程:`check` 命令在单个浏览器会话中审计运行时错误、资源请求失败、布局问题、运动 JSON 断言和 WCAG 对比度,并通过退出码标识持久性问题。此外,它还支持子合成冒烟测试(`snapshot`)、变量驱动的批量渲染、Studio 定向编辑(通过 `preview --context`)以及详细的反馈报告,包含重现包,以维护高质量的视频输出。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/hyperframes-cli

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

HyperFrames CLI

除非项目说明提供了包装器,否则以 npx hyperframes ... 运行命令。当存在包装器时,遵循它。CLI 需要 Node.js 22 或更高版本以及 FFmpeg。

开发循环

  1. 脚手架: npx hyperframes init <project> 或捕获一个站点。在非 TTY 模式下,传递 --non-interactive --example=<name>。
  2. 创作: 使用 /hyperframes-core 编写合成。
  3. 编辑时快速获取反馈: 在第一次 HTML 传递之后以及结构更改之后,运行 npx hyperframes lint。
  4. 运行最终关卡: 运行 npx hyperframes check;它会在打开浏览器之前重新运行 lint。不要预先附加一个多余的独立 lint 调用。添加 --snapshots 以获取带注释的概览帧和查找裁剪。
  5. 检查子合成: 当 index.html 挂载了 data-composition-src 时,捕获中间点快照并检查每个挂载的场景。
  6. 打开最终的 Studio 预览: 运行 npx hyperframes preview,将时间线项目 URL 交给用户,并询问是修改还是渲染。
  7. 仅在批准后渲染: 迭代使用草稿质量,交付使用高质量。
  8. 验证输出: 确认文件存在、非空且具有合理的时长。
# 快速迭代检查;创作时根据需要重复。
npx hyperframes lint

# 必需的最终关卡;包含 lint。
npx hyperframes check
npx hyperframes preview
npx hyperframes render --quality high --output out.mp4
test -s out.mp4
ffprobe -v error -show_format out.mp4

check 首先运行 lint,然后使用一个浏览器会话和一次定位扫描来审计运行时错误、失败的请求、布局、*.motion.json 断言和 WCAG 对比度。持久性问题会阻滞退出码;瞬态进入或退出问题仅作为参考。使用 --strict 来阻滞警告。validate、inspect 和 layout 作为别名保留以实现兼容性,但不得出现在新的指令或脚本中。

两种不同的预览界面

不要混淆这些状态:

界面何时可能打开目的
故事板在合成检查之前,仅当 storyboard: yes 时审查计划卡片和线框图草图。打开 ?view=storyboard#project/<name>。
最终合成预览在 check 通过后在渲染前审查已组装的时间线。打开 #project/<name>。

早期面板不是最终视频的批准。渲染始终需要 hyperframes-core/references/review-loop.md 定义的最终批准。

子合成冒烟测试

静态审计无法捕获所有挂载失败。当项目使用子合成时,为每个宿主槽位捕获至少一个可见的中间点:

npx hyperframes snapshot --at <t1>,<t2>,<t3>

将微小的无样式内容、画布大小的图标、缺少的英雄元素或时间线注册超时视为阻塞渲染的挂载缺陷。有关相应修复,请参阅 hyperframes-core/references/sub-compositions.md。

Agent 约定

  • 对于 agent 和 CI 调用,优先使用 --json。服务器模式的 render、preview 和 play 不提供普通的 JSON 输出;preview --selection --json 和 preview --context --json 是查询模式的例外。

  • doctor --json 总是以零退出。基于其有效载荷进行门控:

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • 非 TTY 模式是自动的。init 在此模式下需要 --example;使用 --non-interactive 在 TTY 上强制确定性行为。

  • 在同一个验证循环中,对所有命令使用一个 HYPERFRAMES_RUN_ID。

  • 当相应的警告、变量或 CI 条件必须阻滞渲染时,使用 --strict、--strict-all 和 --strict-variables。

  • JSON 路径将主目录编辑为 $HOME;不要尝试还原该编辑。

  • 永远不要仅仅因为检查通过就进行渲染。在最终预览处暂停并等待批准。

Studio 定向编辑

当用户提到“这个元素”或当前选择时,查询 Studio 而不是猜测:

npx hyperframes preview --context --json --context-fields selection

尽可能使用 selection.target.hfId,否则使用其选择器和源文件。如果结果报告 no-selection,请用户点击元素并重新运行。只请求你需要的上下文切片;仅在需要计算样式或可编辑文本元数据时使用 --context-detail full。完整的行为和失败代码位于 references/preview-render.md。

渲染选择

需求命令
快速本地迭代npx hyperframes render --quality draft
最终本地交付npx hyperframes render --quality high --output out.mp4
可复现的容器渲染npx hyperframes render --docker --strict --output out.mp4
本地变量驱动的批量渲染npx hyperframes render --batch rows.json --output "renders/{name}.mp4"
HeyGen 托管的零基础设施渲染npx hyperframes cloud render
自管理的分布式 AWS 渲染npx hyperframes lambda render <project> --width 1920 --height 1080 --wait
自管理的分布式 GCP 渲染npx hyperframes cloudrun render <project> --width 1920 --height 1080 --wait

当用户希望使用托管渲染而无需本地 Chrome、FFmpeg 或 AWS 时,使用云端渲染。仅当需要 AWS 所有权时使用 Lambda。仅当需要 GCP 所有权时使用 Cloud Run。在运行任何云端路径之前,阅读匹配的参考文档。

在验证渲染成功后,发送一份反馈报告,除非遥测已禁用或用户选择退出:

npx hyperframes feedback --rating <0-10> --comment "<具体结果或问题>"

保持干净运行的反馈简洁。对于任何错误或问题,请在提交前捕获一个重现包;不要只发送症状摘要。包括可重新运行的命令和工作目录、预期行为与实际行为、确切错误、输出是否完成/降级/失败、解决方法以及重现项目的状态。对于描述视觉缺陷(黑帧、闪烁、损坏输出、错误帧、空白输出或其他视觉异常)且评分 ≤ 7 的情况,还需包含一个 COMPOSITION_STRUCTURE: 块——一个保护隐私的结构剖析(元素计数 + 属性存在 + 时间线形状),以便维护者无需合成 ZIP 文件即可与已知错误族进行模式匹配。Agent 通过合成普查助手自动填写此内容;人类用户无需手动填写。如果问题没有再次重现,请说明情况,但仍包含最后失败的命令和日志。仅在获得同意后使用 --file-issue:它会将一个最小重现发布到公共 URL。所需的包格式和隐私警告位于 references/preview-render.md。

在运行命令之前阅读匹配的参考文档

以下参考文档和所属技能是强制性的命令契约,而非可选的背景阅读。在运行表中的命令之前,请阅读其匹配行。

需求参考文档
init、capture、skillsreferences/init-and-scaffold.md
lint、check、运动侧车文件、snapshotreferences/lint-validate-inspect.md
compare、grade-compare、变量驱动的 render --batchreferences/compare-and-batch.md
现有项目的 Studio 节拍网格 beatsreferences/beats.md
preview、play、render、publish、Studio 上下文、反馈references/preview-render.md
doctor、浏览器管理references/doctor-browser.md
auth、HeyGen 托管云端渲染以及模板变量references/cloud.md
AWS Lambda 部署和渲染references/lambda.md
Google Cloud Run 部署和渲染references/cloudrun.md
info、upgrade、compositions、docs、benchmark、遥测、媒体预处理references/upgrade-info-misc.md

对于合成变量,还需阅读 /hyperframes-core → references/variables-and-media.md。对于 hyperframes add 和 hyperframes catalog,使用 /hyperframes-registry。在 hyperframes present 之前,阅读 /slideshow;在 hyperframes keyframes 之前,阅读 /hyperframes-keyframes。对于 TTS、转录、字幕或背景移除选择,使用 /media-use。

专门的命令由其所属的工作流文档记录:

npx hyperframes present <project-dir> --port 3004 --no-open
npx hyperframes beats <project-dir> --json
npx hyperframes keyframes <project-dir> --json

present 提供一个可导航的演示文稿,具有演示者和观众同步功能。beats 是 references/beats.md 中定义的独立 Studio 节拍网格工具。keyframes 展示 seek 安全的动画和运动路径诊断。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Drama2557/4RealDigital-Video-Studio

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

Drama2557/4RealDigital-Video-Studio

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Drama2557/4RealDigital-Video-Studio

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

Drama2557/4RealDigital-Video-Studio

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Drama2557/4RealDigital-Video-Studio

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

Drama2557/4RealDigital-Video-Studio

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

Drama2557/4RealDigital-Video-Studio

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

Drama2557/4RealDigital-Video-Studio

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

Drama2557/4RealDigital-Video-Studio

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Drama2557/4RealDigital-Video-Studio

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

Drama2557/4RealDigital-Video-Studio

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Drama2557/4RealDigital-Video-Studio

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

Drama2557/4RealDigital-Video-Studio

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

Drama2557/4RealDigital-Video-Studio

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Agent skill / project related to launch or product demo video: Drama2557/4RealDigital-Video-Studio

相关技能