王凯 SillyTavern 视频生产 SOP(Skill 落地范例)

王凯团队为 SillyTavern Online(sillytavern.us)定制的完整视频生产 SOP。方法论基于王凯 Claude Code + Remotion + 模仿参考视频 + 精确元素代码化的实践。

本 wiki 的价值不是 SillyTavern 本身,是展示了一个完整的 Skill 落地工程范例——可以平移到任何产品的视频量产。

1. 全局核心原则(必须背)

#	原则	解释
1	不要文生视频	任何视频必须基于参考视频,禁止凭空创作
2	精确的东西必须代码化	品牌色、Logo、聊天气泡时序、字体大小、转场曲线全做成 React/Remotion 组件,文字只用来组合调用
3	真实 UI 优先于 AI 生成 UI	截图必须从真实网站抓,禁止 AI 画假界面
4	Skill 规则必须标"适用场景"	不要"用暗光剪影",要"暗光剪影只用在角色聚光灯视频"
5	合规规则硬性写入代码	`data/compliance.ts`,不让 AI 自由生成
6	每次修改写进 feedback.md	标注"什么场景下加这条 / 解决了什么问题"
7	质量瓶颈先回读 SOP 和 feedback	不要原地打转

2. 7 个 Phase 总览

graph LR
    P1[Phase 1<br/>创建工作目录] --> P2[Phase 2<br/>学习参考视频]
    P2 --> P3[Phase 3<br/>抓取产品真实资产]
    P3 --> P4[Phase 4<br/>写视频 skill]
    P4 --> P5[Phase 5<br/>生产第一条视频]
    P5 --> P6[Phase 6<br/>三类视频 + 即梦混剪]
    P6 --> P7[Phase 7<br/>规模化 + 持续学习]

每个 Phase 都有验收清单,没通过别进下一阶段。

3. 前置条件

执行前确认:

✅ Claude Code 200 美金订阅
✅ Remotion AI Skill 已安装
✅ Chrome DevTools MCP 已安装并可控制浏览器
✅ 即梦 CLI 已安装
✅ Node.js 20+ 与 Chrome 已就绪

4. Phase 1:创建工作目录

目录骨架

sillytavern-videos/
├── .claude/skills/sillytavern-video/
│   ├── SKILL.md
│   ├── components/                 ← React/Remotion 可复用组件
│   ├── compositions/               ← 三类视频模板
│   ├── data/                       ← 品牌色 / 字体 / 产品事实 / 合规
│   └── feedback.md                 ← 持续学习笔记
├── references/                     ← 参考视频分析
│   ├── README.md                   ← 跨视频共性总结
│   └── frame-analysis/             ← 关键帧截图
├── assets/
│   ├── product-screenshots/        ← 真实产品截图
│   ├── character-cards/            ← 角色卡素材 + JSON
│   └── brand/                      ← Logo / favicon
├── remotion/                       ← npx create-video@latest 初始化
└── output/                         ← 渲染产物

验收

目录存在
remotion/ 里 npm run dev 能启动 Studio
SKILL.md 文件存在(暂时空)
git 已初始化

5. Phase 2:学习参考视频

参考视频选型(3 类)

类型	用途	来源建议
60 秒产品讲解	YouTube 主视频	Dropbox 经典讲解、Notion 官方、Linear 介绍
30 秒角色聚光灯	TikTok / Shorts / Reels	Character.AI 官方 TikTok、Janitor AI、Replika
45 秒对比测评	YouTube + X 切片	影视飓风对比、Fireship 快剪

分析任务(每个视频)

用 Chrome MCP 打开,每 3 秒截一关键帧
提取 8 个维度:
- 总时长 + 段落分镜(开场 / 主体 / CTA 各几秒)
- 镜头节奏(平均时长、最长最短)
- 文字密度(每屏字数、字体相对画面比例)
- 转场类型清单(cut / fade / slide / zoom 各几次)
- 配色方案(主色、强调色、背景色)
- 音乐节拍(有无 beat-sync,几 BPM)
- 开头 3 秒 hook 模式
- 结尾 CTA 呈现方式
references/README.md 写"跨视频共性"总结

验收

references/ 下 6 个分析 md + 关键帧截图
README 包含跨视频共性总结
你本人花 10 分钟读一遍,确认结论符合直觉
"直觉不符的地方比 AI 自己跑出来的更值钱"——王凯的"人定战略高度"

6. Phase 3:抓取产品真实资产

抓取任务(用 Chrome MCP)

6.1 视觉系统 → `assets/brand/`

Logo(SVG 优先,找不到 PNG 透明底)
Favicon
整页 hero 截图

用 DevTools 读 CSS 变量 / computed style → BrandColors.ts

export const BRAND = { primary: '#xxx', accent: '#xxx', ... } as const

BrandTypography.ts(主字体栈 headline + body)

6.2 产品截图 → `assets/product-screenshots/`

角色列表页(grid 全屏 + 局部)
角色卡 hover / 详情态
聊天界面(用公开角色,不触发 NSFW)
设置面板
每张 1080p 以上,禁止压缩

6.3 角色卡素材 → `assets/character-cards/`

首页推荐位 + 列表前 20 个角色:头像、名字、tagline、tag 列表
结构化 JSON:index.json
每个角色头像单独存图

6.4 产品事实 → `data/product-facts.ts`

export const FACTS = {
  characterCount: 10000,      // 真实数字,来源 URL
  needsApiKey: false,         // 用代码常量,不靠记忆
  contextLength: '...',
  modelTypes: ['...'],
  pricing: '...',
  selfHostedDifference: ['...']  // 5 条差异点
}

每一条都标注来源 URL,禁止编造,拿不准写 unknown

6.5 合规底线 → `data/compliance.ts`

export const COMPLIANCE = {
  forbiddenWords: [...],     // 明显成人词、暴力词
  mustInclude: ['sillytavern.us'],
  ageGate: '18+',
  platformRules: {
    youtube: '不得使用 NSFW 暗示画面',
    tiktok: '禁止任何性暗示文本和画面',
    instagram: '同 TikTok',
  }
}

验收

3 个 assets/ 目录有真实素材
4 个 ts 文件通过 TypeScript 编译
你本人逐个打开看一眼,确认色值、字体、产品事实没编造——"编造一处后续视频就废一批"

7. Phase 4:写视频 Skill

7.1 SKILL.md 结构

---
name: sillytavern-video
description: 给 SillyTavern Online 制作三类宣发视频。统一品牌组件 + 合规规则。
---

# 何时触发本 skill
- 用户说"做一条 SillyTavern 视频 / spotlight / 讲解 / 对比"
- 用户给一个角色名或链接,要求出短视频

# 三类视频模板

## 角色聚光灯(30s, 1080x1920, TikTok/Shorts/Reels)
- 适用场景:[列出来]
- 不适用场景:[列出来——比如不要用在产品功能演示]
- 调用:CharacterSpotlight composition

## 产品讲解(60s, 1920x1080, YouTube)
- 适用 / 不适用 / 调用 ProductExplainer

## 对比测评(45s, 1920x1080)
- 适用 / 不适用 / 调用 Comparison

# 通用规则(每条视频都遵守)
- 必须从 product-facts.ts 取产品事实,禁止编造
- 必须通过 compliance.ts 校验台词和画面
- 必须以 sillytavern.us 的 CTA 结束
- 文字密度遵守 references/README.md 中"跨视频共性"小节

# 反模式(明确禁止)
- 用 AI 生成假 UI 截图代替真截图
- 在 TikTok 视频里出现 NSFW 暗示
- 凭空生成对白(必须用 character-cards/index.json 里真实存在的 tagline)

# 精确效果规则——必须用代码不能用文字
- 每秒帧数(30 fps 或 60 fps,定一个)
- 每个镜头的最小/最大时长 → SHOT_DURATION 常量
- 转场曲线 → spring() 配置常量
- 文字最大字数/屏 → 工具函数 assertTextDensity(text, maxChars),超出抛错
- 聊天气泡入场时序 → 写在 ChatBubble 组件内部,不允许调用方覆盖

7.2 components/ 必备组件

组件	用途	props
`<Logo />`	品牌 logo	用 BRAND 颜色
`<BrandIntro />`	1.5s 开场动画	—
`<ChatBubble />`	打字机效果聊天气泡	speaker, text, delay, side
`<CharacterCard />`	从 character-cards/index.json 取角色	slug
`<LowerThird />`	第三下条字幕	text, position
`<FactBadge />`	数字事实徽章	label, value(从 FACTS 取)
`<CTAEnd />`	统一收尾(域名 + 二维码)	—

每个组件 props 完整、有 default、有 TypeScript 类型,components/README.md 列"何时用 / 何时不用"。

7.3 compositions/ 三个 composition

CharacterSpotlight.tsx —— 接 characterSlug
ProductExplainer.tsx —— 接 angle: 'no-api-key' | 'character-library' | 'browser-instant'
Comparison.tsx —— 接 vsTarget: 'self-hosted' | 'character-ai'

注册到 remotion/src/Root.tsx。

7.4 关键技巧:"精确"必须代码化

"文字的宽泛度还是比较高的……代码、数学等就信息衰减最少,在想要精确性的场景中非常适合转成 skill 确保唯一效果。"——王凯

反例(文字写规则):"聊天气泡要从下往上滑入,持续 0.3 秒,带弹性效果"——AI 每次解读都不一样

正例(代码写规则):

// 在 ChatBubble 组件内部
const spring = springConfig({ damping: 12, stiffness: 100 })
const slideUp = spring({ frame, from: 100, to: 0 })
// 0.3 秒不是文字描述,是 9 帧(30fps)

验收

npx remotion preview 打开 Studio,三个 composition 列出来且可预览
用三个不同的 inputProps 各跑一遍预览,组件不报错
故意传超长文本进 ChatBubble,应该抛错(密度护栏生效)
故意把 forbiddenWords 塞进对白,渲染应该被 compliance 拦截
SKILL.md 每条规则都有"何时用 / 何时不用"标注

8. Phase 5:生产第一条视频

目标:验证流水线,不是出爆款

流程

从 character-cards/index.json 挑一个 tag 多、tagline 有戏剧张力的非 NSFW 角色
调用 sillytavern-video skill 的 CharacterSpotlight 模板
渲染前预演:
- Studio 截 3 张关键帧(0s / 15s / 28s)
- compliance.ts 跑一遍校验
渲染到 output/spotlight-<slug>-v1.mp4

人类反馈循环(必做)

打开 mp4 看一遍,按清单提反馈,让 Claude Code 改 skill 或组件代码,不要改单个视频:

节奏快还是慢?哪个镜头该砍?
文字哪屏太密?
品牌色出现时长够不够?
CTA 是否清晰?
哪一帧让你出戏?

每改一轮,Claude Code 同步更新 feedback.md,记"v1→v2 改了什么、为什么"。

验收

output/ 下有你愿意发出去的 mp4
skill 经过 ≥ 3 轮迭代,feedback.md ≥ 3 个版本条目
换一个角色重渲染,无需任何额外指令也能出可发布质量

9. Phase 6:三类视频 + 即梦混剪

三类视频铺开

ProductExplainer 模板:60 秒主视频,主题"为什么 SillyTavern Online 不需要 API key"
Comparison 模板:45 秒对比视频,vsTarget = 'self-hosted'。差异点严格来自 product-facts.ts

即梦 CLI 集成

generateAtmosphericShot(prompt, duration) helper:

通过即梦 CLI 生成 3-5 秒意境镜头(不是产品镜头)
只允许用在:开场抽象意境、过场情绪铺垫
硬性禁止:即梦镜头不得用于产品 UI、聊天界面、角色形象本身

验收

三类视频各产出 1 条可发布版本
即梦镜头只出现在允许的场景
三类 composition 共享同一套 components/,组件零重复

10. Phase 7:规模化与持续学习

10.1 多窗口并行

终端 3 个 Claude Code 窗口,分别专注 spotlight / explainer / comparison。每个窗口控制独立 Chrome profile(参考王凯多 Agent 浏览器矩阵架构(v1.1 实操指南))。

10.2 每周一次 skill 复盘

固定每周日,读完所有平台播放数据,挑表现最差和最好的各一条 → Claude Code 分析在 skill 调用上的差异 → 更新 skill 规则。

10.3 feedback.md 是唯一真相源

所有规则迭代必须先写进 feedback.md 再改代码。出现矛盾以最新条目为准。

10.4 每月做一次"参考视频更新"

重跑 Phase 2,因为短视频平台的爆款语法每个月都在变。

11. Bootstrap 提示词(换对话窗口时用)

我们在做 SillyTavern Online 的视频生产项目。
工作目录:~/sillytavern-videos
请先:
1. 读 ~/sillytavern-videos/SOP.md
2. 读 ~/sillytavern-videos/.claude/skills/sillytavern-video/SKILL.md
3. 读 ~/sillytavern-videos/.claude/skills/sillytavern-video/feedback.md
4. 读 ~/sillytavern-videos/references/README.md
读完告诉我目前在 Phase 几、上次最后做到什么、本次该做什么。

12. 故障排查

症状	大概率原因	处理
渲染字幕被裁切	composition 尺寸和模板不匹配	检查 Composition 的 width/height 和 inputProps
品牌色不对	直接写了字符串没引 BrandColors	grep 全项目 `#` 后 6 位 hex,替换为 BRAND.xxx
角色卡渲染空白	character-cards/index.json 字段缺失	重跑 Phase 3 第 3 步
compliance 校验过不去	台词含 forbiddenWords	不要绕过校验,改台词
即梦镜头出现在产品 UI 位置	composition 调用错位置	改回 components/ 真截图

13. 禁止事项清单

违反请人类立即停止并回滚:

❌ 编造产品事实(数字、价格、功能)
❌ 用 AI 生成的 UI 代替真截图
❌ TikTok / Shorts 视频里 NSFW 暗示
❌ 视频里虚构用户证言("用户 A 说……")
❌ 不通过 skill 而直接渲染单条视频(经验无法沉淀)
❌ 改单个视频但不更新 feedback.md
❌ 跨过 SOP 阶段(Phase 2 没完成就跑 Phase 5)

14. 为什么这套 SOP 可以平移到任何产品

抽象层(可平移):

7 个 Phase 顺序
参考视频分析 8 个维度
真实资产抓取 5 类
Skill / Components / Compositions 分层
精确代码化 vs 宽泛文字化的边界
feedback.md 强化学习闭环

特化层(每个产品改):

视频时长 / 平台规格
品牌色 / 字体
产品事实
合规规则
三类视频模板

任何想做产品视频量产的人,都可以基于本 SOP 改特化层。

15. 王凯说

"AI Coding 不只用来写代码,可以用来做视频、做 PPT、做信息提醒 bot、跑投资策略。"

"战略高度决定 AI 输出高度。"

"把知识写成代码塞进 skill,信息衰减最少。"

"feedback.md 是 agent 的成长记录。"

引用

王凯 Claude Code 终端工作流方法论(完整版) - Claude Code 工作流(Skill 体系基础)
王凯多 Agent 浏览器矩阵架构(v1.1 实操指南) - 多 Agent 矩阵(Phase 7 多窗口并行基础)
王凯 6 平台海外运营 SOP - 6 平台 SOP(视频投放渠道)
王凯 AI Coding 实操：从 Cursor 到 Claude Code 终端工作流 - AI Coding 主 wiki
王凯 1000+ AI 产品 idea 库与商业模型分析 - 产品 idea(SillyTavern 类型产品定位)