让 AI 做宣传片，还能直接改画面 huashu-motion

把修改意见直接留在画面上

宣传片做好后，想放大一行文字、调整一张卡片，往往还得向 AI 解释“第几秒、哪个位置”。huashu-motion 支持点选预览中的元素留下评论，把时间、场景和对应源码位置一起交给 AI；文字、颜色等有输入框的项目，也能在浏览器里直接调整。

同类技能各有侧重：video-shotcraft 提供展示产品功能的镜头配方，huashu-art-motion 围绕不同艺术画风制作动画。huashu-motion 更侧重产品宣传片从制作到反复修改的流程，让你看着画面提出具体修改。页首介绍短片中的评论框展示了这种用法。

安装技能，运行演示

huashu-motion 用代码制作可编辑的网页动画，再由本机浏览器逐帧渲染成视频。

本教程用一款任务管理产品做一支约 30 秒的宣传片。先确定要让观众记住的一件事，再安排镜头，不必把每个按钮都展示一遍。

1. 准备 Node.js 22 或更高版本、Chrome（也可用 Chromium 或 Edge）和 FFmpeg，再在终端运行本页安装命令。官方目前只在 macOS 上实测过。

2. 安装后，在终端检查环境：

   npx huashu-motion doctor

   报告以 ✓、✗ 标出 Node、FFmpeg 与浏览器等检查结果。先按失败项后的提示补齐环境，再继续；技能安装完成不等于渲染环境已经可用。

3. 在准备存放项目的目录运行：

   npx huashu-motion demo my-motion-demo

   命令会复制官方演示并启动浏览器编辑器，终端同时显示访问地址。打开后应能播放、拖动时间轴和查看场景。这个演示用于熟悉编辑方式，自己的产品片另建工程。

首次运行 npx huashu-motion 时可能提示下载命令行包。技能负责指导 AI，命令行工具负责预览、配乐与导出，两者各有分工。

换成自己的产品，选择宣传方向

准备一个观众能理解的变化

把产品名称、目标用户、官网或介绍文档、Logo 和两三张关键界面截图交给 AI。先用一句话说清：用户遇到什么问题，用产品之后有什么变化。真实界面、品牌颜色和实际结果，比堆叠功能名称更容易组织成镜头。

下面是本站整理的制作需求示例，用于说明怎样组织材料，不是作者原始提示词，也不是已复现成片。

在已安装技能的 Claude Code 或 Codex 会话中发送，并附上自己的截图：

用 huashu-motion 做一支约 30 秒、16:9 的产品宣传片，项目目录叫 taskflow-promo。

产品：TaskFlow，面向小团队的任务管理工具。
核心卖点：把一段会议记录整理成有负责人和截止时间的任务。
素材：我附上的 Logo、会议记录示例和任务列表截图。
目标观众：经常需要会后整理、分派任务的团队负责人。

先读材料，给三个不同的宣传方向，每个方向提供一张关键帧和简短说明。
品牌色从我提供的素材里提取。先不做整片，等我选定方向。
首版只用配乐和音效，不加旁白。

先确认关键镜头，再扩展整片

1. 看三个方向是否展示了不同的讲述方式，而不只是换颜色。选择最能体现产品价值的一版，指出想保留的画面和节奏。
2. 让 AI 先写镜头与节奏方案，再做“会议记录变为任务列表”这个关键镜头。确认界面文字、操作结果和品牌元素正确后，再完成前后的镜头。
3. 要求 AI 打开 taskflow-promo 的编辑器并持续接收评论。自己打开地址后，完整播放首版，再拖动时间轴检查文字密集的位置。

技能用代码制作画面，不调用文生视频模型。需要人物或实拍镜头时，把素材一并交给它做合成。

点选画面修改，替换文案与素材

先改一处，确认反馈链路

在编辑器中定位到任务列表出现的那一帧，按 C，点中需要调整的文字，留下明确的意见：

这张任务卡的截止日期太小。只放大日期并增加对比度，卡片位置和其他镜头保持不变。

评论会带上时间、场景、元素及对应源码位置。AI 需要在会话中持续等待并处理评论；只打开编辑器，不代表有 AI 自动接单。评论提交后，应看到处理回复和预览更新，再检查其他画面是否保持原样。

标题、数字、颜色、停留时间等项目，如果在右侧面板提供了输入框，就可以直接修改。没有对应输入框时，再用评论提出要求。若要延长某个镜头，让 AI 同步调整后续镜头和声音，不要只把一张画面停住。

换成自己的产品内容

替换素材时，告诉 AI 哪些内容需要一起调整：

• 换 Logo 和品牌色，同时检查按钮、重点文字和背景的对比度。
• 换产品截图，同时修改与截图对应的操作说明和结果，别保留示例功能。
• 换卖点，重新安排能证明这个卖点的镜头，不只替换结尾标语。

这些修改都基于新建的产品工程。仓库中的“豆子花叔”角色是作者形象，仅供项目演示，不能作为通用角色移入自己的宣传片；代码 MIT 与字体、音乐采样等素材许可也应分开看，详见来源区的 THIRD_PARTY.md。

检查配乐、调整画幅并导出

先听配乐，再确认整片节奏

首版可以使用合成音色，无须先下载真乐器采样。想换成钢琴、弦乐等音色时，让 AI 运行 npx huashu-motion samples build，首次会下载约 55 MB 的采样包。

正常速度播放一遍，检查重要动作与音效是否对齐、音乐是否突然中断。修改镜头时间后，让 AI 重新生成配乐和音效。若后续要加旁白，先确认稿件和声音，生成短段试听，再制作全量配音，并按实际音频同步字幕、镜头和配乐音量。

竖屏另存，重新安排画面

需要竖屏时，在存放项目的父目录运行：

npx huashu-motion fork taskflow-promo taskflow-portrait --size 1080x1920

这会创建竖屏工程，并提交重新排版任务。随后让 AI 调整截图、标题和文字，不要把横屏直接裁切成竖屏。原横屏工程保留。

导出并检查最终文件

回到同一父目录，先检查，再导出横屏版本：

npx huashu-motion check taskflow-promo
npx huashu-motion render taskflow-promo
npx huashu-motion qa taskflow-promo

check 的错误先修复；render 将视频写入项目的 out/ 目录，文件名带版本号，实际路径以终端输出为准；qa 检查最新成片的单帧闪烁、停顿和硬切等问题。竖屏导出时，将目录换成 taskflow-portrait。

最后直接打开导出的 MP4，核对声音、文字、产品信息和结尾，不只看编辑器预览。需要透明叠层时，工具提供带透明通道的 MOV 或 WebM 路线，普通 MP4 不等于透明视频。