it-infra-evolution-video

# IT 基础设施系列长图讲解视频 Skill ## 生成或重绘图片规则 只要任务需要生成、扩图、修复或重绘静态图片，必须先读 [../../marketplace/pptx/editable-reconstruction.md](../../marketplace/pptx/editable-reconstruction.md)，复用其中的图片模型优先级、无字生成和残影验收规则。生成图片中不得烘焙标题、数字、标签、字幕或伪文字；这些内容必须留在 HyperFrames/HTML 可编辑动画层。 用户长图、官方截图和真实信息图仍然优先。生成图不得伪装成真实产品界面、官方架构图或来源证据。 ## Version Lock - Version: `v1` - Status: read-only frozen template - Do not mutate this skill in-place for v2 work. Create a new copy instead. - XWorkmate/OpenClaw task runs that must sync artifacts to `tasks/<session>/<run>` should use `it-infra-evolution-video-v2`, because v2 has the deterministic runner and task-scope guard. Do not report completion from v1 unless the final MP4 is actually present in the current prepared task artifact scope. 使用 `HyperFrames + edge-tts + 用户长图/信息图素材` 制作中文技术讲解视频。默认效果必须对齐样片 `/Users/shenlan/workspaces/cloud-neutral-toolkit/docs/it-infra-evolution-video` 的合成风格：蓝白技术纪录片视觉、双栏长图扫描、底部章节 timeline tag、高亮当前章节、深蓝字幕条和本地合成 BGM/SFX。样片里的 `8 段完整结构`、`82 秒`、`8 列 timeline` 是可提取的结构特征和默认配置，不是固定限制；实际章节数、总时长、timeline 列数必须由用户输入或生成配置决定。这个 skill 是 `ai-tech-news-video` 的独立派生副本，**不要修改原始 `ai-tech-news-video` skill**。 ## 适用场景 触发词包括： - `IT基础设施演进史` - `一图看懂视频` - `长图讲解视频` - `平台工程视频` - `网络演进视频` - `存储演进视频` - `账户与安全体系视频` - `监控的前生今世` - `与 AI 共同进化` 适合把用户提供的一组小红书/海报/架构图/信息图，转成横屏讲解视频。 ## 默认规格 - 默认画布：`1920x1080`，16:9 横屏。 - 默认时长：用户未指定时使用样片配置 `82s` 左右；用户指定时以用户配置为准。 - 默认语言：中文。 - 默认 voice：`zh-CN-YunxiNeural`，`--rate="+20%"` 到 `"+30%"`。 - 默认结构：用户未指定时使用样片配置 8 个章节；用户指定时以用户的章节配置为准。 - 默认 timeline：列数等于章节数；用户未指定时使用样片配置 8 列。 - 必须包含： - 真实素材清单：`assets/images/manifest.md` - 每段口播音频 - 每段可读字幕 - BGM - 章节 timeline tag，当前章节高亮 - HyperFrames `lint`、`inspect`、`snapshot` - 最终 MP4 - `ffprobe` 分辨率、时长、音视频流校验 ## 工作流 1. 收集用户给定的长图/信息图素材。 2. 建立 HyperFrames 项目，创建 `assets/images/`、`assets/audio/`、`assets/audio/sfx/`。 3. 复制或引用素材，并写 `assets/images/manifest.md`。 4. 产出章节配置：标题、口播、字幕、章节 tag、素材文件、`start`、`duration`。章节数、总时长和 timeline 列数必须来自用户输入或生成配置。 5. 用 `edge-tts` 生成每段口播。 6. 用 `scripts/render_audio_bed.py` 生成 BGM 和转场音效，或接入用户提供 BGM。 7. 基于 `templates/index.html` 生成 HyperFrames 合成页面；默认不要重写视觉系统，按配置增删 scene、caption、timeline tag，并替换素材、标题、文案、音频时长和章节 tag。 8. 运行： ```bash npx --yes hyperframes@0.6.15 lint npx --yes hyperframes@0.6.15 inspect --at 2,14,24,34,44,54,64,74 npx --yes hyperframes@0.6.15 snapshot --at 2,14,24,34,44,54,64,74 npx --yes hyperframes@0.6.15 render --output renders/it-infra-evolution.mp4 --quality standard ffprobe -v quiet -show_entries format=duration,size:stream=codec_type,width,height,r_frame_rate -of json renders/it-infra-evolution.mp4 ``` ## 素材硬门槛 每个章节必须有真实素材。真实素材可以是： - 用户提供的小红书/海报/信息图 - 官方页面截图 - 产品界面截图 - 架构图或技术图谱 - 公开资料截图 不要用纯 CSS 卡片、假界面、抽象图标或 AI 编造截图替代主素材。 `assets/images/manifest.md` 必须记录： - 章节编号和标题 - 素材文件名 - 原始来源或用户提供路径 - 素材类型 - 该素材支撑哪段叙事 ## 配置规则 先把用户输入沉淀成一个视频配置，再生成 HyperFrames 页面。配置字段至少包含： - `duration`: 总时长，秒。 - `sections`: 章节数组。每个章节包含 `id`、`start`、`duration`、`timeLabel`、`timelineLabel`、`title`、`subtitle`、`tags`、`image`、`voiceover`、`caption`。 - `timelineColumns`: timeline 列数。默认等于 `sections.length`，除非用户明确要求分组显示。 - `inspectTimes`: 每个章节中点时间，用于 `inspect` 和 `snapshot`。 配置示例见 `templates/video.config.example.json`。这个文件只表达字段形状；正式项目应根据用户素材和节奏生成自己的配置。 结构参数优先级： 1. 用户明确给出的时长、章节和节奏。 2. 用户素材数量和叙事需要推导出的配置。 3. 样片默认配置：8 段、82 秒、8 列 timeline。 详细模板见 `references/storyboard-pattern.md`。 ## 叙事模板 用户未指定结构时，使用样片同款 8 段默认结构： 1. 引言：这不是单点升级，而是一组能力共同进化。 2. 基础设施主线：硬件、虚拟化、云、容器、治理、AI 原生。 3. 账户与安全：边界从网络迁移到身份。 4. 监控与可观测性：从事后告警到预测、定位、自愈。 5. 网络与协议：从连接一切到理解一切。 6. 存储服务：从存下来到高效流动。 7. 平台工程：从人肉运维到平台化交付。 8. 与 AI 共同进化：从工具系统到 AI 协同系统。 用户素材不足 8 张时，合并章节；用户素材更多时，按主题拆成 6-10 个章节，或按用户指定的章节数执行。总时长以用户配置为准；未指定时保持在 60-90 秒。 ## 画面模板 默认使用样片同款蓝白技术纪录片风格： - 左侧展示真实长图，右侧显示章节 kicker、标题、短说明和关键词 tags。 - 画布背景是白到浅蓝渐变，并带右上角 cyan 圆环装饰。 - 长图放在 760px 高、34px 圆角、白底阴影的 `.image-panel` 内，默认 `object-fit: cover`，需要完整展示时用 `.contain`。 - 每段长图做 `y: -70`、`scale: 1.1` 的缓慢扫描。 - 底部固定半透明 timeline tag，列数由 `timelineColumns` 或 `sections.length` 决定，当前章节蓝绿渐变高亮并轻微上浮。 - 字幕位于 timeline 上方安全区，深蓝半透明底，左右 `320px`，底部 `132px`。 - 不加关注、点赞、收藏等 CTA，除非用户明确要求。 实现细节见 `references/hyperframes-it-infra-template.md`，可从 `templates/index.html` 开始改。 ## 样片一致性要求 当用户要求“和 `it-infra-evolution.mp4` 效果一致”或未指定其他风格时： - 使用 `templates/index.html` 的视觉和动效作为母版；其中 8 段/82 秒/8 列 timeline 是默认样片配置。 - 如果用户给出其他章节数、时长或 timeline 数量，按用户配置重排 scene、caption、timeline tag 和校验时间点。 - 保留 CSS 尺寸、颜色、圆角、阴影、caption、timeline、GSAP 动效参数。 - 只替换素材路径、章节文案、tag、音频文件名、`data-start` 和 `data-duration`。 - 不改成深色 dashboard、三图并列、纯生成海报轮播或营销片风格。 - 如果用户提供的是 1-2 张总览长图，也仍然用双栏长图扫描和章节 tag 组织，不要退化成静态 PPT。 ## 口播规则 - 每段 1-2 句，尽量 8-12 秒。 - 不说“第一条、第二条”。 - 不说无关自我介绍。 - 字幕可以略短于口播，但必须覆盖关键含义。 - 每个 `<audio>` clip 必须有对应字幕 clip。 - 生成后用 `ffprobe` 读取音频时长，再把 `data-start` / `data-duration` 写入 HTML。 示例： ```bash edge-tts --voice zh-CN-YunxiNeural --rate='+20%' \ --text 'IT 基础设施演进史，不只是服务器升级。它是一组能力的共同进化。' \ --write-media assets/audio/intro.mp3 ``` ## BGM 与音效 - 先检查项目是否已有 `assets/audio/bgm.mp3` 或 `assets/audio/bgm.wav`。 - 若没有，可使用本 skill 的 `scripts/render_audio_bed.py` 生成本地合成 BGM 和转场音效。 - BGM 音量建议 `data-volume="0.08"` 到 `0.12`。 - 口播音量建议 `data-volume="0.90"` 到 `0.95`。 - Web Audio API 不会进入 HyperFrames MP4，所有音频必须使用 `<audio class="clip">`。 ## 验收标准 - `npx hyperframes lint` 无 error。 - `npx hyperframes inspect` 无布局 error；图片 zoom 裁切 warning 可接受。 - `snapshot` 至少覆盖每个章节的中间时刻。 - 最终 MP4 使用 `ffprobe` 确认为 `1920x1080`、有 video stream、有 audio stream、时长符合预期。 - 原始 `ai-tech-news-video` skill 未被修改。