Code Video

Code Video 是做什么的？

<skill> 是包含此 SKILL.md 的文件夹。引擎位于 <skill>/template/：

• kit.js：手绘线条、文本和动态文字、摄像机、转场、像素精灵、迷你角色、图像像素化、视频片段、手机和光标道具、运动模糊、useFonts
• 风格模块用于受认可的视觉风格和格式：handdrawn.js、motion.js、sand.js、lyric.js、beat.js（每个模块绘制该原始作品的标志性元素）
• 视觉模块 arcade.js、terminal.js、thermal.js、transit.js、blueprint.js：一个共享的场景 API 加上每个视觉的标志性格式场景（references/looks.md）
• minis-ai.js：为 AI 相关主题（Claude、Codex、Gemini、DeepSeek、Grok、Qwen）预制的迷你角色
• render.mjs：使用无头 Chrome 并行渲染；当存在 audio.wav 时进行混流
• main.js：场景骨架

<skill>/scripts/audio.py 合成音乐和音效，<skill>/scripts/beats.py 查找歌曲的节拍网格，<skill>/scripts/reference_sheet.py 将原始作品的帧放在你的帧之上进行比较。

所需工具：node/npm、ffmpeg（需编译 libx264）、Google Chrome 和 uv。如果缺少任何工具，请停止并指出缺少哪一个。

for c in node npm ffmpeg uv; do command -v $c >/dev/null || echo "missing: $c"; done; ffmpeg -hide_banner -encoders | grep -q libx264 || echo "missing: libx264"

0. 询问视觉风格和格式，然后是设置

视觉风格仅指绘画风格；格式是故事的结构。任何视觉风格都可以搭配任何格式，除非歌词和节拍格式自带视觉风格，除非用户要求使用其他风格。首先在一个简短的消息中同时询问两者，使用两个编号列表（比一个问题能容纳更多选项）。跳过用户已经提到的内容，并根据主题建议一种格式（比较建议对阵，阵容建议路线图，等等）。

视觉风格：

视觉风格	感觉	默认音效	指南	致谢
1. 手绘 + 8位迷你角色（默认）	俏皮，像草图	无	styles/handdrawn.md	@nahiddotai
2. 品牌动态图形	干净，官方	无	styles/motion.md	@digitalstrategyai
3. 沙画	温暖，像故事	音乐和效果	styles/sand.md	@Michaelzsguo
4. 16位街机	游戏，充满活力	芯片音乐风格的音乐和打击声	looks.md	原创
5. CRT 终端	开发者，复古	按键音，柔和垫音	looks.md	原创
6. 热敏收据	打印，有触感	打印机滴答声，盖章声	looks.md	原创
7. 交通图	图表，有序	钟声，火车声	looks.md	原创
8. 蓝图	技术，精确	绘图声	looks.md	原创

格式（详情见 references/formats.md）：

格式	结构	致谢
1. 标准宣传（默认）	钩子 → 标题 → 步骤 → 大数字 → 结尾	原创
2. 对阵	两个选项之间的几轮，然后计分	原创
3. 会话	显示如何使用它的命令和输出	原创
4. 收据	列表项目，总计，印章	原创
5. 路线图	线路，站点，换乘站	原创
6. 规格表	部件，每个部件一个规格	原创
7. 歌词音乐视频（自带视觉风格）	一首原创歌曲，每行一个事实和一个图表	@goodside
8. 节拍同步视频（自带视觉风格）	按歌曲节拍剪辑的真实片段：墙壁，旋转木马，手机	@twoclipping

当你列出视觉风格和格式时，请为每个受致谢的原创作品注明其来源链接。

然后在一个 AskUserQuestion 调用中询问设置。跳过用户已经说过的内容，并将推荐选项放在首位。

• 时长：30 秒 / 15 秒 / 45 秒 / 60 秒
• 帧画面：16:9 1920×1080 / 9:16 1080×1920 / 1:1 1080×1080 / 16:9 2560×1440
• 角色：Logo 吉祥物 + 主题迷你角色 / 用户指定的迷你角色 / 仅 Logo 吉祥物 / 无
• 屏幕语言：本次对话的语言 / 英语 / 两者

角色采用视觉风格的形式：8位精灵、沙画剪影、像素英雄或扁平图标。迷你角色是符合主题的配角。如果用户指定了角色阵容，则使用之。否则从研究中挑选一组角色，并在计划中提出（参见 references/storyboard.md 中的“迷你角色”）。

对于未询问的内容，使用以下默认值，并在计划中说明：

• 30 fps（节拍格式使用运动模糊时为 60 fps），H.264 MP4，每 30 秒不超过 10 MB（有声音时略多一点）
• 声音如视觉风格列表所示；歌词和节拍格式始终有音乐。没有歌唱人声。

每个视觉风格和格式的规则

• 受致谢的视觉风格要复现原作。 在规划之前，使用 Read 工具打开指南并查看其参考帧 <skill>/docs/styles/<key>.jpg。指南的 Signature 表格中的每个项目都必须出现在屏幕上；该表格是强制性要求，而非选项。额外内容可以在标志性元素之后添加，但不能取代它们。
• 语言：屏幕上的所有文本都遵循屏幕语言设置，包括标签、HUD、歌词、收据、终端输出和结尾卡。
• 研究主题：调色板来自品牌的真实颜色（CI 页面、网站 CSS 或 Logo 像素），字体尽量使用品牌字体。在计划中以十六进制值显示调色板及其来源。具有固定材料或背景的视觉风格（沙画、暗色运动场、终端绿色、热敏纸、蓝图蓝色）应保持该背景，并在 Logo、一个强调色和结尾卡中体现品牌。
• 数字：每个数字都有来源。从成立日期计算年限和“N 年”，而不是从网站上复制旧的“N 年”表述。不要虚构 UI 读数或示例统计数据；使用真实值或省略。
• 致谢：受致谢的视觉风格和格式应注明其改编创作者的姓名。当你修改指南时，保留这些致谢。
• 等待你自己的成果。 在前台使用较长的 Bash 超时（最多 600000 毫秒）运行渲染。当你在后台启动代理或命令时，在结束你的回合之前等待它们的结果：在非交互式运行中，没有任何东西会再次唤醒你。

1. 研究

遵循 references/research.md。

• 保持比例：对于一分钟以内的视频，大约 10 个有来源的事实和品牌资产就足够了。给一个只读代理一个狭窄的简报（问题、网站、大约 15 次获取的上限），并独立并行运行搜索。
• 自己对照原始句子检查标题数字。
• 如果来源对一个数字有分歧，请询问用户使用哪一个。

2. 计划审批

在创建工作文件夹之前，展示以下内容并获得批准：

• 研究摘要及来源链接
• 视觉风格和格式，以及使用其指南中的模式和时间安排制作的场景时间线
• 对于受致谢的视觉风格或格式：其 Signature 表格及显示每个项目的场景
• 调色板（十六进制值及其来源）和字体
• 当视觉风格或格式有声音时的声音计划：节奏、部分和提示点
• 使用的数字和舍弃的数字，资产列表（Logo URL、字体、角色、片段、歌曲许可），工作文件夹位置

如果用户更改了场景或重点，请重新陈述一次修改后的流程，然后继续。

3. 构建

cp -R <skill>/template <work-folder>/<name>-video && cd <work-folder>/<name>-video
chmod -R u+w .   # 安装的技能可能是只读的，cp 会保持其模式
npm i
bash <skill>/scripts/fetch_fonts.sh assets/fonts
curl -fsSL -o assets/logo_src.png '<official logo URL>'
uv run --with pillow python <skill>/scripts/clean_logo.py assets/logo_src.png assets/logo.png

• index.html：在 window.VIDEO 中设置尺寸、fps 和时长；使用 @font-face 声明指南中提到的字体（且仅限这些字体）；为受致谢的视觉风格或格式加载其风格模块（handdrawn.js、motion.js、sand.js、lyric.js、beat.js），或为视觉风格 4–8 加载一个视觉模块（其字体通过 useFonts(LOOK.fonts) 加载）。
• 使用视觉模块时，从场景 API 和格式的标志性场景构建场景（references/looks.md）；在 LOOK.colors 上设置品牌颜色。
• main.js：THEME、场景函数和 boot()。API 在 references/kit-api.md 中。
• 使用真实的 Logo 和文字商标文件。
• 使用 drawPixels 精灵绘制 Logo 吉祥物（或在沙画视觉风格中使用剪影）。
• 在 MINIS 中注册迷你角色，并使用 drawMini 绘制它们。对于 AI 相关主题，加载 minis-ai.js 并仅绘制缺失的角色。
• 尽早向用户展示一张角色阵容的静帧，并让其确认。
• 将文案和数字作为常量保存在 main.js 顶部。对于两个版本（如待定数字、两种语言），通过一个 URL 参数分支，并用 QUERY=lang=ko node render.mjs video … 分别渲染每个版本。
• 声音：编写 audio.json，其场景时间与 main.js 相同，然后运行 uv run --with numpy --with scipy python <skill>/scripts/audio.py audio.json audio.wav。对于节拍格式，首先在歌曲上运行 beats.py，然后在其网格上进行剪辑。

4. 质量检查

遵循 references/qa-checklist.md。

1. 使用 node render.mjs stills <mid-scene times and times just before and after each transition> 渲染静帧。
2. 使用 uv run --with pillow python <skill>/scripts/contact_sheet.py stills <temp-folder> 构建审查表并查看。
3. 修复发现的问题。
4. 使用 CRF=25 node render.mjs video <Name>.mp4 渲染一次视频，提取转场帧以及每 2 秒的一帧，并检查文件大小。如果有声音，检查音频流、响度和提示点时间。
5. 对于受致谢的视觉风格或格式，运行 uv run --with pillow python <skill>/scripts/reference_sheet.py <key> <Name>.mp4 <temp-folder>/ref.jpg，查看它，并勾选每个标志性项目。修复任何遗漏并重新渲染。

5. 交付

• QA 渲染即交付文件。仅在进行修复后重新渲染；如果超过大小目标，将 CRF 提高到 27 或降低 boot({ noise })。
• 删除中间文件，如 stills/ 和日志。
• 使用 SendUserFile（显示为 render）发送 MP4 文件，并报告：
  • 规格：视觉风格、格式、时长、分辨率、fps、文件大小、声音
  • 受致谢的视觉风格或格式的原始来源及其链接，以及标志性检查清单结果
  • 场景列表
  • 使用的事实及其来源链接
  • 舍弃的数字及其原因，以及需要确认的项目
  • 重新渲染命令，并注明必须在工作文件夹内运行