煜见AI未来
做产品的人都有一个共同的痛点：产品更新了一个很棒的功能，但没有一支像样的视频能把它讲清楚。
如果你想在宣传片里展示产品真实的界面、配色和功能变化，可以看看直接复用代码组件这条路径。
最近有一个让我觉得思路值得关注的方向：直接把产品代码库交给AI编程工具，让它用你的真实组件、真实配色、真实设计语言，把版本更新做成一支宣传片。
这个方向的代表项目叫 guizang-product-video-skill，由归藏（@op7418）开源在GitHub上，支持Claude Code和Codex。9月24日他用这个流程给自己的产品 CodePilot 做了一支演示，截至9月28日晚在 X 上有492赞52转。9月28日他更新了一版，提到成本更低的模型也能尝试使用这个工具。
在展开具体做法之前，先把一件事说清楚：这不是"文生视频"那种AI生成。
代码渲染，不是AI想象
你可能听过"文生视频"——给一段文字描述，AI 生成画面。那条路径通常不会复用你产品的真实组件和样式。
guizang-product-video-skill走的是另一条路：它让AI读你的代码库，把你产品里真实存在的React组件、真实的样式文件、真实的交互状态直接接入视频工程，用GSAP做动画时间轴、Three.js做背景效果层、Playwright逐帧渲染，最后FFmpeg编码导出。
换句话说，视频里出现的界面就是你的产品界面，不是AI画出来的一张"看起来像"的图。
配乐也是代码合成的：按照分镜节奏编排段落，按照产品气质选择音色。音效和音乐分开混音，关键操作的声音出现时，背景音乐会自动降低。
同一套工具，三个完全不同的案例
项目README里展示了三个公开案例，很能说明这个工具的工作逻辑：
CodePilot是一个桌面AI编程客户端，接入了多家模型服务商，界面是深色、有质感的设计。做出来的片子用了暗色舞台和银白光弧，粒子汇成标志，服务商围绕产品旋转，配的是120BPM电影感电子乐。
Zed是一个多人协作代码编辑器，编辑器本身就是主角。片子用了浅色背景的一镜到底，镜头一直在编辑器里走，标题是用代码注释敲出来的，队友光标带路，最后画出标志，配的是128BPM马林巴打击乐。
T3 Code是一个开源的coding agent控制台，自带5套主题。片子做成了一块3×3控制台面板，镜头推进哪张卡片就进入哪一章，每章换一套产品内置主题色，配的是96BPM的lo-fi电钢琴。
三支片子用的是同一套流程，画面和声音完全不同。因为每支片子的视觉手法都是从"这个产品有什么"推导出来的——产品不同，片子就不同。
产品经理在这个流程里最该做的事
很多人看到这类工具的第一反应是：太好了，交给AI就行了。但如果你真的想让出来的片子有用，有一步值得你自己把关。
就是把功能翻译成卖点。
版本日志里写的是："新增多模型切换支持"、"优化文件预览加载速度"、"支持浏览器内操作"。这些是给开发者看的描述，不是给用户看的卖点。
产品经理要做的翻译是：
-
"新增多模型切换" → "支持的模型之间随时切换"
-
"优化文件预览" → "打开文件比以前流畅了"
-
"支持浏览器内操作" → "浏览器里也能直接用了"
以上为示意写法，具体能力范围需核对产品实际支持情况。每条更新对应一句"用户能感受到什么变化"。这一步做好了，AI整理出来的分镜文案才是人话，做出来的片子观众才看得懂。
开始之前，先准备这些
真正开始做之前，需要准备的东西其实不多，但每样都具体：
第一，产品代码库。不是截图，不是设计稿，是能跑的代码。AI需要从里面找到可以直接接入视频工程的组件。
第二，最近几个版本的更新说明。commit message也行，changelog也行，但最好是你已经翻译过的卖点版本。
第三，明确这支片子给谁看。给用户演示新功能、给投资人展示产品进展、给求职者看团队技术能力——受众不同，片子的重点和节奏完全不一样。
第四，基础参数：横版还是竖版、大概多长（默认45-60秒）、中文还是英文。
然后给AI一句话就能开始："用guizang-product-video-skill，把这个项目最近三周的主要更新做成一支宣传片。先看看代码库里的组件和设计风格，给我看几张关键画面，再继续做动画和声音。"
为什么要先看关键帧，不要一步到位
注意上面那句话里的关键动作：先看几张关键画面。
这是整个流程里最容易被忽略、但最能省时间的一步。
如果你让 AI 一口气出成片，看完觉得风格不对、重点镜头选错了——调整的代价会比早期大很多。但如果先让它渲染几张静帧关键画面，你只需要花几分钟看一眼：配色对不对、组件用得对不对、文案位置合不合适、整体调性是不是你想要的。静帧确认之后，再跑一段短动态预览，看看节奏和转场是否顺畅。
在静帧和短预览阶段调方向，成本比成片阶段低得多。
这个操作不只是节省时间，更重要的是它给了你一个决策点：在动画和声音这些重资产投入之前，先确认方向。做产品的人都懂这个逻辑——先出原型验证，再投入开发。做宣传片也是一样。
看清真实门槛
这个工具的思路确实让人兴奋，但我不想让你带着错误预期去用它。几件事需要看清楚：
它需要本地开发环境。Node.js 22以上、Python 3.9以上、FFmpeg，还有Playwright用来做浏览器渲染。如果你的电脑上从来没跑过Node，这一步会有安装和配置的学习成本。
它不是"文生视频"那样打字就出结果。它是让AI编程工具按照这套skill的流程，一步一步搭建视频工程、接入组件、做动画、写配乐。整个过程需要AI编程工具的调用时间和额度。
开源不等于免费商用。项目主体是AGPL-3.0协议，但默认样式里有些组件改编自CodePilot，适用Business Source License，用之前需要看清楚具体的授权条件。
不是所有组件都能直接接入。需要服务端环境或复杂上下文的组件，可能需要做展示适配层，或者按源码重建。React代码库有现成的接入方式，其他框架的工作量会不同。
适合谁，不适合谁
如果你是一个有开发能力的独立开发者或小团队PM，产品有频繁的版本更新，需要一种可持续、可修改、看起来像自己产品的宣传片制作方式——这个工具值得认真看一看。
如果你没有本地开发环境，或者只是偶尔需要一支品牌宣传片，目前这个路径的上手门槛还比较高。但这个方向在快速发展——归藏9月28日更新的版本里提到，成本更低的模型也能尝试使用。
还有一个同类参考：9月28日向阳乔木（@vista8）也开源了一个叫qiaomu-cut-skill的视频制作skill，定位更偏通用视频导演系统，覆盖素材治理、字幕、品牌包装等。两个项目的侧重不同，归藏的更聚焦在"用真实产品组件做宣传片"，乔木的覆盖面更广。有兴趣的可以分别看看两个项目的README。
现在可以做什么
即使你今天不打算动手，这几件事现在就可以做：
回头看看你产品最近三个版本的更新日志，试着把每条功能变化翻译成一句用户能听懂的话。这个练习本身就有用——不管最后用什么工具做视频，卖点翻译都是第一步。
去GitHub看一下 guizang-product-video-skill 的README和三个案例（github.com/op7418/guizang-product-video-skill）。不用安装，先看看别人的产品是怎么被这套流程转化的，建立一个直观感受。
如果你的产品下一个版本快发布了，可以提前准备好我上面列的那份输入清单。等你决定试的时候，准备工作已经做完了。
来源说明： 本文引用的项目信息、案例描述和推文数据均来自 guizang-product-video-skill 项目公开 README（github.com/op7418/guizang-product-video-skill）及归藏（@op7418）在 X 上的公开推文（9月24日、9月28日）。同类参考 qiaomu-cut-skill 信息来自其公开 README（github.com/joeseesun/qiaomu-cut-skill）及向阳乔木（@vista8）9月28日公开推文。推文互动数据为9月28日晚观察值，可能已有变化。