归藏 product video skill

归藏推出 guizang-product-video-skill，面向AI编程工具的产品宣传片制作Skill。把项目代码仓库交给AI，简单描述更新要点或者产品定位，就能全自动完成宣传片全链路制作：提炼卖点、撰写文案、接入项目原有UI组件、生成代码动画、编曲配乐、添加音效，最终输出成片MP4，同时保留可反复编辑渲染的视频工程。

这套Skill源自作者制作CodePilot宣传片打磨出的完整工作流，核心目标三点：成片风格贴合自家产品、内容信息清晰、节奏紧凑不拖沓，默认产出45–60秒横版中文短片。

安装方式

通过skills CLI一键安装

npx skills add [https://github.com/op7418/guizang-product-video-skill](https://github.com/op7418/guizang-product-video-skill) --skill guizang-product-video-skill

也支持手动克隆部署，适配Codex、Claude Code两类AI编程工具的Skill目录。首次启动会自动校验本地环境，检查Node.js、Python、FFmpeg、Playwright等渲染依赖，缺失组件按指引补齐即可。

核心工作能力

Skill读取代码仓库的提交记录、版本更新日志，提炼出用户能看懂的产品卖点，避免直接罗列技术提交信息。

• 画面层：优先加载项目原生组件，复用产品本身的色彩、字体、圆角与交互样式。产品无成熟视觉体系时，启用CodePilot暖白/炭黑备用风格。内置GSAP时间轴编排动画，Three.js/Canvas制作背景特效，浏览器管线逐帧渲染。
• 声音层：优先使用用户指定音频；其次调用本地音乐生成模型；无素材时直接代码合成配乐。音效独立配置，关键交互音效响起时自动压低背景音乐，保证听感清晰。
• 三种视觉模式可选
  1. 沿用产品风格（推荐）：产品已有完整UI，宣传片完全复用原有设计
  2. 默认样式：CodePilot卡片排版、色彩体系做外层包装
  3. 混合模式：保留真实软件界面，文案取景做传播优化

制作工作流程

1. 确认需求范围：产品、更新内容、受众、发布平台、画幅、语言、视觉风格
2. 扫描代码仓库，挂载真实前端组件，适配镜头尺寸
3. 确定创意方向，输出分镜+关键静帧画面，确认后再进入动画制作
4. 逐镜头搭建动画，生成静帧核对效果
5. 编曲、配置音效，混音处理
6. 审片调整，导出MP4成品，附带完整工程；还可生成多比例封面图

特色亮点：并非固定模板渲染，所有镜头语言从产品本身特性推导而来。文中示例：CodePilot、Zed编辑器、T3 Code三套工具，使用同一套Skill流程，产出的画面、配乐、镜头语言完全不同；连续制作多部宣传片还会自动规避重复的开场、转场手法。

环境依赖

• Node.js ≥22、Python≥3.9、FFmpeg、Playwright Chromium
• 工程底层基于React、esbuild，动画GSAP，背景渲染Three.js
  React仓库接入体验最好；monorepo项目可通过配置文件映射适配；无法直接挂载的复杂组件，会忠实重建界面并标注限制。

交付产物

1. 可直接发布MP4宣传片
2. 完整视频工程，支持二次修改、重新渲染
3. 多张关键渲染图，用作封面素材
4. 组件、音频素材溯源清单，记录检查项

示例指令参考

用 guizang-product-video-skill，把这个项目最近三周的主要更新做成一支宣传片。横版，45–60 秒，中文。先看看代码库自己的组件和设计风格，给我看几张关键画面，再继续做动画和声音。