Sprites.ai 单形态界面宣传片
Claude Opus 5.5 视频作品。收录画面可见暖灰背景上的研究状态条和渠道指标卡。作者的完整收录指令更具体：要求一个形状连续变换、光标操作、循环首尾和按时间定位的渲染。下面借鉴的是这套指令结构，不把每项要求都当作成片已达成。 附素材替换与分阶段制作指南。
概览
你会得到什么
- 制作一个能循环的 UI 操作动效，让同一形状承接几个状态。
- 对应场景的素材清单、替换表与分阶段 AI 指令。
案例解读
怎样做一条类似的视频
收录画面可见暖灰背景上的研究状态条和渠道指标卡。作者的完整收录指令更具体：要求一个形状连续变换、光标操作、循环首尾和按时间定位的渲染。下面借鉴的是这套指令结构，不把每项要求都当作成片已达成。
你可以借鉴这条作品来制作一个能循环的 UI 操作动效，让同一形状承接几个状态。本篇来自 Claude Opus 5.5 视频专题；在支持该模型的 AI 编程工具中选择 Claude Opus 5.5，将下面的资料与指令分阶段交给它。模型负责规划、编写和修改代码，实际工程负责预览与导出；配音或音乐需要对应工具或已有音频。
作者公开说明一个 HTML 文件、Playwright 渲染、代码生成 UI 音效；收录指令要求 seek(t) 决定所有状态。建议先做缩短的三状态版本，避免一开始复制长操作链。
开始前准备这些素材
- 三到五个真实 UI 状态，以及状态间的点击或拖拽。
- 品牌色、字体、图标和可展示的演示指标。
- 首尾相同的构图，包括光标位置；目标画幅和节拍表。
把素材放进 AI 能读取的目录，例如 assets/，提供文件名与用途。再写清目标画幅、时长和发布位置；只有网址时，先让 AI 列出实际能读取的内容，不要凭网址补写功能。
替换元素，适配你的产品
| 样片或作者指令中的元素 | 换成你的内容 |
|---|---|
| 研究状态条 | 你的加载或处理状态 |
| 渠道指标卡 | 你的结果卡片 |
| 42 个竞争对手与 ROAS | 你能准确表述的演示内容 |
| #FD9543 强调色 | 你的品牌强调色 |
文件上传产品可以用“上传按钮 → 进度条 → 文件结果卡 → 上传按钮”；审批产品可以用“待审 → 展开详情 → 通过 → 待审”。别沿用不存在的广告能力。
同一个元素形变而非硬切；导出不能依赖累计计时或 CSS transition 状态；首尾光标也要一致。
可以先用这份分镜
这是本站建议的草稿节奏，不是原片逐秒还原。先确认每幕的素材和短句，镜头时长可以按信息量调整。
- 0–3 秒：按钮进入处理状态。
- 3–7 秒：同一形状展开为结果卡。
- 7–11 秒：光标执行一次操作。
- 11–14 秒：回到起始形状与光标位置。
跟 AI 分四步制作
以下为本站编辑建议，未经复现测试。 方括号由你填写。每一步预览通过后再继续，不把作者作品当作可下载模板。
- 核对素材并确定镜头。
我正在用 Claude Opus 5.5 制作 [我的产品名] 的视频。
目标：制作一个能循环的 UI 操作动效，让同一形状承接几个状态。
观众：[人群]。画幅与时长：[要求]。素材目录：[路径]。
读取我的产品说明、品牌和素材，列出能确认的功能和缺少的文件。
参考上面的分镜草稿，给出每幕的画面、短标题、素材文件、时长和转场关系。
同一个元素形变而非硬切；导出不能依赖累计计时或 CSS transition 状态；首尾光标也要一致。
先给镜头表，不要直接制作整片。- 先做一个小样。 确认镜头表与素材路径后再发送：
镜头表已确认。先做按钮→状态条→结果卡的连续形变，并验证跳到任意时间点仍是正确画面。
制作路线：作者公开说明一个 HTML 文件、Playwright 渲染、代码生成 UI 音效；收录指令要求 seek(t) 决定所有状态。建议先做缩短的三状态版本，避免一开始复制长操作链。
先检查当前环境的依赖与素材是否可用，给出实际预览方式。
缺少工具、模型或音频时明确列出来，不用占位内容冒充成片。
先交付这段小样与预览，再说明完整制作需要的文件。- 完成其余镜头。 首个小样的字号、颜色、素材比例和节奏确认后发送：
沿用已确认小样的视觉规则，完成镜头表的其余部分。
同一个元素形变而非硬切；导出不能依赖累计计时或 CSS transition 状态；首尾光标也要一致。
让标题、界面动作和声音的出现时间对应；没有音频时先交付静音预览。
将产品名、Logo、界面素材、品牌色和片尾入口整理为容易修改的配置。
提供完整预览和关键转场的静帧，标明还未完成的部分。- 检查并导出。 看完预览，在手机上核对文字和素材，再发送：
按照我确认的修改完成导出，保留可编辑源码与素材引用。
给出本工程实际可运行的导出命令、依赖前提及输出文件位置。
检查最终 MP4 的时长、画幅、文字裁切和音轨，不只检查浏览器预览。
导出后提供关键帧总览与仍存在的限制。成片怎样修改，问题怎样排查
先指定镜头与改动，避免一句“更高级”让整片失去已确认的节奏。可以继续发送：
只修循环接缝：对比起始和结束画面，匹配形状、文字、光标位置与移动方向；不要只加一次淡出。横屏转成 9:16 时，应重新安排标题、主体与片尾入口。先看新布局，不直接裁掉画面两侧。缩短视频时先删次要镜头或句子，再调整时间轴。
- 跳转时间后画面错误：检查是否用了 timers、累计物理状态或未重置的 CSS 动画。
- 文字形变时重叠：为退出和进入文字分开安排时段。
作者来源与复现边界
作者原帖明确提及 Opus 5.5、单 HTML 和 Playwright；页面保留长指令，但未附作者的 HTML 或音效工程。查看作者原帖。
画面描述依据本站收录视频，制作要求依据已收录指令与原帖；不代表测试过产品当前功能。本文的分镜、适配示例与扩展请求是本站建议，未实际生成验证。没有作者完整工程时，需要自行提供素材和制作环境。