我用 WorkBuddy 复刻了 Claude 的 Vibe Video,效果不错

0 阅读4分钟

明天,王通通老师发起的 WorkBuddy 开发者沙龙就要来了,这几天大家一直在帮忙宣发。

昨天,社群小伙伴王成旭用 Claude 制作了一段 20 秒左右的宣传动画,效果很棒。

掘金没搞定视频,图片参考吧

我看完之后就想:既然是 WorkBuddy 的活动,自然也得用 WorkBuddy 搞一个。

虽然 Claude 效果确实不错,但很多社群成员并不方便使用,一个比较亲民的替代方案还是很必要的。

于是,我就找小伙伴要来了提示词,交给 WorkBuddy,搭配 DeepSeek-V4.1-Flash 尝试一把。

先说结论,效果很不错。

并且,为了让大家对这个过程了解地更清晰,我把过程也拆解了下。

直接复用 Claude 的提示词

感觉过程有点单调,因为整个过程只有一组指令。

发送指令发送指令

提示词

时长[30 秒],画幅[16:9],分辨率[1920x1080],帧率[30fps]。给出最终交付可播放 MP4、源码、素材清单和重新导出的方法。如果要参考的图片、logo、视频等素材可以从本工程文件夹直接取想要的素材。我要你发挥你所有的能力实现这个功能,效果要炫酷,要复合这个作品集网站的气质,节奏可以快一些,内容要丰富,尽量覆盖重要信息,主要内容:让上一幕的关键物体成为下一幕的起点。用形状变化、镜头移动或遮罩完成转场。同一时刻只展示一个重点;文字在容器变形完成后进入。动画由统一时间轴控制。网页方案提供render(t)或seek(t),能准确跳到任意时刻。同一时刻重复渲染得到相同画面,随机效果使用固定种子。等待字体、图片与模型加载完成后再截图。如果采用Remotion,按帧号组织动画,保持导出结果可重复。不要先做完画面再随便铺音乐。先确定关键动作发生的时刻,再安排音乐和音效。点击、出现、转场和落地的音效要与画面同步。``宣发内容:WorkBuddy开发者沙龙·济南站``10月18日 (周日)14:00一18:00,绿地·齐鲁之门京沪会客厅3楼千人会务大厅(济南西站东广场)。``用好图片素材,必要时裁剪提取~``欢迎AI开发者、FDE工程师、产品经理、技术负责人、Al创业者、独立开发者、AI爱好者到场交流。``<活动海报截图>

由于个人比较贪婪,同时跑了好几个测试,导致中间出现任务中断,无奈只能手动“继续”。

这个“继续”大法,随着上下文的提升,已经很久没用了。

生成结果生成结果

然后好了,点击上图中的mp4文件,就是下面的视频。

虽然不是非常完美,但整体还是比较满意的,请大家欣赏一下。

掘金没搞定视频,图片参考吧

整个过程的时间花费由于我喜欢多个任务一起发指令,然后去干其他的事情,所以不太具有参考性。

积分应该还是比较准的,“继续”前后一共是:10.55+9.56=20.11 积分。

生成后给社群小伙伴看了,有问使用了什么技能的。

不好意思,这次没有技能可以分享——纯原生。

全程没有调用技能全程没有调用技能

不是剪辑,而是用代码画出 900 帧

为了清晰了解生成视频的整个过程,我让 WorkBuddy 帮我分析了下。

解构指令解构指令

结果发现,这并不是传统意义上的视频剪辑。

整个视频是通过代码逐帧绘制,再编码成视频文件的。

工程中包含约 2759 行 TSX 代码和 525 行 Python 代码,没有一条传统的剪辑时间线。

视频生成的五段流水线视频生成的五段流水线

整个流程可以概括为五步:

• 拆解素材: 从原始海报中提取插画、头像和二维码等独立素材。

• 设计时间轴: 将视频划分为 7 幕,统一管理画面和音效的时间点。

• 编写动画: 使用 React 组件(一种网页开发框架),绘制每帧画面。

• 逐帧渲染: 通过 Remotion 和无头 Chromium 将画面渲染出来,再用 FFmpeg 编码。

• 检查成片: 从最终 MP4 中重新抽取画面,检查问题并修改代码。

30 秒、30fps,对应的就是:

30 × 30 = 900 张图片。

也就是说,程序需要确定这 900 个时刻分别应该呈现什么画面,再把它们连续播放起来。

结语

记得去年,AI 能用 SVG 绘制架构图、用 HTML 制作 PPT,就已经让人眼前一亮。

现在,AI 又可以通过编写程序,把文字、图形、动画和音频组织起来,完成一段完整的视频。

也许,AI Coding 真的能成为 AGI 的一种手段呢?

明天,WorkBuddy 开发者沙龙济南站就要开始了,各位小伙伴现场见咯~