7.0
深览指数
产品人人都是产品经理·歸藏的AI工具箱··AI 生成
开源个 Skill，帮你用代码低成本生成产品宣传片
作者分享了一个开源 Skill（guizang-product-video-skill），能让 AI 直接读取代码库，自动生成产品宣传片。不同于依赖视频生成模型，这个方案通过 React 组件渲染画面、Python 合成配乐，成本极低且输出结果可精确编辑。文章通过 CodePilot、CraftAgent 等三个案例拆解其技术细节，核心价值在于他提出了一条与主流“文生视频”路线差异化的路径——用代码渲染替代生成，保留了确定性与可控性。适合对 AI 落地、内容生产工具有兴趣的开发者阅读。原文 ↗
核心观点
- ▍在代码库上下文充足的环境中，通过纯代码（React 组件 + Python 合成音效）直接渲染产品宣传片，其质量和可控性已能对标视频生成模型，且具备更低成本和精确编辑的优势。
- 01该 Skill 能自动读取代码库，提取组件、样式、字体、Logo 和配色来构建画面，确保最终视频与产品设计语言一致，无需手动准备素材。
- 02配乐由纯 Python 波形合成，通过正弦波叠加构造音色，并按和弦和节拍编排，可精确控制音乐何时渐强、何时结束，与画面切换对齐。
- 03音效具备 sidechain ducking 避让机制：当关键动作音效（如通知音）响起时，配乐在 40 毫秒内自动降低音量（3-6 dB），结束后平滑恢复，确保音效清晰。
- 04组件并非截图，而是通过 Playwright 直接真实渲染代码库中的 React/Vue 组件，间距、圆角、阴影及状态切换均与产品一致。
- 05生成输出包含一个可继续修改的视频工程（MP4 + 可编辑文件），支持精确修改文案、布局、动画时长等，而非“重新生成碰运气”。
- 06文章展示了三个案例：作者自己的 CodePilot、CraftAgent 框架以及 T3 Code 客户端，它们均自动适配了各自项目的视觉风格。
反方 / 局限
- — 作者指出，代码渲染路线在画面质量上无法与顶尖视频生成模型在所有场景下竞争，其优势在于上下文充足、需要确定性和可编辑性的垂直场景。
12 分钟 · 4 卡片 · 11 资料
读原文 →