用代码而非视频生成模型来制作产品宣传片，正在成为一个被低估的高效方案。本文介绍的 guizang-product-video-skill 通过读取代码库的组件、配色和 Logo，自动组织卖点、撰写文案并渲染动画，输出一支与产品视觉风格完全一致的宣传视频。

核心特点

这套方案的独特之处在于两点：一是纯前端代码渲染，不依赖视频生成模型。视频画面由 React 组件加时间轴渲染，配乐用 Python 代码合成，音效使用预制 WAV 文件。不需要调用图片或视频生成的 API，也不需要额外准备素材，成本很低，性能较弱的模型也能运行。

二是与代码库深度绑定。每次执行时，它会读取你的代码仓库，自动找到组件、样式、字体、Logo 和配色方案，用这些真实素材构建画面。介绍产品更新只需一句话，无需准备文案和截图，就能输出一支与产品审美一致的视频。

案例一：CodePilot 项目

CodePilot 是最先打磨的案例。Skill 读取代码库后，将最近几周的更新梳理为几组卖点，先出大字标题卡，再接真实组件的特写动画。例如讲模型切换功能，它会直接把 CodePilot 的模型选择器组件拿出来，展示三种运行方式的切换，下方列出 GLM 5.3 Flash 等实际可选项。

讲工作区功能时，它会将文件树、Git 分支图、浏览器预览等面板并排展示。所有组件都来自代码库本身，不是重新绘制的占位图。

音乐方面，配乐完全由纯 Python 代码编写。正弦波叠加构造不同音色，按和弦进行和节拍模式编排成完整曲子。每个音符的音高、时值、力度和声像位置都精确可控。

音效系统内置了 11 种音效：点击、弹出、切换、输入、通知叮咚、完成确认、转场等。每个音效绑定到对应动作节点，响起时配乐会自动做 ducking（降低音量让位），过了之后平滑恢复。

案例二：CraftAgent 开源框架

CraftAgent 是 Craft 笔记团队的新项目，一个开源 AI Agent 框架。Skill 读取其代码库后，自动使用了 Craft 的品牌色（紫色）、Logo 风格和浅薄荷绿背景，介绍了定时刷新、Pages、只读分享等近期更新。

例如讲"定时刷新"功能时，展示了一张带有实时数据图表的卡片组件，旁边放紫色"0"，文案是"工作区脚本按计划更新页面数据"。

结尾的 "Built for your next idea." 收束画面，下方三个功能标签（Pages BETA、定时刷新、只读分享），完全是 Craft 自己的排版风格。Logo、界面组件、卡片样式都无需手动准备，直接从代码库中找到对应组件和样式文件接入视频工程。

案例三：T3 Code 多 Agent 客户端

T3 Code 是近期热门的多 Agent 客户端。Skill 为其制作的宣传片采用深色背景、白色文字、顶部品牌标和版本号标识，介绍了多模型选择、独立 worktree 任务、主题切换等功能更新。

字体、图标、主题色渐变全部取自代码库里的组件。版本号 "v0.0.42 + 最新 Nightly" 和底部 "状态演示 · 不代表执行耗时" 的注释，说明它在理解产品的语境和受众，而不是套用模板。

使用方法

安装命令：

npx skills add https://github.com/op7418/guizang-product-video-skill --skill guizang-product-video-skill

首次运行会自动检查环境：Node.js、Python、FFmpeg、Playwright，缺少什么自动安装。

打开你的产品代码库，对 AI 说：

用 guizang-product-video-skill，把这个项目最近三周的主要更新做成一支宣传片。先看看代码库自己的组件和设计风格。

它会先询问沿用代码库的设计风格还是使用默认的暖白/炭黑风格，选完后开始工作。最终拿到的不只是一个 MP4，而是一整个可以继续修改的视频工程，文案、布局、时长、动画、声音都能调整，改完重新导出即可，非常节省 Token。

技术细节

音乐由代码编写

配乐不是从素材库寻找，也没有调用音乐生成 API。使用纯 Python 波形合成：正弦波叠加构造不同音色，按和弦进行和节拍模式编排。每个音符的音高、时值、力度和声像位置都在代码中明确定义。

因为音乐是为当前视频从零编写的，可以精确控制第几秒开始渐强、结尾最后两小节如何收束、哪个重拍对齐画面切换。

音效避让机制

通知的"叮咚"声响起时，配乐会在 40 毫秒内降低音量（根据音效类型降 3-6 dB），保持一段时间后再平滑恢复。这是混音中的 sidechain ducking，提前知道每个音效的时间点，预先在音乐的音量曲线上"挖坑"。关键动作的音效永远听得清，但音乐也没有被打断。

组件真实接入

不是将界面截图贴上去，而是去代码库中 import React 组件（或 Vue/Svelte），加载 CSS 和主题文件，然后在 Playwright 浏览器中渲染。画面中的选择器、文件树、卡片，间距、圆角、阴影、hover 状态，与产品实际效果完全一致。组件的状态切换、展开、选中、加载完成等动画，都是通过原组件的 props 和状态驱动的。

自动检查

渲染完成后自动检查：画面是否裁切、字体是否正确加载、音画是否同步、时间线是否有空隙或重叠、音效是否削波。发现问题会尝试自动修复，修完重新导出再检查。

内容生成的未来思考

视频生成模型越来越强，文生视频质量肉眼可见地提升。但在上下文信息充足的垂直场景下，直接用代码渲染出的内容已经能达到培训班优秀学员、几个月熟练工的交付标准。

代码路线还有一个生成模型难以替代的地方：确定性和可编辑性。生成视频不满意只能重新生成碰运气；而代码渲染的视频，可以精确指定"把第三段的标题改掉""音乐结尾再延长两秒"，它就精确修改那个地方，其他部分不动。

让 AI 在 Blender 中建模、用 Computer Use 调度剪映或 Premiere 剪辑，这些"AI 操作专业工具"的路线也在快速成熟。整个内容生产正在面临分水岭。

Github：https://github.com/op7418/guizang-product-video-skill