Wang Kai SillyTavern Video Production SOP (Skill Implementation Example)

The complete video production SOP customized by Wang Kai's team for SillyTavern Online (sillytavern.us). The methodology is based on Wang Kai's practice of Claude Code + Remotion + imitating reference videos + codifying precise elements.

The value of this wiki is not SillyTavern itself, but that it demonstrates a complete Skill implementation engineering example — which can be ported to video mass production for any product.

1. Global Core Principles (must memorize)

#	Principle	Explanation
1	Do not use text-to-video	Every video must be based on a reference video; creating from thin air is prohibited
2	Precise elements must be codified	Brand colors, Logo, chat bubble timing, font sizes, transition curves must all be made into React/Remotion components; text is only used to combine and call them
3	Real UI takes priority over AI-generated UI	Screenshots must be captured from the real website; AI drawing fake interfaces is prohibited
4	Skill rules must be marked with "applicable scenarios"	Do not write "use dark light silhouettes"; write "dark light silhouettes are only used in character spotlight videos"
5	Compliance rules are hardcoded into the code	`data/compliance.ts`, do not let AI generate freely
6	Write every modification into feedback.md	Mark "under what scenario this rule was added / what problem it solved"
7	When hitting a quality bottleneck, first re-read the SOP and feedback	Do not spin in circles

2. Overview of the 7 Phases

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/>规模化 + 持续学习]

Each Phase has an acceptance checklist; do not proceed to the next stage if you do not pass.

3. Prerequisites

Confirm before execution:

✅ Claude Code $200 subscription
✅ Remotion AI Skill installed
✅ Chrome DevTools MCP installed and able to control the browser
✅ Jimeng CLI installed
✅ Node.js 20+ and Chrome ready

4. Phase 1: Create Working Directory

Directory skeleton

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/                         ← 渲染产物

Acceptance

Directory exists
remotion/ in npm run dev can launch Studio
SKILL.md file exists (empty for now)
git initialized

5. Phase 2: Study Reference Videos

Reference video selection (3 types)

Type	Purpose	Source suggestions
60-second product explainer	Main YouTube video	Dropbox classic explainers, Notion official, Linear introductions
30-second character spotlight	TikTok / Shorts / Reels	Character.AI official TikTok, Janitor AI, Replika
45-second comparison review	YouTube + X clips	Yingshi Jufeng comparisons, Fireship fast cuts

Analysis tasks (for each video)

Open with Chrome MCP,capture one keyframe every 3 seconds
Extract 8 dimensions:
- Total duration + segment storyboard (how many seconds for opening / main body / CTA)
- Shot rhythm (average duration, longest and shortest)
- Text density (words per screen, relative font size to frame ratio)
- Transition type list (counts for cut / fade / slide / zoom)
- Color scheme (primary color, accent color, background color)
- Music beat (whether beat-sync is used, BPM)
- First 3 seconds hook pattern
- Ending CTA presentation method
references/README.md write "cross-video commonalities" summary

Acceptance

references/ 6 analysis md files + keyframe screenshots under
README includes cross-video commonalities summary
You personally spend 10 minutes reading through it, confirm the conclusions match intuition
"Places that don't match intuition are more valuable than what AI runs on its own" — Wang Kai's "humans set the strategic height"

6. Phase 3: Scrape Real Product Assets

Scraping tasks (using Chrome MCP)

6.1 Visual system → `assets/brand/`

Logo (SVG preferred, PNG transparent background if not found)
Favicon
Full-page hero screenshot

Use DevTools to read CSS variables / computed style → BrandColors.ts

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

BrandTypography.ts(main font stack headline + body)

6.2 Product screenshots → `assets/product-screenshots/`

Character list page (full-screen grid + close-ups)
Character card hover / detail state
Chat interface (use public characters, do not trigger NSFW)
Settings panel
Each image must be 1080p or above, compression is prohibited

6.3 Character card materials → `assets/character-cards/`

Homepage recommendation slots + top 20 characters on the list: avatar, name, tagline, tag list
Structured JSON:index.json
Save each character avatar as a separate image

6.4 Product facts → `data/product-facts.ts`

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

Mark every entry with its source URL; fabrication is prohibited; write unknown if unsure

6.5 Compliance bottom line → `data/compliance.ts`

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

Acceptance

3 assets/ directories contain real materials
4 ts files pass TypeScript compilation
You personally open and look at each one, confirm color values, fonts, product facts are not fabricated — "one fabricated point ruins a whole batch of subsequent videos"

7. Phase 4: Write the Video Skill

7.1 SKILL.md structure

---
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 Required components under components/

Component	Purpose	props
`<Logo />`	Brand logo	Use BRAND colors
`<BrandIntro />`	1.5s opening animation	—
`<ChatBubble />`	Typewriter effect chat bubble	speaker, text, delay, side
`<CharacterCard />`	Fetch characters from character-cards/index.json	slug
`<LowerThird />`	Third subtitle line	text, position
`<FactBadge />`	Numeric fact badge	label, value (fetched from FACTS)
`<CTAEnd />`	Unified closing (domain name + QR code)	—

Each component has complete props, defaults, and TypeScript types,components/README.md list "when to use / when not to use".

7.3 Three compositions under compositions/

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

7.4 Key technique: "precision" must be codified

"Text has relatively high ambiguity… code, mathematics, etc. have minimal information decay, and are very suitable for being turned into a skill to ensure a unique effect in scenarios where precision is desired." — Wang Kai

Counterexample(rules written in text): "The chat bubble should slide in from bottom to top, last 0.3 seconds, with a bounce effect" — AI interprets this differently every time

Positive example(rules written in code):

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

Acceptance

npx remotion preview Open Studio, three compositions are listed and previewable
Run a preview with three different sets of inputProps each, components do not throw errors
Intentionally pass overly long text into ChatBubble, it should throw an error(density guardrail takes effect)
Intentionally stuff forbiddenWords into dialogue, rendering should be blocked by compliance
Every rule in SKILL.md is marked with "when to use / when not to use"

8. Phase 5: Produce the First Video

Goal: validate the pipeline,not to produce a viral hit

Process

From character-cards/index.json pick a non-NSFW character with many tags and a dramatically tense tagline Role
Call the sillytavern-video skill's CharacterSpotlight template
Pre-render rehearsal:
- Capture 3 keyframes in Studio (0s / 15s / 28s)
- compliance.ts run validation once
Render to output/spotlight-<slug>-v1.mp4

Human feedback loop (mandatory)

Open the mp4 and watch it through, give feedback per the checklist,have Claude Code modify the skill or component code, do not modify individual videos:

Is the pacing too fast or too slow? Which shot should be cut?
Which screen has text that is too dense?
Is the brand color on screen long enough?
Is the CTA clear?
Which frame takes you out of the experience?

For each round of revisions, Claude Code synchronously updates feedback.md, recording "what changed from v1→v2 and why".

Acceptance

There is an mp4 under output/ that you are willing to publish
The skill has undergone ≥ 3 rounds of iteration, feedback.md has ≥ 3 version entries
Re-render with a different character, publishable quality is produced without any extra instructions

9. Phase 6: Three Video Types + Jimeng Mixed Cuts

Roll out three video types

ProductExplainer template: 60-second main video, theme "Why SillyTavern Online does not need an API key"
Comparison template: 45-second comparison video, vsTarget = 'self-hosted'. Difference points strictly come from product-facts.ts

Jimeng CLI integration

generateAtmosphericShot(prompt, duration) helper:

Generate 3–5 second mood shots(not product shots) via Jimeng CLI
Only allowed in: opening abstract imagery, transitional emotional buildup
Strictly prohibited: Jimeng shots must not be used for product UI, chat interface, or character images themselves

Acceptance

Produce 1 publishable version for each of the three video types
Jimeng shots only appear in allowed scenarios
The three compositions share the same set of components/, zero component duplication

10. Phase 7: Scaling and Continuous Learning

10.1 Multi-window parallelism

Run 3 Claude Code windows in the terminal, each focusing on spotlight / explainer / comparison. Each window controls an independent Chrome profile (refer to Wang Kai Multi-Agent Browser Matrix Architecture (v1.1 Practical Guide)).

10.2 Weekly skill review

Every fixed Sunday, read through playback data on all platforms, pick the worst-performing and best-performing video each → have Claude Code analyze differences in skill invocation → update skill rules.

10.3 feedback.md is the single source of truth

All rule iterations must be written into feedback.md before modifying code. In case of conflict, the latest entry prevails.

10.4 Do a "reference video update" once a month

Re-run Phase 2, because the viral grammar of short video platforms changes every month.

11. Bootstrap Prompt (use when switching conversation windows)

我们在做 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. Troubleshooting

Symptom	Most likely cause	Fix
Rendered subtitles are cropped	Composition dimensions do not match the template	Check the Composition width/height and inputProps
Incorrect brand color	String written directly without referencing BrandColors	grep the whole project for `#` trailing 6-digit hex, replace with BRAND.xxx
Character card renders blank	Missing fields in character-cards/index.json	Re-run Phase 3 step 3
Compliance validation fails	Dialogue contains forbiddenWords	Do not bypass validation, revise the dialogue
Jimeng shots appear in product UI positions	Composition called in the wrong position	Change back to real screenshots under components/

13. Prohibited Items Checklist

If violated, humans must immediately stop and roll back:

❌ Fabricating product facts (numbers, prices, features)
❌ Using AI-generated UI instead of real screenshots
❌ NSFW implications in TikTok / Shorts videos
❌ Fictional user testimonials in videos ("User A said…")
❌ Rendering a single video directly without going through the skill (experience cannot be accumulated)
❌ Modifying a single video without updating feedback.md
❌ Skipping SOP stages (running Phase 5 before completing Phase 2)

14. Why This SOP Can Be Ported to Any Product

Abstraction layer(portable):

Order of the 7 Phases
8 dimensions of reference video analysis
5 categories of real asset scraping
Skill / Components / Compositions layering
Boundary between precise codification and broad textualization
feedback.md reinforcement learning loop

Specialization layer(modified per product):

Video duration / platform specifications
Brand colors / fonts
Product facts
Compliance rules
Three video type templates

Anyone who wants to do mass product video production can modify the specialization layer based on this SOP.

15. Wang Kai Says

"AI Coding is not only for writing code; it can be used to make videos, make PPTs, build information reminder bots, and run investment strategies."

"Strategic height determines the height of AI output."

"Writing knowledge as code and stuffing it into a skill minimizes information decay."

"feedback.md is the agent's growth record."

References

Wang Kai Claude Code Terminal Workflow Methodology (Full Version) - Claude Code Workflow (Foundation of the Skill System)
Wang Kai Multi-Agent Browser Matrix Architecture (v1.1 Practical Guide) - Multi-Agent Matrix (Foundation for Phase 7 Multi-Window Parallelism)
Wang Kai 6-Platform Overseas Operations SOP - 6-Platform SOP (Video Distribution Channels)
Wang Kai AI Coding Practice: From Cursor to Claude Code Terminal Workflow - AI Coding Main Wiki
Wang Kai 1000+ AI Product Idea Library and Business Model Analysis - Product Ideas (Positioning of SillyTavern-Type Products)

1. Global Core Principles (must memorize)

2. Overview of the 7 Phases

3. Prerequisites

4. Phase 1: Create Working Directory

Directory skeleton

Acceptance

5. Phase 2: Study Reference Videos

Reference video selection (3 types)

Analysis tasks (for each video)

Acceptance

6. Phase 3: Scrape Real Product Assets

Scraping tasks (using Chrome MCP)

6.1 Visual system → assets/brand/

6.2 Product screenshots → assets/product-screenshots/

6.3 Character card materials → assets/character-cards/

6.4 Product facts → data/product-facts.ts

6.5 Compliance bottom line → data/compliance.ts

Acceptance

7. Phase 4: Write the Video Skill

7.1 SKILL.md structure

7.2 Required components under components/

7.3 Three compositions under compositions/

7.4 Key technique: "precision" must be codified

Acceptance

8. Phase 5: Produce the First Video

Goal: validate the pipeline,not to produce a viral hit

Process

Human feedback loop (mandatory)

Acceptance

9. Phase 6: Three Video Types + Jimeng Mixed Cuts

Roll out three video types

Jimeng CLI integration

Acceptance

10. Phase 7: Scaling and Continuous Learning

10.1 Multi-window parallelism

10.2 Weekly skill review

10.3 feedback.md is the single source of truth

10.4 Do a "reference video update" once a month

11. Bootstrap Prompt (use when switching conversation windows)

12. Troubleshooting

13. Prohibited Items Checklist

14. Why This SOP Can Be Ported to Any Product

15. Wang Kai Says

References

6.1 Visual system → `assets/brand/`

6.2 Product screenshots → `assets/product-screenshots/`

6.3 Character card materials → `assets/character-cards/`

6.4 Product facts → `data/product-facts.ts`

6.5 Compliance bottom line → `data/compliance.ts`