Codex × 剪辑 Skills：一句话剪视频，Agent 自动化口播成片全流程

标签: 视频剪辑 / Codex / Agent / 开源 / 口播视频 / 自动化 / HyperFrames / HTML动画 / rough.js
原文: 微信公众号「AI产品自由」https://mp.weixin.qq.com/s/elM9M7UbspSt9RhQUIUPog
Skills 安装: npx chengfeng-videocut-skills install

一句话定位

chengfeng-videocut-skills 是一个 2000+ Star 的开源剪辑 Skill 包，接入 Codex / Claude Code 后，一句话完成口播视频剪辑全流程：剪口播 → 生成分镜 → 预览时间线 → 合成 MP4。免费开源，已跑出多条千赞视频。

核心流程：5 步完成口播成片

原始口播视频 + 文字稿
        │
        ▼
  ① 剪口播 → 剪后视频 + 对齐字幕
        │
        ▼
  ② 口播成片 → HTML 分镜核对页
        │
        ▼
  ③ 修改分镜 → 按反馈调整画面/动画
        │
        ▼
  ④ 时间线预览 → 检查画面与口播同步
        │
        ▼
  ⑤ 合成 MP4 → HyperFrames 渲染 HTML 动画为视频

第 1 步：安装剪辑 Skills

打开 Claude Code 或 Codex，发送：

帮我安装或更新 chengfeng-videocut-skills 这个剪辑 Skills。
安装命令是 npx chengfeng-videocut-skills install。

Agent 会自动确认并完成安装，之后本地就能调用整套剪辑 Skills。

第 2 步：剪口播 — 输出剪后视频 + 字幕

输入：口播视频 + 文字稿

命令：

/剪口播  + 视频地址 + 口播稿地址

处理流程：

Agent 生成审核页，列出停顿、口误、重说
用户确认删除项是否正确
点击"执行剪辑"
输出：剪后视频 + 对齐字幕文件

字幕和剪后视频在时间上完全对齐，作为后续分镜的基础素材包。

第 3 步：口播成片 — 生成分镜页面

命令：

/口播成片

Agent 生成 HTML 分镜核对页：

左边：Agent 生成的画面
右边：字幕、画面任务、素材来源、镜头动作

分镜页做的三件事

功能	说明
按字幕拆段	根据时间轴拆分每一段
选择画面来源	保留原视频 / 截图 / 产品页面 / 结果页 / HTML 动画
生成动画	基于 rough.js 手绘风格动画，画逻辑图、圈重点、画箭头

画面来源决策

讲录屏操作 → 保留原视频片段
更适合截图/产品页 → 切换到对应素材
需要突出重点 → HTML 动画标注（基于素材图叠加 rough.js 动画）

修改分镜

不满意直接告诉 Codex 第几段哪里不对：

05 这一段动画改一下。
箭头指向标题，圈出右侧结果。

Codex 的 Computer Use 可以打开页面查看左边画面和右边口播，再回去改 HTML 画面或标注。

第 4 步：时间线预览 — 检查同步

分镜确认后，让 Agent 生成预览页面：

左边：视频预览
底部：进度条 + 文字说明
右边：口播内容

时间线预览按字幕时间点排动画，字幕说到哪里动画就出现在哪里。

常见问题 & 反馈方式

问题	反馈示例
画面没提前出现	`02 图出现太早`
原视频被误换	`01 保留原视频`
文字挡住画面	`03 画面太满，删掉下面两行字`
节奏不对	按片段指出即可

确认后才进入最终合成。

第 5 步：合成 MP4

使用 HyperFrames 将 HTML 动画渲染为视频工程：

HyperFrames 对 Agent 友好：只要画面能用 HTML 做出来，就能进入合成流程
几分钟后输出最终视频
导入字幕和视频到剪辑工具做最终检查

技术亮点

1. rough.js 手绘动画

目前动画效果最好的方案，画逻辑图和标注顺手，圈重点、画箭头接近手绘批注风格。

2. HyperFrames HTML→视频

HTML 动画直接渲染为视频，不需要 After Effects 或剪映的时间线操作。

3. Agent 驱动全流程

从剪口播到合成 MP4，每一步都是 Agent 执行，用户只需审核和提修改意见。

4. Computer Use 反馈闭环

Codex 的 Computer Use 可以自己打开页面查看效果，修改后再确认，形成自动化闭环。

对比：Agent 剪辑 vs 传统剪辑

维度	传统剪辑	Agent 剪辑
核心操作	围绕时间线手动操作	围绕工作流自动执行
分镜	自己排分镜	Agent 生成，看分镜提修改
动画	AE / 剪映手动制作	HTML + rough.js 自动生成
同步	手动对时间线	字幕时间点自动同步
迭代	修改→渲染→检查	反馈一句话→自动改→预览
复用	每次从零开始	工作流可持续复用