我用自己的产品跑通了从品牌分析、视觉方向到 15 秒宣传成片的完整链路。
产品终于写完了，网站也成功上线。
然后呢？截几张图发到 X？
录一段鼠标在页面上来回移动的操作视频？
或者配上一句：“我做了一个新产品，欢迎大家体验。”
代码可以自己写，网站也可以借助 AI 完成。可真正到了发布阶段，很多程序员才会发现：做出产品，和让别人迅速看懂产品，是两种完全不同的能力。
今天我测试了一个开源项目：
它可以配合 Claude Code、Codex、Cursor 等 Coding Agent，为刚上线的产品制作宣传动画。
我把整个仓库下载到本地，检查了代码、依赖和导出脚本，还用自己的博客 timewait.cc 制作了一条 15 秒宣传动画。
说明：为了测评这个项目，我并没有精细调试这条宣传视频。演示成片可在 原帖 查看。
这次测试的重点是验证流程，所以我没有花大量时间逐帧打磨设计细节。
即便如此，最终结果依然让我觉得：这个项目值得认真推荐。
产品上线后的最后一公里
以前要完成这些内容：产品演示、功能动画、品牌画面、发布视频、社交媒体宣传素材，通常需要设计师、动画师和剪辑人员参与。
设计师解释产品功能。
设计师需要理解品牌和用户。
动画师再根据设计稿制作镜头。
文案发生调整后，还可能重新走一遍流程。
现在 Huashu Design 提供了另一种思路：把产品网站、Logo、截图、品牌颜色和文案交给 Coding Agent，让它按照一套明确的设计流程完成视觉方案、动画实现、浏览器验证和视频导出。
这套方式尤其适合刚上线的 SaaS、App、开源项目和独立产品。
Huashu Design 到底是什么？
第一次看到项目介绍时，我以为它可能只是一套包装得比较完整的提示词。
把仓库真正拆开后，我发现它的内容比预想中扎实。
Huashu Design 是一套安装在 Claude Code、Codex、Cursor 等 Agent 中的设计 Skill。
仓库里包含：
1. 设计和动画规则
2. HTML、React 起手组件
3. 设备框和浏览器框素材
4. 背景音乐和演示案例
5. Playwright 验证脚本
6. PDF、PPTX 和视频导出工具其中，宿主 Agent 负责访问网站、理解产品、生成代码和修改动画。
Huashu Design 则提供完整的工作方法：应该先收集什么素材，如何理解品牌，怎样生成设计方向，需要检查哪些问题，以及最终如何交付文件。
因此，我更愿意把它理解为：
一套已经具备工程实现的 Agent 设计 SOP。
它能让 Coding Agent 按照更接近真实设计团队的流程完成任务。
一条宣传动画是怎样生成的？
整体流程大致如下：
读取产品网站和品牌资产
↓
分析产品卖点和目标用户
↓
生成三个真实视觉方向
↓
用户选择其中一个方向
↓
编写 HTML / CSS / JavaScript 动画
↓
浏览器验证和人工检查
↓
逐帧渲染并导出 MP4Huashu Design 会先使用同一份产品内容和品牌素材，生成三个可以真实预览的方向。用户看到实际画面以后，再决定继续完善哪一版。这样可以尽早暴露审美和方向上的分歧，减少成品完成以后再推倒重来的情况。
技术点：HTML 为什么可以生成宣传视频？
对实现方式不感兴趣的读者，可以直接跳到后面的实测结果。
Huashu Design 会把浏览器作为动画渲染环境。
HTML、CSS、JavaScript、SVG 和 Canvas 负责构建画面与动画。
Chromium 在每一个时间点渲染页面。
Playwright 负责录制浏览器画面，或者把动画逐帧保存成图片。
最后交给 FFmpeg 编码、裁切，再加入背景音乐和音效，生成 MP4 文件。
目前主要有两条视频生成路线。
第一条是实时录制。
浏览器正常播放动画，Playwright 同步进行录屏。这种方式处理速度较快，但机器负载可能影响帧率和最终时长。
第二条是确定性逐帧渲染。
程序会把动画跳转到每一个准确的时间点，然后单独生成这一帧的画面。
例如制作一条 15 秒、60fps 的视频，就需要准确渲染 900 帧。
逐帧渲染花费的时间更长，但结果更稳定：
- 视频时长更准确
- 机器卡顿不会直接造成掉帧
- 可以获得真正的 60fps
- 任意时间点都能重复检查
- 出现问题时更容易定位具体画面
正式发布的产品动画，更适合采用这种方式。
我实际生成了什么？
我先运行了仓库里的 HTML Demo、浏览器截图和相关导出流程。
之后使用 timewait.cc 的内容，完成了一条完整宣传动画。
最终得到两个版本。
完整版参数：
- 15 秒
- 1920 × 1080
- 60fps
- H.264 视频
- AAC 音频
- 约 4.36 MB
背景音乐、音效、关键帧、逐秒时间线、图片加载和浏览器控制台也进行了检查。
这次测试至少验证了一个结果：
从产品内容、品牌分析、视觉方向、HTML 动画到最终 MP4，整条链路可以在真实项目中运行。
更重要的是，最终保留了 HTML、CSS 和 JavaScript 源文件。
文字需要调整，可以直接修改。
画面顺序不合适，可以重新编排。
动画节奏有问题，也能继续调整时间轴。
对于程序员来说，这种工作方式比较自然，所有源文件还可以通过 Git 管理和迭代。
相比完全依赖随机生成结果的 AI 视频工具，这种方式拥有更强的可控性。
适合谁，不适合谁
我认为它比较适合下面几类用户：
- 刚上线 SaaS、App 或开源项目，需要制作发布视频的独立开发者。
- 正在使用 Claude Code、Codex 或 Cursor，并愿意让 Agent 直接修改工程文件的程序员。
- 没有完整设计团队，但希望发布素材比普通截图更专业的小团队。
- 需要频繁修改产品文案、页面和动画，同时希望保留可编辑源文件的人。
如果你完全不想接触终端、代码和依赖环境，只希望打开网页、点击按钮、立即获得视频，那么目前使用起来会比较吃力。
复杂三维动画、真实物理效果和大型影视后期，也超出了它现阶段的主要能力范围。
最后的评价
现在，做出一个产品正在变得越来越容易。
让别人快速看懂它，仍然很难。
很多独立开发者完成了最复杂的代码，最后发布时却只放了几张截图，然后等待用户主动发现产品的价值。
Huashu Design 值得关注，是因为它让 Coding Agent 开始参与产品发布和视觉表达。
它目前还有环境配置、稳定性和人工验收方面的门槛，也无法自动生成苹果发布会级别的成片。
不过，它已经具备真实可用的工程能力。
好的，本次干货分享就到这里结束啦～
如果你也有需要我测评的仓库，欢迎告诉我。
