Communitygithub.com

Drama2557/4RealDigital-视频工作室

将每周更新日志 .md 转换为完整的品牌化更新日志视频(正方形 1080p,约 45-60 秒,Annie 画外音,动画品牌背景,模拟 UI 可视化,低调字幕)。当用户提供更新日志/摘要 markdown 并希望生成每周视频,或说“更新日志视频”时使用。自包含——字体、背景、词汇表和脚本均随技能一起提供。

4RealDigital-视频工作室 是什么?

该技能的目标是将开发者编写的每周更新日志 Markdown 文件,自动转化为一段符合品牌规范的、高质量的正方形(1080x1080)视频,时长控制在 45-60 秒。它专为 HyperFrames 等周报场景设计,核心流程包括:解析 Markdown、规划可视化方案、生成双层脚本(口语层与显示层)、调用 HeyGen 的 Annie 语音合成、对齐时间戳、以及最终在标准化的 HTML 画板上组装完成。整个过程的输出是一个“缝-门-绿色”项目,位于 `projects/active/weekly-changelog-<range>/` 目录。其独特之处在于,它不仅仅是文本转视频,而是坚持“可视化而非列表”的原则:每个主题都必须通过模拟实际 UI 或真实类比来表现变化体验,而非使用文字子弹点。该技能自包含所有品牌资产(TT Norms Pro 等字体、背景动画、背景音乐),并强制要求一个修复性工作流,包括字面时间戳对齐和严格的输出检查(对比度、字幕、缝-门验证),确保每个生成的视频都符合既定的品牌视觉和运动标准。支持 Claude Code、Coder 和 HyperFrames 等 AI 代理平台。

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

在你喜欢的 AI 中提问

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

文档

更新日志 → 品牌化视频

输入:更新日志 .md(主题 + 项目,如每周 HyperFrames 摘要)。 输出:一个经过 lint 清理、符合“缝-门-绿色”标准的 HyperFrames 项目,位于 projects/active/weekly-changelog-<range>/。仅当用户要求时才进行渲染。

首先加载,不可协商: motion-doctrine(+ cut-the-curve、 oversized-cursor(如果出现光标)、seam-craft)和 captions-overlay。 此技能提供更新日志专用管道;运动教义提供运动法则。

首要指令:可视化,而不是列出

每个主题都通过实际 UI 的动画模拟或一个忠实类比来表现,这个类比要演绎出体验上的变化——绝不使用文本子弹点。在编写脚本之前,将每个主题/项目路由到 references/visualization-registry.md;该注册表决定采用 ui-recreate / ui-analog / terminal / checklist 中的哪一种。文本检查表是最后的手段,仅用于真正无法可视化的项目(可靠性修复列表)。

管道

0 · 从此技能的资产启动项目——不可协商

在编写任何合成 HTML 之前执行此操作。跳过它总是会产生一个看起来像你以前构建的类似项目的视频,而不是此技能的品牌——这是该技能偏离品牌的最常见方式。 技能的资产、字体和脚手架就是技能本身;SKILL.md 提示是一个路由器。

mkdir -p project/assets/fonts
cp <SKILL_DIR>/assets/fonts/*.woff2 project/assets/fonts/
cp <SKILL_DIR>/assets/bgm.mp3 project/bgm.mp3
ffmpeg -y -stream_loop 15 -i <SKILL_DIR>/assets/bg-pattern.mp4 -t <TOTAL> \
  -vf "scale=1080:1080,fps=30,eq=saturation=0.72,[email protected]:t=fill" \
  -an -c:v libx264 -crf 20 -pix_fmt yuv420p project/assets/bg-pattern-<TOTAL>s.mp4
cp <SKILL_DIR>/examples/master-skeleton.html project/index.html

然后从头到尾阅读 references/build-spec.md(不要略读)——它定义了品牌标记(TT Norms Pro + ABC Solar Display + TT Norms Mono、奶油色 #f5f6f4、限量绿色 #5ef17c、带有绿色边框的玻璃卡片、kicker/sec-chip 药丸形状、位于 top: 990 的 32px 字幕轨道),每个场景都从脚手架继承这些标记。

只有然后开始下面的步骤 1-6。步骤 1-4(解析、路由、脚本、VO)规划要放入脚手架的内容;步骤 5 在已复制的 project/index.html 中填充占位符(<RANGE>、<TOTAL>、<CUT_N>、<DUR_N>、场景主体)——你不要重写脚手架的镀铬、字体、调色板或布局外壳。

如果你发现自己正在使用 cp 复制先前视频的 index.html,或者编写自己的 @font-face 声明,或者设计 WebGL 着色器背景而不是使用上面编码的 bg-pattern MP4:停止。删除当前的 index.html 并重新从 master-skeleton 脚手架的 cp 开始。在正确的脚手架上重建场景内容比将品牌改造到错误的脚手架中更便宜。

1 · 解析 + 编辑裁剪

  • 提取:周范围、头条统计(发布、提交)、主题、项目。
  • 总时间预算:45-60 秒。 标题 ≤2 秒,结尾 ≤3.5 秒,4 个主题每个约 9-12 秒。
  • 每个主题保留一个主要可视化和最多 3 个口头提及的项目。其他所有内容仅作为结尾的“完整摘要”指针存在。裁剪是工作:一个包含 30 个项目的更新日志仍然产生 ≤14 个口头节拍。
  • 按故事顺序排列主题:主打功能 → 产品表面 → 性能 → 可靠性(摘要通常已经这样排列)。

2 · 可视化路由

对于每个主题,从 references/visualization-registry.md 中选择表面,并写一行:主题 → 表面 → 模拟执行的 2-4 个序列化动作,每个动作都与一个脚本短语绑定。如果没有注册表表面适用且没有忠实的类比,则它是一个检查表场景——不要为无法诚实表示的内容发明虚假的 UI。

3 · 双层脚本(口语 vs 显示)

按照 references/script-voice.md 将脚本写成令牌行:对话式语域,每个技术术语携带一个来自 references/lexicon.json 的 spoken 音标形式,而 display 保持标准拼写。字幕显示 display;VO 读取 spoken。任何不在词典中的术语:停止并向用户询问其发音,然后将其添加到词典中。 将其保存为项目中的 script-tokens.json。

4 · VO——Annie(HeyGen,固定)

# spoken-layer 文本仅;words JSON = SPOKEN 文本的地面真相时间戳
# Repo 原生路径:changelog-video 技能从 hyperframes 仓库根目录运行,
# 因此它使用跟踪的 hyperframes-media TTS 助手(无需 `npx hyperframes
# skills install` 步骤)。如果你将技能复制到另一个仓库,请切换到
# 你自己的 media-use / hyperframes-media heygen-tts.mjs 路径。
node skills/hyperframes-media/scripts/heygen-tts.mjs ./vo-spoken.txt \
  -o voiceover.mp3 --words vo-words.json \
  --voice 330290724a1b470fb63153f34d4c0183   # Annie — lifelike(不要替换)

需要 heygen CLI ≥0.3.0 已认证(heygen auth login --oauth)。 然后将口语时间戳对齐回显示令牌:

node <SKILL_DIR>/scripts/align-captions.mjs \
  --tokens script-tokens.json --words vo-words.json --out captions.json

captions.json 是字幕轨道的输入(显示拼写,口语时间)。 aligner 会打印 MISMATCH 警告——在构建之前解决每一个(通常是词典将 TTS 渲染成多个单词的拼写)。音频是时钟:所有节拍时间都来自 vo-words.json;重新生成 VO 会重新打开每个接缝。

单词时间戳是一个硬性关卡。 在继续步骤 5 之前,验证 vo-words.json 非空并且有一个包含每个单词 start/end 的 words: [...] 数组。如果它为空(0 字节)或缺少该数组——这是 TTS 提供程序返回音频但没有时间戳负载时的一个已知故障模式——不要在没有它们的情况下继续。回退:使用本地 whisper 对产生的音频执行强制对齐,针对显示脚本:

uvx --from openai-whisper whisper voiceover.mp3 \
  --model base.en --language en --word_timestamps True \
  --output_format json --output_dir .
# 然后使用 --words voiceover.json(相同形状)运行 align-captions.mjs

Whisper 可能会听错 TTS 渲染("gee-sap" → "gsap","heyjen" → "hey Jen", 等等)——字幕仍然使用来自 script-tokens.json 的 DISPLAY 拼写; whisper 仅提供时间戳。align-captions.mjs 处理连接。 此回退是有字幕构建和无提示无字幕构建之间的区别。

5 · 构建

精确遵循 references/build-spec.md:品牌标记 + 字体(打包在 <SKILL_DIR>/assets/ 中)、动画背景编码、场景脚手架、 镀铬、字幕轨道、每个场景一个限量的绿色时刻。然后是运动教义 顺序:ledger.json(所有普通接缝 cut-the-curve LEFT)→ seam-stamp → VO 单词上的内部节拍 → seam-gate 验证。

字幕不是可选的。 master-skeleton 附带一个读取 LINES 数组的字幕轨道 IIFE——将该数组留空是一个已发货的错误,而不是风格选择。在继续步骤 6 之前,从 captions.json 填充它:

// 粘贴替换字幕轨道 IIFE 中的 "const LINES = /* … */ []":
const LINES = /* captions.json 的内容 */ [
  { id: 0, end: 2.74, w: [["This", 0.0], ["week,", 0.30], …] },
  …
];

如果 align-captions.mjs 被跳过或 LINES 是 [],那么步骤 6 中的帧检查将失败——不要通过从脚手架中移除 #cap-line 来掩盖它。

6 · 关卡(在提交之前全部绿色)

  1. bun run --cwd packages/cli hyperframes check(或从仓库本地的 skills/hyperframes-cli/ 技能安装的 hyperframes CLI)——0 个错误(对比度:暗淡文本 ≥ .66 alpha)。不要使用 npx hyperframes@latest;跟踪的仓库本地 CLI 是此技能产生的合成合同的事实来源。
  2. seam-gate.mjs verify——0 个失败。
  3. 重新启动预览服务器(它会缓存 bundle),通过原始合成页面上的 __player.seek 抽查 3-4 个节拍。
  4. 除非用户要求,否则不要渲染。 在请求的渲染之后,从 MP4 验证帧(ffmpeg -ss <t> … -frames:v 1):字幕存在,背景视频不是黑色,没有微小/冻结的帧。
  5. 字幕存在性关卡——硬性失败。 在整个 VO 口语窗口内抽取 3-4 帧(例如 48 秒 VO 的 t=3、t=15、t=30、t=42),并确认位于 top: 990 的字幕轨道在每个帧上都渲染了可见文本。如果在口语区间内的任何帧缺少字幕,则构建将发货无字幕的版本——将其视为红色关卡并重新检查步骤 5 的 LINES 填充。这正是 Jul 13-20 v4 构建中出错的地方。

项目布局

projects/active/weekly-changelog-<range>/
├── index.html            # 单文档主文件(场景作为幻灯片,带有盖章接缝)
├── ledger.json           # 向量分类账(seam-stamp 输入)
├── script-tokens.json    # 双层脚本(VO + 字幕的事实来源)
├── vo-spoken.txt         # 生成:口语层,一行
├── voiceover.mp3 + vo-words.json + captions.json
├── bgm.mp3               # 从 <SKILL_DIR>/assets/bgm.mp3 复制(主场原声),除非用户提供了
└── assets/fonts/ + assets/bg-pattern-<dur>s.mp4

反模式

不要这样做改为这样做
UI 更改的子弹点幻灯片模拟演绎更改的表面
不可表示项目的虚假 UI诚实的检查表场景
TTS 文本中的纯 "JSON"/"CLI"词典口语形式;显示保持标准
字幕中的音标拼写字幕始终渲染显示层
猜测未知术语的发音询问,然后扩展词典
说出每个更新日志项目每个主题 ≤3 个;摘要链接承载其余部分
到处使用绿色强调每个场景一个绿色时刻 (#5ef17c)
从之前视频的 index.html 开始步骤 0——从此技能复制 examples/master-skeleton.html 到 project/index.html,始终如此
手写的 @font-face / WebGL 着色器 / 自定义 BGM步骤 0——逐字复制此技能的 assets/;技能的资产就是品牌
交付时没有 CloudFront 失效在任何 S3 替换后,为分发 E2BSLVSZ7FG3U0 的精确路径运行 aws cloudfront create-invalidation——否则 CDN 会缓存旧文件
脚手架中的 LINES 数组为空时发货步骤 4 必须生成填充好的 captions.json;步骤 5 必须将其粘贴到 IIFE 中;步骤 6 关卡 5 必须确认渲染帧上有字幕。空的 LINES = 无字幕发货 = 重新运行
没有 vo-words.json → 跳过字幕并无论如何发货回退到对产生的音频进行 whisper 强制对齐;字幕不是可选的

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

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

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

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

相关技能