对于本站的 Claude Motion Skills，可以把它理解为最终转成视频的小型网页项目。你的编程智能体协助编写和修改源文件，HyperFrames 提供渲染基础。这是两项不同的工作。理解两者如何衔接，就更容易判断问题出在信息表达、动画，还是导出文件。
1. 把需求变成有顺序的场景
假设要为新搜索功能制作一段 12 秒的发布视频。向智能体提供获准使用的文案、真实截图、目标观众和画面比例。规划三个场景：0–3 秒提出问题，3–9 秒演示有价值的变化，9–12 秒展示下一步行动。这只是一个编辑方案示例，并非强制模板。先确认场景顺序，再打磨转场；没有明确重点的文字，即使提高分辨率并加上动画，也不会变得清楚。
2. 保持内容与布局可编辑
下载的源文件包包含动画，以及继续在本地工作所需的文件。在 HyperFrames 项目中，HTML 描述画面组成，CSS 控制外观，JavaScript 可描述运动。把截图、字体和音频保存在项目中，避免依赖可能失效的外部素材。为场景使用 problem、search-demo、next-step 等有意义的名称。标题变化时，让智能体修改对应场景并检查换行，而不是重写所有场景。
3. 让每个时刻都能直接定位
渲染器必须能够直接请求某个时刻的画面。HyperFrames 使用可定位时间的场景；浏览器动画 API 也提供 Animation.currentTime 等时间控制。在每秒 30 帧时，这个示例需要 360 帧，从零时刻开始，以 1/30 秒为间隔采样。只依赖实时钟表的动画，播放时可能正常，定位时间时却会失败。可以两次请求同一时间戳并比较结果，尤其当画面涉及粒子、随机数或异步媒体时。
4. 在耗时的最终渲染前检查
浏览器预览适合检查叙事与节奏。在每个场景的开始和结束暂停，并检查第 3 秒和第 9 秒附近的转场。截图中真正有用的部分是否足够大？标题是否在观众需要阅读之前完成入场？字幕有没有被其他元素遮挡？HyperFrames 文档提供 lint 和 check 命令进行技术验证。请使用项目附带且适用于已安装版本的命令；检查成功也不能判断信息是否表达清楚。
5. 渲染、观看并保留源文件
本站的 MP4 流程从下载的制作包在本机运行，使用 HyperFrames、Chrome 和 FFmpeg。渲染会捕获预定画面并编码成视频，而不是录下预览播放得是否流畅。打开实际 MP4，检查首帧、尾帧、完整旁白、尺寸与时长。交付视频时同步保留源文件夹。客户之后若修改一个词，你可以更新项目并再次渲染，而不必从像素画面重建整个作品。
下一步行动
用预览判断故事，用带时间信息的源文件控制动画，用导出的 MP4 验证交付。让这三者始终保持关联。
探索创作工作区资料来源与延伸阅读
引用链接指向原始文档和创作者。产品可用性会变化，订阅或安装前请核对来源。
- Claude Motion SkillsClaude Motion Skills
- How a HyperFrames project worksHeyGen
- Animation: currentTime propertyMDN Web Docs
- Finish and share a videoHeyGen