Agent Skills › Agentchengfeng/chengfeng-videocut-skills

Agentchengfeng/chengfeng-videocut-skills

GitHub

口播素材处理入口,集成转录、AI口误识别与网页审核。用户确认后执行粗剪,并基于剪后视频重新转写及AI校对字幕,最终输出source_cut.mp4和subtitles.srt等成片基础素材包。

4 个 Skill 2,606

安装全部 Skills

npx skills add Agentchengfeng/chengfeng-videocut-skills --all -g -y
更多选项

预览集合内 Skills

npx skills add Agentchengfeng/chengfeng-videocut-skills --list

集合内 Skills (4)

口播素材处理入口,集成转录、AI口误识别与网页审核。用户确认后执行粗剪,并基于剪后视频重新转写及AI校对字幕,最终输出source_cut.mp4和subtitles.srt等成片基础素材包。
剪口播 处理口播素材 准备口播素材 识别口误 基础素材包
剪口播/SKILL.md
npx skills add Agentchengfeng/chengfeng-videocut-skills --skill chengfeng-videocut-skills:剪口播 -g -y
SKILL.md
Frontmatter
{
    "name": "chengfeng-videocut-skills:剪口播",
    "author": "chengfeng \/ AI产品自由",
    "source": "https:\/\/github.com\/Agentchengfeng\/chengfeng-videocut-skills",
    "description": "口播基础素材包生成。转录口播、识别口误、生成审核页;用户确认后剪出新视频,Agent 再基于剪后视频重新转写、AI 校对字幕,输出后续口播成片可用的 source_cut.mp4 和 subtitles.srt。触发词:剪口播、处理口播素材、准备口播素材、识别口误、基础素材包",
    "official_accounts": "GitHub @Agentchengfeng;X @chengfeng240928;小红书\/公众号\/B站\/抖音\/视频号 @AI产品自由"
}

剪口播 v3

火山引擎转录 + AI 口误识别 + 网页审核 + 剪后重转写 + AI 字幕校对

快速使用

用户: 帮我剪这个口播视频
用户: 处理一下这个视频
用户: 把这条录屏做成基础素材包

不要再把字幕生成拆成单独 Skill。剪口播 是口播基础素材包的唯一入口。

用户给一条口播录屏后,本 Skill 默认产出后续 口播成片 可直接使用的基础素材包:

source_cut.mp4       # 剪后口播视频
subtitles.srt        # 基于剪后视频重新转写并 AI 校对后的字幕
assets/              # 可选截图、评论图、结果页

审核页只负责让用户确认“删哪里”并剪出新视频。字幕不能沿用原始视频字幕,也不能把火山转写初稿直接当最终字幕;Agent 必须基于剪后视频重新转写,并做 AI 校对后,才能写入 subtitles.srt

输出目录结构

output/
└── YYYY-MM-DD_视频名/
    ├── 剪口播/
    │   ├── 1_转录/
    │   │   ├── audio.mp3
    │   │   ├── volcengine_result.json
    │   │   └── subtitles_words.json
    │   ├── 2_分析/
    │   │   ├── readable.txt
    │   │   ├── auto_selected.json
    │   │   └── 口误分析.md
    │   └── 3_审核/
    │       ├── review.html
    │       └── video.mp4 → 源视频(符号链接)
    └── 字幕/
        ├── 1_转录/
        │   ├── audio.mp3
        │   └── volcengine_result.json
        ├── subtitles_with_time.json
        └── 3_输出/
            ├── video.raw.srt
            └── video.srt

规则:已有文件夹则复用,否则新建。

流程

0. 创建输出目录
    ↓
1. 提取音频 (ffmpeg)
    ↓
2. 调用火山引擎录音文件识别 2.0(Seed ASR v3)
    ↓
3. 生成 volcengine_result.json
    ↓
4. 生成字级别字幕 (subtitles_words.json)
    ↓
5. AI 分析口误/静音,生成预选列表 (auto_selected.json)
    ↓
6. 生成审核网页 (review.html)
    ↓
7. 启动审核服务器,用户网页确认
    ↓
【等待用户确认】→ 网页点击「执行剪辑」
    ↓
8. 服务器只剪出新视频
    ↓
9. Agent 监听剪后视频生成完成
    ↓
10. 基于剪后视频重新提取音频,发火山转写,生成 video.raw.srt
    ↓
11. Agent 对照原稿/正文做 AI 校对,写 video.srt
    ↓
12. 整理基础素材包:source_cut.mp4 + subtitles.srt + 可选 assets/

剪后字幕硬规则:

  • 必须基于剪后视频重新转写,不能用原始视频字幕反推。
  • 火山转写只是初稿,输出到 video.raw.srt
  • video.srt / subtitles.srt 只能是 Agent AI 校对后的最终字幕。
  • 校对时对照用户给的口播稿、正文、专名和上下文,修正术语、同音误识别、断句;不能添加视频里没说的话。

执行步骤

步骤 0: 创建输出目录

# 变量设置(根据实际视频调整)
VIDEO_PATH="/path/to/视频.mp4"
VIDEO_NAME=$(basename "$VIDEO_PATH" .mp4)
DATE=$(date +%Y-%m-%d)
BASE_DIR="output/${DATE}_${VIDEO_NAME}/剪口播"

# 创建子目录
mkdir -p "$BASE_DIR/1_转录" "$BASE_DIR/2_分析" "$BASE_DIR/3_审核"
cd "$BASE_DIR"

步骤 1-3: 转录

cd 1_转录

# 1. 提取音频(文件名有冒号需加 file: 前缀)
ffmpeg -i "file:$VIDEO_PATH" -vn -acodec libmp3lame -y audio.mp3

# 2. 调用火山引擎录音文件识别 2.0(默认 resource_id=volc.seedasr.auc)
SKILL_DIR="/Volumes/成峰/代码/剪辑Agent/.claude/skills/剪口播"
"$SKILL_DIR/scripts/volcengine_transcribe.sh" audio.mp3
# 输出: volcengine_result.json

转录脚本默认使用火山 v3 Seed ASR 2.0:

POST /api/v3/auc/bigmodel/submit
POST /api/v3/auc/bigmodel/query
X-Api-Resource-Id: volc.seedasr.auc

如果要临时回退或对比其他资源,可用环境变量覆盖:

VOLCENGINE_ASR_RESOURCE_ID=volc.bigasr.auc "$SKILL_DIR/scripts/volcengine_transcribe.sh" audio.mp3

步骤 4: 生成字级时间轴

node "$SKILL_DIR/scripts/generate_subtitles.js" volcengine_result.json
# 输出: subtitles_words.json

cd ..

时间戳规则:

  • generate_subtitles.js 必须兼容 result.utterances(v3)和旧版 utterances
  • v3 结果里的无效时间戳 token(常见为空格,start_time/end_time = -1)必须过滤,否则会制造假静音。
  • 2026-06-25 的 180 秒样本评估:Seed ASR 2.0 相对校对字幕时间窗的词级边界偏移中位数约 80ms,P90 约 240ms,最大约 620ms;可作为默认剪口播时间轴,但长句仍需按词级时间戳重新切成字幕行。

步骤 5: 分析口误(脚本+AI)

5.1 生成易读格式

cd 2_分析

node -e "
const data = require('../1_转录/subtitles_words.json');
let output = [];
data.forEach((w, i) => {
  if (w.isGap) {
    const dur = (w.end - w.start).toFixed(2);
    if (dur >= 0.2) output.push(i + '|[静' + dur + 's]|' + w.start.toFixed(2) + '-' + w.end.toFixed(2));
  } else {
    output.push(i + '|' + w.text + '|' + w.start.toFixed(2) + '-' + w.end.toFixed(2));
  }
});
require('fs').writeFileSync('readable.txt', output.join('\\n'));
"

5.2 读取用户习惯

先读 用户习惯/ 目录下所有规则文件。

5.3 生成句子列表(关键步骤)

必须先分句,再分析。按静音切分成句子列表:

node -e "
const data = require('../1_转录/subtitles_words.json');
let sentences = [];
let curr = { text: '', startIdx: -1, endIdx: -1 };

data.forEach((w, i) => {
  const isLongGap = w.isGap && (w.end - w.start) >= 0.5;
  if (isLongGap) {
    if (curr.text.length > 0) sentences.push({...curr});
    curr = { text: '', startIdx: -1, endIdx: -1 };
  } else if (!w.isGap) {
    if (curr.startIdx === -1) curr.startIdx = i;
    curr.text += w.text;
    curr.endIdx = i;
  }
});
if (curr.text.length > 0) sentences.push(curr);

sentences.forEach((s, i) => {
  console.log(i + '|' + s.startIdx + '-' + s.endIdx + '|' + s.text);
});
" > sentences.txt

5.4 脚本自动标记静音(必须先执行)

node -e "
const words = require('../1_转录/subtitles_words.json');
const selected = [];
words.forEach((w, i) => {
  if (w.isGap && (w.end - w.start) >= 0.2) selected.push(i);
});
require('fs').writeFileSync('auto_selected.json', JSON.stringify(selected, null, 2));
console.log('≥0.2s静音数量:', selected.length);
"

→ 输出 auto_selected.json(只含静音 idx)

5.4b 头尾裁剪(转录盲区,必做)

🚨 火山只转语音,结尾的未转录杂音/收尾动作不在字幕里,所有检测器都看不见。必须比对视频时长补出来。见 用户习惯/3-静音段处理.md

VDUR=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "file:$VIDEO_PATH")
node -e "
const fs=require('fs');
const w=require('../1_转录/subtitles_words.json');
const auto=require('./auto_selected.json');
const VDUR=$VDUR, last=w[w.length-1];
if(VDUR - last.end > 0.3){            // 结尾未覆盖 → 补尾元素并预选
  w.push({text:'',start:last.end,end:VDUR,isGap:true,reason:'结尾未转录(杂音/收尾)'});
  auto.push(w.length-1);
  fs.writeFileSync('../1_转录/subtitles_words.json',JSON.stringify(w));
  fs.writeFileSync('./auto_selected.json',JSON.stringify([...new Set(auto)].sort((a,b)=>a-b),null,1));
  console.log('补尾元素 idx',w.length-1,'['+last.end+'→'+VDUR+']');
} else console.log('尾部已覆盖');
if(w[0].start>0.3) console.log('⚠️ 开头',w[0].start,'s 未覆盖,考虑补头元素');
"

5.5 AI 分析口误(追加到 auto_selected.json)

🚨 核心原则:删前保后。所有重复/口误,删前面的,保后面的。

按检测类型分工,多 Agent 并行执行

每个 Agent 只负责一种检测,prompt 更短更精确,避免规则互相干扰。

Agent 输入 检测内容 删除范围
A-句间重复 sentences.txt 相邻/隔一句开头≥5字相同 前句整句
B-句内重复 sentences.txt 同一句内 A+中间+A 模式 只删前面片段,不删整句
C-残句 sentences.txt 话说一半+静音+后面重说 删残句整句

脚本可直接处理(不需要 AI)

  • 卡顿词(那个那个、就是就是)→ 正则匹配
  • 语气词(嗯、啊、呃)→ 标记待人工确认

复核(verify)—— 按风险投放,不要铺满(见 用户习惯/10-删除风险分层.md):

  • 低风险免验:静音、逐字子集重复(删的是保留内容的逐字开头,如删「我把同一句」保「我把同一句话」)、≤3字纯卡壳/语气词 → 直接进 auto_selected,交网页人工兜底。
  • 高风险必验:整句删除、"开头撞结尾岔"(如「超出了预算」vs「超出了路线规划能力」)、长片段重复 → 派对抗 reviewer 复核,确认没把独有内容删掉。
  • 教训:曾对全部候选铺开 2× 复核,命中仅 ~4/91 且全落在高风险类(见 log/)。verify 很贵,砸在容易删错的地方就好。

Agent prompt 模板

给每个 Agent 的 prompt 包含:
1. 只放该 Agent 对应的一条检测规则(从用户习惯/读取)
2. 完整的 sentences.txt 内容
3. 明确要求:返回要删除的 idx 范围列表
4. 🚨 强调"删前保后":删前面的版本,保留后面更完整的版本

Agent 返回格式

| 句号 | idx范围 | 类型 | 内容摘要 | 处理 |
|------|---------|------|----------|------|

删除idx列表: [所有要删除的idx]

合并结果

收集所有 Agent 返回的 idx 列表 → 合并到 auto_selected.json → 去重排序

范围整段删除规则:标记口误时,从 startIdx 到 endIdx 之间的所有元素(含中间的 gap)全部加入 auto_selected。不要逐个挑选文字 idx 而跳过 gap。

🚨 关键警告:行号 ≠ idx

readable.txt 格式: idx|内容|时间
                   ↑ 用这个值

行号1500 → "1568|[静1.02s]|..."  ← idx是1568,不是1500!

口误分析.md 格式:

## 句间重复 (Agent A)

| 句号 | idx范围 | 内容摘要 | 处理 |
|------|---------|----------|------|
| 5 | 212-233 | 与句6重复,句6更完整 | 删前句 |

## 句内重复 (Agent B)

| 句号 | idx范围 | 内容摘要 | 处理 |
|------|---------|----------|------|
| 16 | 492-510 | "很多人一提到CLI命令"前半重复 | 删片段 |

## 残句 (Agent C)

| 句号 | idx范围 | 内容摘要 | 处理 |
|------|---------|----------|------|
| 7 | 266-275 | "为了解释为了回答这个"未完成 | 删整句 |

5.6 口播稿对齐补漏(有口播稿时)

若用户提供口播稿/原文稿(口播是照稿读的),用它做句子级对齐补漏 —— 见 用户习惯/11-口播稿对齐.md

口播稿 = 语义 ground truth(措辞会变,如"两个模型"↔"两个大模型",别逐字 diff)。把每个转录句对齐到口播稿句,抓纯文本检测漏掉的整句级口误:整句重说、残句、无对应口误 —— 尤其技术名词卡壳(Mindverse / δ-mem / LoRA 念错重来、"Delta Mam"、孤立单字"从")。这类整句删除属高风险 → 走复核,确认保留版覆盖了口播稿原意。

步骤 6-7: 审核

cd ../3_审核

# 6. 生成审核网页(传入视频文件,自动创建符号链接)
node "$SKILL_DIR/scripts/generate_review.js" ../1_转录/subtitles_words.json ../2_分析/auto_selected.json "$VIDEO_PATH"
# 输出: review.html, video.mp4(符号链接)

# 7. 启动审核服务器
node "$SKILL_DIR/scripts/review_server.js" 8899 "$VIDEO_PATH"
# 打开 http://localhost:8899

⚠️ 必须用 review_server.js,不能用 python3 -m http.server 替代。 原因:视频播放依赖 HTTP Range 请求(206),python 简易服务器不支持,会导致视频无法播放/无声音。 普通用户保持这个终端窗口开着即可;Claude Code / Codex 由 Agent 使用当前环境可用的后台任务能力托管。不要要求用户安装 tmux。

用户在网页中:

  • 播放视频画面确认
  • 勾选/取消删除项
  • 左键按住滑过文字可批量标删/恢复,支持跨行滑动;拖过头时不松手往回拉,选区会实时收窄
  • 点击「执行剪辑」

步骤 8: 监听剪后视频

用户点击审核页按钮后,review_server.js 只会剪出新视频,并在审核目录写入 cut_done.json。Agent 必须监听这个文件,确认剪后视频真实生成且大小稳定。

# 在另一个 Agent 任务/终端里等待用户确认后的剪辑结果
node "$SKILL_DIR/scripts/watch_cut_done.js" "output/YYYY-MM-DD_视频名/剪口播/3_审核"

监听结果会返回剪后视频路径:

{
  "output": "output/YYYY-MM-DD_视频名/剪口播/3_审核/视频名_cut.mp4",
  "newDuration": "123.45",
  "outputSize": 12345678
}

把返回里的 output 记为 CUT_VIDEO,后续字幕必须基于这个视频重转写。

不要用 curl /api/cut 或脚本模拟点击,除非用户明确授权。

步骤 9: 基于剪后视频重新转写

"$SKILL_DIR/scripts/generate_srt_for_video.sh" "剪后视频.mp4" "output/YYYY-MM-DD_视频名/字幕"

字幕必须基于剪后视频重新转写,不能用原始视频字幕反推。

这一步只产出火山转写初稿:

output/YYYY-MM-DD_视频名/字幕/1_转录/volcengine_result.json
output/YYYY-MM-DD_视频名/字幕/subtitles_with_time.json
output/YYYY-MM-DD_视频名/字幕/3_输出/video.raw.srt

步骤 10: AI 校对字幕

Agent 必须读取 video.raw.srtsubtitles_with_time.json,对照用户给的口播稿/正文/专名上下文做 AI 校对。

校对规则:

  • 保留原时间轴,优先只改字幕文字。
  • 修正技术名词、工具名、人名、英文词、同音误识别。
  • 调整明显不合理的断句。
  • 不新增视频里没有说出的内容。
  • 校对完成后写入 字幕/3_输出/video.srt

步骤 11: 整理基础素材包

AI 校对完成后,再把剪后视频和最终字幕整理到项目根目录:

OUTPUT_ROOT="output/YYYY-MM-DD_视频名"
ln -sf "$CUT_VIDEO" "$OUTPUT_ROOT/source_cut.mp4"
ln -sf "$OUTPUT_ROOT/字幕/3_输出/video.srt" "$OUTPUT_ROOT/subtitles.srt"

最终产物至少包括:

output/YYYY-MM-DD_视频名/字幕/3_输出/video.srt
output/YYYY-MM-DD_视频名/source_cut.mp4
output/YYYY-MM-DD_视频名/subtitles.srt

如果用户下一步要跑 口播成片,把产物整理成这个心智:

source_cut.mp4  = 剪后口播视频
subtitles.srt   = AI 校对后的剪后字幕 SRT
assets/         = 可选素材

source_cut.mp4subtitles.srt 可以是符号链接;给用户汇报时,要明确指出它们已经指向剪后视频和剪后字幕。

审核硬规则

到审核页这一步必须停下来,把链接交给用户。

用户确认前,Agent 只能做三件事:

  1. 生成 review.html
  2. 启动 review_server.js
  3. 告诉用户审核页 URL

除非用户明确说“你帮我点执行”或“直接剪”,否则 Agent 不允许:

  • 直接调用 /api/cut
  • 用 curl / 脚本模拟点击
  • 跳过审核页直接生成剪后视频

用户在审核页点击「执行剪辑」后,服务器只生成剪后视频。Agent 监听到剪后视频完成后,才能进入剪后重转写和 AI 校对字幕。


数据格式

subtitles_words.json

[
  {"text": "大", "start": 0.12, "end": 0.2, "isGap": false},
  {"text": "", "start": 6.78, "end": 7.48, "isGap": true}
]

auto_selected.json

[72, 85, 120]  // Claude 分析生成的预选索引

剪辑编码(硬性规则)

⚠️ 匹配原片参数重编码,帧级精确切割。

cut_video.sh 的工作方式:

  1. 自动检测原片编码参数(codec/profile/pix_fmt/bitrate)
  2. filter_complex trim+concat 帧级精确切割
  3. 以相同参数重编码:-profile:v high -b:v {原片码率} -pix_fmt yuv420p

关键:重编码画质取决于是否匹配原片参数,不是 CRF 值。

  • -b:v {原片码率} -profile:v high -pix_fmt yuv420p → 肉眼无区别
  • ❌ 只指定 -crf N 不指定 profile/pix_fmt → 可能有偏差

配置

火山引擎 API Key

如果用户没有火山语音识别 API Key,先让用户打开火山控制台开通“录音文件识别 2.0”并创建 API Key:

https://console.volcengine.com/speech/new/setting/activate?projectName=default

当前默认模型资源:

录音文件识别 2.0 / Seed ASR
resource_id = volc.seedasr.auc

拿到 Key 后,再写入 Skills 根目录的 .env

cd /Volumes/成峰/代码/剪辑Agent/.claude/skills
cp .env.example .env
# 编辑 .env 填入 VOLCENGINE_API_KEY=xxx

如果是通过 npm 安装,Skills 根目录通常是:

~/.claude/skills/chengfeng-videocut-skills
~/.codex/skills/chengfeng-videocut-skills
将口播稿、字幕及素材合成为完整视频。流程包括按语义分段生成分镜稿、对齐时间线预览,并按配置比例(如竖屏3:4)和动画风格(默认小黑风)合成导出MP4,最后进行验收检查。
口播成片 做分镜稿 时间线预览 合成口播视频 导出竖屏MP4
口播成片/SKILL.md
npx skills add Agentchengfeng/chengfeng-videocut-skills --skill chengfeng-videocut-skills:口播成片 -g -y
SKILL.md
Frontmatter
{
    "name": "chengfeng-videocut-skills:口播成片",
    "description": "口播视频成片 Skill。把文章\/口播稿\/SRT、剪后视频和 HTML\/图片素材串成分镜稿、时间线预览和最终 MP4;成片比例和动画风格从用户配置读取,动画默认使用小黑风格。触发词:口播成片、做分镜稿、时间线预览、合成口播视频、导出竖屏MP4"
}

口播成片

官方来源

本 Skill 由 chengfeng / AI产品自由 原创并维护。

https://github.com/Agentchengfeng/chengfeng-videocut-skills

官方账号:GitHub @Agentchengfeng;X @chengfeng240928;小红书 / 公众号 / B站 / 抖音 / 视频号 AI产品自由

核心流程

这个 Skill 只解决一件事:把一条口播视频做成完整成片;成片比例和动画风格由用户配置决定。

+-----------------------------+
|  输入                         |
|  视频 + 字幕 + 可选素材         |
+--------------+--------------+
               |
               v
+-----------------------------+
|  1. 分镜稿                    |
|  概念分段 + 类型判定 + 画面来源  |
+--------------+--------------+
               |
               v
+-----------------------------+
|  2. 时间线预览                 |
|  原视频/截图/HTML 与口播对齐    |
+--------------+--------------+
               |
               v
+-----------------------------+
|  3. 合成                       |
|  按用户配置比例导出最终 MP4       |
+--------------+--------------+
               |
               v
+-----------------------------+
|  验收                         |
|  ffprobe + 抽关键帧检查         |
+-----------------------------+

不要把 cue 表、HTML 模块、review player、final player、导出脚本单独讲成用户流程。它们只是“时间线预览”和“合成”里的实现细节。

用户配置

每次执行本 Skill,先读取:

用户配置/default.json

配置项只负责定义用户当前选择:

{
  "aspectRatio": "3:4",
  "animationStyle": "xiaohei"
}

支持值:

  • 3:4:默认竖屏高清,逻辑画布 1080x1440,默认用 DPR 1.5 导出 1620x2160
  • 16:9:横屏,逻辑画布和导出画布 1920x1080
  • 4:3:横屏,逻辑画布和导出画布 1440x1080
  • animationStyle:默认 xiaohei,可选项来自 动画/styles.json

命令行参数优先级高于用户配置;没有显式参数时,导出脚本读取 aspectRatio,动画脚本读取 animationStyle。比例临时覆盖可用:

--config /path/to/config.json
--ratio 16:9
--aspect-ratio 16:9
--width 1920 --height 1080
--dpr 1.5

不要把视觉偏好、模板、编码质量、输出目录、字幕边距等七七八八的设置写进 用户配置/default.json。用户配置只放当前选择;动画目录只放可选项注册表和具体风格实现。

动画风格

动画风格的当前选择放在 用户配置/default.json

animationStyle

动画目录只注册可选项:

动画/styles.json

xiaohei 对应:

动画/ian-xiaohei-svg-motion/

当分镜或 HTML 模块需要做解释动画、流程动画、手绘感高亮时,默认先用小黑漫画感 SVG 动效。除非用户明确指定其他动画风格,否则不要临时发明新风格。

输入

先定位这些文件:

  • 主视频:source_cut.mp4*_cut.mp4 或用户指定的剪后视频。
  • 字幕:subtitles.srtvideo.srtsubtitles_with_time.json
  • 可选文稿:文章、口播稿、正文草稿,只用于理解意图。
  • 可选素材:assets/ 里的截图、产品页、评论图、结果页、证明页。
  • 项目规则:如果当前项目有 AGENTS.mdREADME.md,先读。

真相源优先级:

实际音频 / 字幕 > 剪后视频画面 > 素材文件 > 文稿草稿

如果文稿和实际字幕不一致,以字幕和音频为准。

第 1 步:分镜稿

默认先做 HTML 分镜核对页,不先写 Markdown 表格。

分镜的前置流程必须按这个顺序执行:

  1. 先按口播语义分段:把讲同一个概念、同一个动作、同一个证据的一句、两句或三句合成一段;不要按字幕编号机械切分。
  2. 再判断每段的画面任务:这是操作演示、原图讲解、结果证明、概念梳理,还是纯文字表达。
  3. 再决定画面来源:能用真实录屏、原始截图、原始图片证明的段落,优先用原素材;只有概念性讲解且当前屏幕主要是文字、空白或弱相关画面时,才设计 HTML / 小黑动画。
  4. 最后才进入具体视觉设计:每个 HTML / 小黑动画段都要先写清它的独立隐喻和动作,再实现模块。

常见路径:

review/storyboard-audit-vN.html

默认基于这个模板:

templates/storyboard-audit.html

分镜稿要让用户回答:

这句话说到这里,观众眼前该看到什么?

每段至少写清楚:

  • 时间范围
  • 字幕编号
  • 完整口播
  • 语义分段依据
  • 画面任务
  • 画面类型:原视频操作录屏原始截图原始图片信息图聚焦HTML 动画文字 + 动画
  • 素材来源
  • 镜头动作

画面选择规则:

  • 操作演示:使用原视频 / 原录屏,不要改成抽象动画。
  • 讲图片内容、图表内容、报错截图、产品截图:直接用原始图片或原始截图,动画只做圈选、标注、局部聚焦。
  • 真实操作、证明页、结果页、需要可信度的片段:保留原视频或原始截图。
  • 录屏 / 原视频片段默认按原画面展示;只有明确需要避开后续统一字幕时,才把该段标记为录屏小窗,并在底部留出字幕安全区。不要把小窗规则批量套到所有录屏段。
  • 概念梳理、机制关系、系统分工、观点归纳,并且当前屏幕主要是文字、空白或弱相关画面:做 HTML / 小黑动画。
  • 可以用简短文字辅助理解的抽象段:使用文字 + 动画;文字负责命名,动画负责关系和动作。
  • 已有截图或信息图:优先复用,不要重画。
  • 同一张图多次出现时,每次必须承担不同任务:全貌、局部聚焦、对比、结果复看。
  • 不要把所有动画做成同一套动态。每个动画段必须先单独设计动作隐喻,再实现。

分镜设计硬标准:

  • 一页只讲一个概念、一个动作或一个案例。同一段口播里如果出现两个独立案例,必须拆成两个页面;不要为了少做页面把两个案例挤进同一张表或同一个动画。
  • 每个 HTML / 小黑动画段必须先写清楚“这句话说到这里,画面发生什么变化”,再实现。动作要绑定具体口播句或字幕,不要把同一套入场 / 闪烁 / 放大平均套给所有段落。
  • 讲原图、截图、结果页时,主视觉必须是原素材。HTML 只负责裁切、放大、圈选、标注和焦点切换;不要用录屏抽帧或重画图替代原图。
  • 长图和网页结果页默认裁掉无信息的空白区域,优先露出观众正在听到的区域;口播说到对应对象时,可以放大对应图片或局部,其余内容退后。
  • 视频画面里不要出现素材路径、内部说明、动作解释或“原图素材 · img/xxx.png”这类工作台文字。分镜稿可以写来源,成片画面只保留观众需要看的内容。
  • 没有必要的标题就不放标题。结果页、表格页、原图对比页优先让主视觉自己说话,只保留短标签、模型名、指标名或必要的标注。
  • 数据对比页优先用清晰的表格、列对齐、短标签和少量高亮。字号要服务阅读,不要把字塞进小方块;能用简单表格讲清楚,就不要做复杂卡片堆叠。
  • 竖屏短视频里的表格不能只做成中间一条横向小表。数据阶段要把表格作为主视觉,占据主要安全区;前置任务说明、案例标签、总结句只在对应口播阶段出现,进入最终数据对比阶段后要消失或退到不占空间的位置。
  • 评价词只写口播明确说到或剪辑需要强调的正向 / 中性结果。对照项可以留空或只展示数据;不要额外加“慢且贵”等负面用词,除非口播原句就是这个判断。
  • 图标必须从动画库索引里找。ChatGPT、Claude、Flash 闪电、Step、DeepSeek、Qwen 等已有图标不得用抽象形状替代;新增用户给的 SVG,要先存入动画库并更新索引。

分镜方向确认前,不要进入时间线预览。

第 2 步:时间线预览

分镜方向确认后,再做时间线预览。

常见路径:

review/timeline-preview.html

默认基于这个模板:

templates/timeline-preview.html

时间线预览要检查:

  • 画面切换是否跟口播句子对齐。
  • 原视频有没有被误换成 HTML。
  • 被标记为录屏小窗的段落是否避开底部字幕安全区;未标记的录屏段不要被自动缩窗。
  • 截图、页面、证明素材有没有用错。
  • 图片素材默认保留左右边距,不要贴满当前画面;需要强调完整截图时再单独缩小。
  • 画面有没有挡字、裁切、留黑边。
  • HTML 模块单独看没问题,但放进整条时间线后是否仍然成立。

预览页里有源视频时,必须用支持 HTTP Range 的服务打开页面,否则浏览器不能随机 seek,进度条会被拉回开头。不要用普通 python -m http.server 预览 MP4 时间线。默认使用:

node ~/.Codex/skills/chengfeng-videocut-skills/口播成片/scripts/serve_range_preview.cjs \
  --project-dir /absolute/path/to/project \
  --port 8767

必要时生成:

docs/08-动画cue表-vN.md
html-modules/module-*.html
html-modules/xiaohei-*.html

如果要新做解释动画,先读 用户配置/default.jsonanimationStyle,再到 动画/styles.json 找对应的动画子 Skill。

每个动画动作必须绑定到具体口播句,不要平均分配时间。多阶段 HTML 动画必须显式管理显隐状态:下一阶段出现时,上一阶段不再承担信息任务的说明卡、标签和注释要隐藏;不要让前一阶段继续占用主视觉空间,尤其是竖屏数据表、截图聚焦和结果页。

第 3 步:合成

只有用户确认时间线预览后,才能合成。

合成前创建或确认:

final-player.html

新写 final-player.html 或 HTML 模块前,读取:

references/artifact-contracts.md

如果项目里有 HTML 模块,先注入 render mode:

node ~/.claude/skills/chengfeng-videocut-skills/口播成片/scripts/write_render_mode.cjs \
  --project-dir /absolute/path/to/project

时间线预览和最终导出必须使用同一套 HTML 渲染上下文。HTML 模块在预览页和 final-player.html 里都要带 ?timeline=1&render=1,预览页只负责把最终画布等比缩放进窗口,不能让模块按预览窗口重新响应式排版。

高清交付不能把 CSS 逻辑画布直接放大。默认 3:4 必须保持 1080x1440 逻辑画布,再用截图 DPR 1.5 输出 1620x2160;否则表格、CSS 卡片、截图标注会在导出里相对变小,和预览不一致。

如果预览和导出出现大小不一致,先检查 HTML 模块内部 CSS、render-mode.js 和导出 DPR,确认预览页与 final-player 的逻辑画布相同,不要先重导整条视频。常见原因是预览 iframe 较小,看起来正常;最终高清画布触发了 .photo-frame { max-width: ... }.stage { width: min(...) }.wrap { max-height: ... }clamp(...) 这类预览尺寸上限,导致导出变成“小图”。修复顺序:

  1. write_render_mode.cjs 重新生成 html-modules/render-mode.js
  2. 在时间线预览里确认 HTML 模块 URL 已经变成 ?timeline=1&render=1
  3. 确认 export_final_video.cjsviewport 是逻辑画布尺寸,dpr 才是高清倍数。
  4. 用 final-player 在实际导出 viewport 下抽该模块的关键帧,必要时用 getBoundingClientRect() 对比主视觉容器尺寸。

竖屏里处理横向小黑 SVG / 16:9 SVG 模块时,禁止用 .wrap { transform: scale(...) } 这类整体放大来解决“小横条”问题。整体缩放会在 3:4 画布里裁掉左右边缘,尤其是左右分布的模型卡、箭头、说明标签。要么重排成竖屏构图,要么保持完整安全区;改完必须抽该模块的左右边界帧检查,不能只看中心关键帧。

导出最终视频:

node ~/.claude/skills/chengfeng-videocut-skills/口播成片/scripts/export_final_video.cjs \
  --project-dir /absolute/path/to/project \
  --input-video /absolute/path/to/source_cut.mp4 \
  --duration 173.03

默认按高清交付导出:无损 PNG 中间帧、H.264 crf=14preset=slow。这样可以避免浏览器预览清楚、导出后小字和细线发软:

node ~/.claude/skills/chengfeng-videocut-skills/口播成片/scripts/export_final_video.cjs \
  --project-dir /absolute/path/to/project \
  --input-video /absolute/path/to/source_cut.mp4 \
  --duration 173.03 \
  --frame-format png \
  --crf 14 \
  --preset slow

只有临时看节奏、需要快速出草稿时,才显式降级:

node ~/.claude/skills/chengfeng-videocut-skills/口播成片/scripts/export_final_video.cjs \
  --project-dir /absolute/path/to/project \
  --input-video /absolute/path/to/source_cut.mp4 \
  --duration 173.03 \
  --frame-format jpeg \
  --quality 92 \
  --crf 18 \
  --preset medium

比例读取规则见“用户配置”。项目与用户配置不同时,可传:

--config
--ratio
--aspect-ratio
--fps
--player
--stage
--frames-dir
--width
--height
--frame-format png|jpeg
--quality 100
--crf 14
--dpr 1.5
--device-scale-factor 1.5

验收

导出成功不等于成片正确。必须做两步:

  1. ffprobe 检查分辨率、帧率、时长和音频。
  2. 抽 3 张以上关键帧,人工看画面是否正确。
  3. 对每个 HTML 模块,至少抽 1 张对应口播时间点的 final-player 帧,和时间线预览的同一时间点对照;大小、位置、裁切和显隐必须一致,不能只用 ffprobe 作为完成依据。

按当前比例检查分辨率,其他期望来自脚本默认值和项目实际输入。当前默认配置为:

1620x2160
逻辑画布 1080x1440,DPR 1.5
3:4
30fps
时长和剪后源视频一致
有音频
无 HUD、按钮、审核时间线、浏览器 UI

边界

适合:

  • 中文口播
  • 教程、产品演示、结果展示、知识讲解
  • 已有剪后视频和字幕,素材可后补
  • 原视频 + 截图 + HTML 解释画面混合成片

不优先解决:

  • 没有视频,直接凭文稿生成成片
  • 复杂多机位真人剪辑
  • 需要剪辑软件工程文件的精细调色和多轨混音
  • 用户没看分镜稿和时间线预览就直接要求最终发布

项目卫生

如果在用户写作工作区内新增或修改文件,必须同步更新项目 README 索引。

本地活动日志统一放在:

log/

log/ 只记录本机试验、用户偏好、临时结论和未发布的工作过程,禁止上传 GitHub。该目录已被 .claude/skills/.gitignore 忽略。

不要在这个 Skill 目录里新增 README。这个 Skill 的核心文件只保留:

SKILL.md
templates/
references/
scripts/
用户配置/
动画/

动画/ 用于沉淀口播成片可复用的 HTML/SVG/GSAP 动画子 Skill、模板和规则;可选风格见 动画/styles.json,当前选择见 用户配置/default.json

将Ian小黑风格插画转化为可控的HTML+SVG+GSAP动效。通过语义化分层重建认知场景,支持口播字幕对齐、手绘漫画风及可编辑矢量动画,适用于文章配图与短视频视觉辅助。
生成小黑风格SVG动效 制作漫画感HTML动画 口播流程可视化 概念隐喻动画
口播成片/动画/ian-xiaohei-svg-motion/SKILL.md
npx skills add Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion -g -y
SKILL.md
Frontmatter
{
    "name": "ian-xiaohei-svg-motion",
    "description": "Create Ian Xiaohei-style HTML\/SVG motion illustrations for Chinese articles, scripts, storyboard scenes, workflow explanations, concept metaphors, and short video visual aids. Use when the user asks for 小黑 SVG、漫画感 HTML、分层 SVG 动效、把小黑生图做成 HTML\/SVG、可编辑矢量动效、口播流程动画、手绘漫画动效、正文配图动画, or wants a Xiaohei illustration style adapted into controllable HTML\/SVG\/GSAP output instead of raster image generation."
}

Ian Xiaohei SVG Motion

把 Ian 小黑正文配图的原则,改造成可控的 HTML + SVG + GSAP timeline 动效。目标不是复刻生图像素,而是把文章里的一个认知动作重建成分层漫画舞台,方便录视频、按字幕 cue 对齐、后续改文案和元素。

Core Rule

Do not auto-vectorize a PNG and animate the resulting path soup. Use raster images only as composition references. Rebuild the scene as semantic SVG groups:

idea -> shot plan -> SVG layer plan -> HTML/SVG template -> GSAP timeline -> static + motion review

Workflow

  1. Extract one cognitive anchor from the article, script, screenshot, or storyboard scene.
  2. Choose one physical metaphor: sorting, carrying, bridging, leaking, catching, folding, weighing, opening, rerouting, or falling.
  3. Make Xiaohei perform the core action. If removing Xiaohei does not change the meaning, redesign.
  4. Design a 16:9 white canvas with one main scene, 35%+ whitespace, and 3-5 short handwritten annotations at most.
  5. Build semantic SVG groups for every moving object.
  6. Animate with GSAP timeline. Use x, y, rotation, scale, opacity, and SVG stroke drawing. Avoid layout animations.
  7. Save both a playable HTML page and a static review screenshot.
  8. If this is for a 口播成片 project, map timeline segments to subtitle/cue timing before final render.

Read When Needed

  • Read references/style-rules.md before designing a new scene or judging whether the result still feels like Ian Xiaohei.
  • Read references/svg-layering.md before writing or editing the SVG structure.
  • Read references/motion-rules.md before writing GSAP animation.

Output Contract

Default output folder:

output/<slug>-xiaohei-svg-motion/

Required files:

index.html
README.md
preview.png
vendor/gsap.min.js

Optional files:

source.png        # reference image, if provided by the user
cue-map.md        # when aligning to spoken script or subtitles

Reusable Assets

AI model and interface icons live in:

assets/icons/

Use assets/icons/index.json as the source of truth. Keep original SVG files in subfolders and inline their complete SVG content into scene SVGs during generation, so gradients, strokes, and brand colors are preserved.

Icon rules:

  • If index.json already has the exact model, provider, or semantic icon, use that icon. Do not replace ChatGPT, Claude, Flash lightning, Step, DeepSeek, Qwen, bug, table, chart, database, or web icons with generic boxes, stars, sparks, or abstract marks.
  • When the user provides a new SVG icon, save the raw SVG under assets/icons/<category>/, add an entry to index.json, and then reference it by id in the scene plan.
  • For comparison scenes, icon choice is part of the meaning. Keep model icons visually consistent in size and placement so the viewer can identify the actors before Xiaohei starts moving objects.

Template

Use assets/templates/xiaohei-comic-motion/ as the starter when the request resembles a hand-drawn comic scene with moving objects, arrows, annotations, or a Xiaohei action.

Use assets/templates/xiaohei-series-reference/ when the request asks for multiple variants, a reusable series, or a broader reference set for 口播 explanation scenes.

Copy the template into the project output folder, then edit:

  • SVG group names.
  • Handwritten labels.
  • Object positions.
  • Timeline labels and durations.
  • README notes for the scene-specific metaphor.

Quality Gate

Before final response:

  • Open the HTML in a local server.
  • Check console for errors.
  • Capture a static screenshot with ?static=1.
  • Capture at least one playback mid-frame when the scene has multiple beats. If available, use ?frame=mid for a deterministic review frame.
  • Visually inspect that text, arrows, Xiaohei, props, belts, pits, cards, and final impact points do not overlap.
  • Confirm the animation has visible progression: context first, action second, problem/result third, summary last.
  • Confirm annotations appear only after the object/action they explain.
  • Remove decorative or semi-transparent guide arrows if the object motion already shows direction.
  • Confirm Xiaohei is part of the action.
  • Confirm the page is not just a PNG in an <img> tag unless the user explicitly asked for PNG-only camera moves.
元技能,使Agent从错误中学习。通过记录用户反馈和纠正,自动回溯上下文,将规则整合至文档正文而非末尾,实现方法论与规则的持续自进化更新。
用户纠正AI错误 用户说记住这个、以后注意 发现新的通用规律
自进化/SKILL.md
npx skills add Agentchengfeng/chengfeng-videocut-skills --skill chengfeng-videocut-skills:自进化 -g -y
SKILL.md
Frontmatter
{
    "name": "chengfeng-videocut-skills:自进化",
    "author": "chengfeng \/ AI产品自由",
    "source": "https:\/\/github.com\/Agentchengfeng\/chengfeng-videocut-skills",
    "description": "自进化 skills。记录用户反馈,更新方法论和规则。触发词:更新规则、记录反馈、改进skill",
    "official_accounts": "GitHub @Agentchengfeng;X @chengfeng240928;小红书\/公众号\/B站\/抖音\/视频号 @AI产品自由"
}

自更新

让 Agent 从错误中学习,持续改进

快速使用

用户: 记录一下刚才的问题
用户: 更新口误识别的规则
用户: 这个教训要记下来

更新位置

内容类型 目标文件 示例
用户画像 CLAUDE.md 偏好、习惯
方法论 + 反馈 */tips/*.md 规则、教训

流程

用户触发("刚才失败了"、"记录一下")
    ↓
【自动】回溯上下文,找出问题点
    ↓
【自动】读目标文件全文,理解现有结构
    ↓
【自动】整合到正文相应位置(不是只往末尾加!)
    ↓
【自动】反馈记录只记事件,不重复规则
    ↓
汇报更新结果

关键:不要问"什么问题",直接从上下文分析!

更新原则

❌ 错误做法:往末尾加

## 反馈记录
### 2026-01-14
- 教训:审查稿末尾必须生成删除任务清单
- 教训:用户确认时要分别确认口误和静音

只加到反馈记录 = 规则散落在末尾,下次还会犯错

✅ 正确做法:整合到正文

  1. 读全文,理解章节结构
  2. 找到相应位置,把规则整合进去
  3. 反馈记录只记事件- 审查稿标记了静音,但剪辑时漏删
## 四、审查稿格式
(新增删除任务清单模板)

## 五、确认与执行流程  ← 缺这个章节就新增
(新增分别确认口误和静音的流程)

## 反馈记录
### 2026-01-14
- 审查稿标记了静音,但剪辑时漏删(只删了口误)

触发条件

  • 用户纠正 AI 错误
  • 用户说"记住这个"、"以后注意"
  • 发现新的通用规律

反例

2026-01-13

❌ 错误:
用户: 刚才失败了,更新到skills
AI: 请告诉我你发现了什么问题?  ← 不该问!

✅ 正确:
AI: [自动回溯上下文,找到失败点]
AI: [执行更新]

2026-01-14

❌ 错误:
AI: 已更新,在反馈记录新增3条教训  ← 只加末尾!

✅ 正确:
AI: [读全文,理解结构]
AI: [整合到正文相应位置]
AI: [反馈记录只记事件]
AI: 已更新:新增第五章"确认与执行流程",更新第四章模板

原则:规则要整合到正文,反馈记录只是事件日志

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-07-17 10:06
浙ICP备14020137号-1 $访客地图$