无 After Effects:Claude Code 用纯代码做出价值数百美元的产品宣传片

SinanDev · reddit · 2026-10-01

作者用 Claude Code 为自己的 VS Code 插件 Cortex 制作了产品宣传片和 Marketplace 演示 GIF,全程无视频编辑器、无 After Effects,一切皆为代码。

宣传片做法

• 每个场景是一个网页(HTML/CSS/JS),一个 render(t) 函数按时间 t 精确绘制帧;Playwright 以 60fps 逐帧截图,ffmpeg 合成 MP4,每帧可复现
• 音效(打击、whoosh、点击、打字)用 Web Audio 生成,与动画时间戳对齐
• 旁白用 ElevenLabs 生成,加电话滤镜,脚本精确到帧混合
• VS Code、Claude Code 聊天与产品面板均用 HTML 复刻,镜头可放大任意细节且保持清晰
• 六个场景,每场景从上一场景末帧开始,独立渲染审查后剪辑;每次渲染前 Claude 自己拍静帧检查裁切、重叠与可读性
• 约 20 次迭代主要花在叙事上:前 5 秒给承诺,再用开发者熟悉的场景引发共鸣;效果之间的平静时刻同样重要

README GIF 反其道而行

• UI 用真实的插件而非复刻:Claude 发现插件的 dev server 可在浏览器渲染真实 webview,通过 VS Code 同款消息通道喂数据,每个图标、动画都是真插件在运行
• 只复刻周边环境;Playwright 逐帧点击真实按钮、输入真实内容,ffmpeg 压成 GIF;9 个 GIF 共不到 700KB
• 每段 clip 一个想法、小于 10 秒、无文字,由上方 README 文字负责解释

作者表示一年前这种水准的视频他愿意花数百美元购买,并愿意分享为该格式构建的 skill。

原文链接 →

「编程与Agent」频道最新

• IBM Torch Spyre 团队用 Agent 流水线守住 PyTorch 上游兼容 — lmoroney · 2026-10-02
• 开源编码 Agent Z-Engine：用 System 1 模型接管小决策 — arshadbarves · 2026-10-02
• 别用 Agent 订酒店订机票：省几分钟不如让它省几个月 — jesselyu · 2026-10-02
• 移动端跑多步 Agent：延迟、状态与上下文三大瓶颈之辩 — QuantumQuillQuester · 2026-10-02
• 腾讯混元 AutoGUIWorld:用图像生成器当 GUI 世界模型,不跑软件合成 7.9 万条轨迹 — Tencent-Hunyuan · 2026-10-02
• 中科大 GraphForge:证据图锚定真实文件合成任务,2 千条轨迹显著提升 GDPVal — ustc-community · 2026-10-02

更多「编程与Agent」频道 AI 资讯 →