Cs Code Video

<!-- CS Skills · 陈硕 | portable skill entry | https://github.com/ChenShuo2004/cs-skills -->

CS 代码视频

模型不直接生成视频。它写一个网页，网页暴露 window.render(t) 画出第 t 秒，脚本逐帧截图，再用 FFmpeg 合成 mp4。配乐和音效用 numpy 合成，配音用 edge-tts。

一句话提示词做视频是抽卡，效果不可控，也复现不了。本 skill 的做法：先把规划摆到用户面前，确认了再动手。5 项输入 → 导演层 → 三张风格卡 → 分镜表（等确认） → 3 张关键帧（等确认） → brief.md → 逐镜头制作 → 自评 ≥8 分 → 交付。

用户明确要 Vibe 知识大赏或来源可核查的代码科普片时，按 references/vibe-knowledge.md 的六步模式执行。它在研究、真实素材、输入默认值、KAI 角色和 10 秒样片上的规则优先于下文通用模式；渲染和 QA 仍用本 skill 的工具。

管线固定，画面不固定。 渲染、配音、混音、QA 每次一样；画面语言每次从选题里长出来，再套上陈硕的签名层。不要先拿模板再塞内容。

交付边界

• 默认值（只在用户明确说「你定」或无人值守时才用，并写进风格卡让用户改）：单个 HTML 工程 + 一支 mp4，1920×1080、30fps、30 秒、代码合成配乐、不配音。
• 通用模式的画面由代码生成，或由 GPT 按资产清单出图后代码做动画（见 hybrid.md）；不从网上下载图片或视频素材。Vibe 知识模式可使用来源和许可可追溯的真实证据图，按对应参考文件记录。
• GPT 出图要花钱：真正出图前先 gen_image.py --dry-run 把张数和模型给用户看，确认后再出。
• 通用模式的事实来自用户给的原材料，不确定的不写；Vibe 知识模式必须主动联网核对，建立逐条来源表。
• 参考视频只学结构、节奏和手法，不照搬别人的素材、外观和文案；学到的手法记进 signature.md 的吸收清单。
• 不上传、不发布。
• 路由：真实网页演示片 → $cs-web-promo-film；电商对标复刻、Seedance/Flow 生成包 → $cs-auto-videl；剪辑已有素材、ChatCut 策划 → $cs-chatcut。教程类视频默认做成 KAI 教程片（见 tutorial.md）。像素解说（cs-pixel-explainer）和暗夜知识片（cs-knowledge-film）是系列皮肤，只在用户确认是该系列续集时使用，见 director.md ⑥。

导演铁律（每支片都适用，写进 brief 的 <direction>）

1. 整片一套风格、一套配色；同一个角色或元素在每个镜头里长得一样。
2. 每个镜头只讲一件事；画面上的字少而大，每段文字至少停 2.5 秒。
3. 动画用缓动或弹簧，不用匀速。
4. 转场从画面内容里长出来（一条线变成下一个场景的地平线、一个点放大成下一场的月亮），不用默认淡入淡出。
5. 镜头跟着内容动：推近、拉远、跟随，主体在画面里足够大（至少三分之一）。
6. 禁止：居中大字 + 渐变背景的默认风格、所有元素同时淡入、满屏小字、任何看起来像模板的东西；每支片再按情况补充。

先读什么

按阶段读最少的资料：

• 想画面、配风格、出风格卡：references/director.md，开工前同时看 style-log.md
• Vibe 知识大赏、来源可核查的代码科普片：references/vibe-knowledge.md
• 陈硕的个人风格（不变层）：references/signature.md
• 选代码路线、绿幕人物：references/code-stack.md
• 教程类视频 → KAI 教程片：references/tutorial.md（系列皮肤，结构和画风已锁定，跳过风格卡）
• GPT 出图 × 代码动画（镜头类型、分工、角色一致性、提示词）：references/hybrid.md
• 写 brief：references/brief-template.md
• 制作规则（render(t)、弹簧、字体、WebGL、像素纯度、声音、渲染速度）：references/craft-rules.md
• 自评和验收：references/qa.md

把 scripts/ 和 assets/ 拷到工程目录。assets/template.html 只提供骨架（render(t)、弹簧、时间表、字幕函数），顶部的 STYLE 和全部镜头都按风格卡重写，不要沿用模板自带的配色和示例镜头。

工具

node scripts/render.mjs index.html out/final.mp4 --size 1920x1080 --fps 30 [--duration 30] [--start 0] [--audio audio/mix.wav] [--subframes 4] [--workers 2] [--draft]
node scripts/render.mjs index.html qa/s1.png --still 2.0                 # 单帧
python3 scripts/audio.py sfx cues.json audio/sfx.wav                    # [{"t":1.2,"type":"click|pop|whoosh|thud|ding|riser|glitch|type","gain":1}]
python3 scripts/audio.py music audio/music.wav --bpm 120 --bars 16
python3 scripts/audio.py beats music.mp3 > source/beats.json            # bpm / beats / downbeats / hits
python3 scripts/audio.py vo spec.json                                   # 逐句配音 → audio/vo.wav + timeline.js
python3 scripts/audio.py mix audio/mix0.wav audio/vo.wav audio/music.wav:0.25 audio/sfx.wav:0.8 --len 30   # --len = 成片时长
python3 scripts/audio.py normalize audio/mix0.wav audio/mix.wav         # -14 LUFS ±0.5，真峰值 ≤ -1 dBTP
python3 scripts/qa.py out/final.mp4 qa                                  # 抽帧、手机抽帧、切镜连续帧、波形、打分表
python3 scripts/gen_image.py assets.json --dry-run | --draft | --final | --pick id=2 | --export-md   # GPT 出图（在有 OPENAI_API_KEY 的电脑上跑）

• assets/template.html：render(t) 骨架，自带缓动、闭式弹簧 spring/springTo、带种子随机、版式缩放 S、STYLE 风格变量、可关闭的打字机字幕；有 timeline.js 时按配音时长自动排镜头。
• assets/layers.js：把 GPT 图变成动画：illustration（运镜）、parallax（分层视差）、grid / card / promptBox / bigStep（讲解界面）、avatar（头像对口型）、subtitle（box / plain 两种字幕）。用法见 hybrid.md 第三节。
• assets/kai-boy-3d.js：主角 KAI 男孩 3D 版，KaiBoy3D(w,h).render({t, yaw, mode, pose, expr, bg})。每支片的主角，和 KAI 猫同框时都用透明底叠加。
• assets/kai-cat-3d.js：宠物 KAI 猫 3D 版（WebGL2 光线步进，零依赖），KaiCat3D(w,h).render({t, yaw, mode, pose, expr, bg})，白模 / 上色两种模式，透明底可叠进任何画面。
• assets/kai-cat.js：KAI 猫代码版角色组件，drawKaiCat(g, {x, y, size, t, pose, expr, style})，4 种姿势、5 种表情、4 种画风。每支片都要出场，规则见 signature.md 第五节。
• assets/crt.js：WebGL2 老电视后期层，template.html 里 USE_CRT = true 即开。只在风格卡选了复古质感时用。
• assets/voice/：tts.py + 配音.bat（Windows 双击即可），读同目录 spec.json 逐句生成 audio/line_XXX.mp3。
• 像素风参考实现：assets/reference-wizard.html（调色板索引缓冲、整数倍放大、10 张/秒姿势量化、固定步长重放的 render(t)），像素复古风格从它起步。

依赖：node + playwright、ffmpeg、python3 + numpy、中文字体（Noto Sans CJK 等）；出图另需 pip install openai pillow 和 OPENAI_API_KEY。

工作方式

1. 通用模式先明确 5 项输入（Vibe 知识模式按专用参考文件）

接受三种原材料，可以混着给：想法、原内容（文章、口播稿、产品网址、代码库）、参考视频。先用一条消息问清下面 5 项，用户没给的不要自己编；原材料里已经能确定的项直接写出来请用户确认，不重复问：

1. 主题，以及看完以后希望观众记住的一句话；顺带问：这是某个系列的续集（沿用风格），还是独立单片？
2. 时长和画幅：__ 秒，1920×1080 / 1080×1920 / 1080×1080，30 / 60 帧
3. 风格：像素 / 扁平插画 / 界面动效 / 彩铅手绘 / 复古电视 / 3D / 让我按选题提方案；有参考视频或截图就发来
4. 配色和字体：主色 #……，字体 ……（也可以「按风格卡定」）
5. 声音：用户提供的音乐文件 / 代码合成配乐；要不要配音

• 主题和那一句话必须由用户给，模型只能帮忙改写，不能代填。
• 用户回答「你定」的项，才在风格卡里给默认值并标注「待确认」。
• 无人值守时：主题来自原材料，其余用交付边界里的默认值，并在报告最前面列出所有假设。
• 给了音乐就先 audio.py beats 测节拍；给了参考视频：抽帧拼图 ffmpeg -i ref.mp4 -vf "fps=1,scale=320:-1,tile=6x5" -frames:v 1 source/ref-sheet.png，或直接 qa.py ref.mp4 source/ref 拿抽帧和切镜点。写下它的手法（镜头结构、节奏、转场、隐喻方式），不是外观。值得长期用的手法补进 signature.md 吸收清单。