GPT-6 Astra 直接读取代码库，自动生成产品宣传片，从组件、配色到配乐全由代码渲染。作者将这套方法打包成 Skill，无需视频生成 API，成本极低且可精确编辑。本文通过三个案例拆解其技术细节与产品化思路，探讨 AI 时代内容生产的新分水岭。

前几天我拿 GPT-6 Astra 在自己的 CodePilot 项目做了个版本更新的宣传片。效果出乎意料地好。

它直接读了我的代码库，把产品的组件、配色、Logo 拿来用，自己组织卖点、写文案、做动画。

发出来以后大家都想学着做。

于是我把整套做法整理成了一个 Skill，guizang-product-video-skill（https://github.com/op7418/guizang-product-video-skill）。

为什么藏师傅要做这个

两件事让我觉得值得打包成 Skill。

纯前端代码渲染，不依赖视频生成模型。

整个视频的画面是 React 组件加时间轴渲染的，配乐是 Python 代码合成的，音效是预制的 WAV。

不需要调图片或视频生成的 API，也不需要额外准备素材。成本很低，弱一些的模型也跑得动。

另一件是它跟你的代码库绑得很紧。

每次执行的时候，它会去读你的仓库，找到组件、样式、字体、Logo、配色，然后用这些东西来构建画面。

你想介绍最近更新了什么，说一句话就行，不用自己准备文案和截图，它直接输出一支跟你产品审美一致的视频。

接下来从几个案例来看一下它的能力和一些效果：

案例一：CodePilot 我自己的项目

这是我最先跑的案例，也是打磨最多的一个。

它读完 CodePilot 的代码库之后，把最近几周的更新梳理成了几组卖点。

围绕每一组，先出一张大字标题卡，再接一段真实组件的特写动画。

比如讲模型切换，它会直接把 CodePilot 的模型选择器组件拿出来，展示三种运行方式的切换，下面列出 GLM 5.3 Flash等实际可选项。

讲工作区，它就把文件树、Git 分支图、浏览器预览这几个面板并排展示。

这些组件全部来自代码库本身，不是重新画的。

最离谱的是音乐，给我震惊了。

我一开始以为它从网上找的音乐，因为旋律和节奏跟画面配合得特别好，到结尾的时候音乐自然收敛，配合一个大字收束画面。

后来看了代码才发现，音乐是纯 Python 写的，没想到 GPT-6 做纯音乐也这么厉害。

音效。内置了 11 种：点击、弹出、切换、输入、通知叮咚、完成确认、转场这些。

每个音效绑定到对应的动作节点上，比如模型切换的瞬间、通知弹出的时刻。

音效响起时，配乐会自动做 ducking（降低音量让位），过了再平滑恢复。

如果你的产品还没有成熟的视觉风格，或者素材不多，可以直接用我内置的默认样式，一套暖白底、炭黑字、卡片层次的设计语言。

产品本身有一套设计的话，就让它直接读代码库，出来的东西更有你自己的味道。

案例二：CraftAgent 开源框架

CraftAgent 是以前做 Craft 笔记那个团队的新项目，一个开源的AI Agent 框架。

我让他拉取了这个项目，然后让他根据项目的风格和组件，做了一个近期功能更新的宣传视频。

让我惊喜的是，它读完 CraftAgent 的代码库之后，直接就把 Craft 的品牌色（紫色）、Logo 风格、浅薄荷绿的背景全用上了。视频里介绍了定时刷新、Pages、只读分享几个最近的更新，每一段都用产品自己的界面组件来展示。

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

结尾那张 “Built for your next idea.” 的收束，下面三个功能标签（Pages BETA、定时刷新、只读分享），完全是 Craft 自己的排版味道。

Logo、界面组件、卡片样式这些东西都不需要手动准备。

直接从代码库里找到对应的组件和样式文件，接入到视频工程里。一次成型。

案例三：T3 Code 多 Agent 客户端

T3 Code 是最近比较火的一个多 Agent 客户端，形态跟我的 CodePilot 类似。

这个案例出来之后，完全就是 T3 Code 自己的风格：

深色背景、白色文字、顶部 “T3 T3 Code” 的品牌标，右上角 “THE UPDATE / 09.18”。

介绍了多模型选择、独立 worktree 任务、主题切换这几个功能更新。

字体、图标、主题色渐变全部取自代码库里的组件。

你能看到版本号 “v0.0.42 + 最新 Nightly” 这种很 dev-facing 的信息，底部还有 “状态演示 · 不代表执行耗时” 的注释。这些细节说明它在理解这个产品的语境和受众，不是在套模板。

这个是一次搞定的，我没有进行调整。

应该怎么用

安装提示词：

帮我安装这个 Skill：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 波形合成：正弦波叠加构造不同音色，然后按和弦进行、节拍模式编排成一首完整的曲子。

代码里能看到每个音符的音高、时值、力度和声像位置。

因为音乐是为当前这支视频从零写的，它可以精确控制第几秒开始渐强、结尾最后两小节怎么收、哪个重拍对齐画面切换，我是真没想到 GPT-6 拿代码写音乐能写这么好。

音效有避让机制

比如通知的叮咚声响起来的时候，配乐会在 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

可以你自己的项目跑一下看看，如果觉得东西不错，你可以帮我点个赞，或者分享给你需要的朋友。