精选专题

用 Opus 5.5 做视频终极指南

用代码画视频：从确定性时间函数、分镜与关键帧，到品牌、卡点、Contact Sheet 自检和 MP4 交付。精选 7 个作者仓库的 29 个视频 Skill，附 4 组可直接使用的提示词与案例资源。

29 个 Skill · 更新于 2026-10-15

用 Opus 5.5 做视频，最值得掌握的是一条可编辑、可复现的代码制作路线：让模型写出画面与时间轴，用浏览器或视频框架渲染，再编码为 MP4。你可以改某一帧、某一次转场、某一个节拍，也可以保留工程，下一次换内容继续用。

Anthropic 于 2026 年 9 月 22 日发布 Claude Opus 5.5。本指南围绕它的代码与 Agent 工作流整理，结合 7 个作者仓库中的动效、品牌、声音、自检和渲染 Skill。下面保留了可以直接使用的提示词，并按任务安排 Skill 卡片。

一、先理解：画面为什么能精确修改

在 HTML / Canvas 路线里，项目通常暴露 seek(t)、draw(t) 或 render(t)：输入时间，得到这一刻的画面。浏览器逐帧捕获，FFmpeg 负责视频编码与音轨合成。Remotion 则用 React 组件、帧号和统一时间轴组织同类工作。

确定性的目标是：在固定代码、资源和渲染环境下，同一时刻可以再次得到同样的画面。动画不依赖真实时钟、未固定种子的随机数或前一帧留下的状态。这样才能单独重渲一个镜头、定位一次闪帧，或把一次 Logo 揭晓准确放在音乐重拍上。

这条路线尤其适合产品发布片、动态图表、界面演示、动效排版和风格化说明动画。真人、实拍或复杂角色素材可以作为输入，再由代码组织场景与图形层；不同类型的素材需要采用相应制作方式。

一套通用工作流

  1. 整理需求。 明确主题、受众、时长、画幅、信息重点、品牌素材和声音要求。想法、文章、产品网址、脚本、参考视频都可以作为起点。
  2. 先看方向。 提出三个有明显区别的方案，或先定一个方案；制作关键帧或几秒预览，确认视觉语言与镜头结构。
  3. 写成 brief。 保存事实、品牌规则、分镜、时间轴、素材清单和验收要求，后续修改有明确依据。
  4. 逐镜头制作。 每个镜头先看静帧，再处理运动和转场。较长项目先出低清草稿，观察整片节奏。
  5. 检查画面与声音。 用 Contact Sheet、过渡段连续抽帧、手机尺寸预览和声音波形，检查真正渲染出来的结果。
  6. 导出与迭代。 核对画幅、帧率、时长、字幕与音画同步；修改出问题的片段，最终再检查完整 MP4。

Node.js、Python、浏览器、FFmpeg 以及所选框架是运行环境。不同 Skill 的要求不同，选定路线后按对应说明准备即可。本文聚焦创作流程和工具选择。

让结果稳定的几个习惯

  • 把参考放在前面。 用参考视频、参考帧或真实产品页面，明确字体、形状、镜头、运动和质感。只有“高级”“科技感”这类词，很难建立可核对的视觉标准。
  • 由时间驱动画面。 避免独立运行的 CSS transition、timer 和无种子随机数；使用 GSAP 等动画库时，也要暂停自动播放，由同一时间入口驱动。
  • 先固定品牌与事实。 准备 Logo、色值、字体、真实截图和必须出现的文案。缺失的数据、界面或产品功能不交给模型编造。
  • 先测音乐再卡点。 有音乐时测 BPM、鼓点和 drop，场景、关键动作与音效共用 beat map。循环结尾还要检查位置和速度是否连续。
  • 让模型看见自己的输出。 Contact Sheet 是带时间点的多帧拼图；它能暴露文字碰撞、空镜头和布局问题。快速转场还需要连续帧，声音需要听觉与波形检查。
  • 给自检可执行的标准。 字是否能读、信息是否准确、画面是否越界、重点是否清楚，比一句“再好看一点”更容易推进修改。自评分数可以组织迭代，最终仍应以实际画面和声音判断。

二、四组可以直接使用的提示词

1. Showreel：先观察模型的动效表达

Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. Go all out.

这句适合做起步实验。准备正式作品时，再补上品牌、参考、画幅、关键画面和声音方向；保留第一个版本，方便判断后续修改改善了什么。

2. 产品发布片：把真实素材放进制作要求

制作一条 15–20 秒产品发布视频，主题是 [产品名 + 网址]，画幅为 [9:16 或 16:9]。

要求：
- 访问我提供的网站，整理真实 Logo、配色、字体和关键截图，保存到 assets，并列出素材来源。看不到的界面先说明，不编造。
- 用 seek(t) 或等价的时间入口组织确定性动画；弹簧缓动只保留少量 overshoot，保证文字可读。
- 如果我提供音乐，先实测 BPM 和重拍；否则先按 120 BPM 规划节拍表，选定音轨后再校准。把关键视觉安排在 drop。
- 先给出分镜和 4 张关键帧，等我确认再渲染完整 MP4。
- 参考风格：[描述或附上参考帧]。
- 完成后给出成片、工程、brief 和实际检查结果。

3. 带自检的完整流程

帮我做一条视频，主题是 [主题]，面向 [受众]，时长 [时长]，画幅 [画幅]。

1. 先给出 3 个不同风格方案，每个包含逐镜头概括、关键帧或短预览，以及声音方向。
2. 我确认后写成 brief.md，保留事实、品牌、分镜、时间轴与验收标准。
3. 按 brief 逐镜头制作，每个镜头先渲静帧，检查文字、布局和主体，再推进运动。
4. 先渲低清草稿，用 contact sheet 检查碰撞、安全区、节奏、文字可读性和品牌一致性；为关键转场补连续帧。
5. 按事先列出的标准评分，任何一项低于 8 分就列出时间点和具体问题，修改后重新渲染检查。分数不代替实际查看。
6. 节奏确认后输出完整 MP4，核对声音同步和导出参数，报告实际做过的检查。

技术栈优先 HTML + Canvas/GSAP 或 HyperFrames；如果已有 Remotion 工程，延续现有工程。

4. 中文讲解与科普动画

用一个 HTML 文件（Canvas + JavaScript）制作约 30 秒的中文说明动画，主题是 [主题与事实材料]。

画幅 9:16，采用 [手绘或扁平] 风格。先整理中文旁白稿，再按旁白节奏安排镜头；配音使用我提供的音轨或已经配置的配音服务。

画面通过同一主体、镜头或图形变化保持连续。重要信息暂避上下各 15% 的区域，并按目标发布平台的实际界面复查安全区。

先给分镜和关键帧，确认后再制作完整视频。交付前看手机尺寸抽帧，检查中文字体、文字停留时间与音画同步。

三、精选 Skill：按任务选择一条主路线

不同作者对风格、节奏和工程结构有各自的约定。先选一个主流程，再配合品牌采集、音效、自检或导出能力，通常更容易保持一致。下面按你要完成的工作组织。

1. Bart：口播 B-roll、产品演示与声音

Barty-Bart 的系列适合从一个具体成品类型入手。motion-broll 根据口播视频与文字制作同步动态图形，强调一个形状持续变化、光标交互与弹簧运动。适合给已有口播补充图形素材。

object-separation 面向人物、产品和手部的本地主体分离；它依赖 SAM 2、模型权重及设备能力，本地处理仍需要准备相应模型与环境。sound-effects 则处理 cue 清单、鼓点校准、音效放置、混音与成片检查，附带音效来源和许可记录。

  • motion-broll（口播动效 B-roll · Bart） — 根据口播视频和转录文字制作随讲述节奏变化的动态图形，强调同一形状连续变形、光标交互与弹簧运动。包含渲染引擎、字体和示例；需 Node.js、Playwright、Python/NumPy 与 FFmpeg。字体另附 OFL、图标附对应许可。 来源：Barty-Bart/motion-graphics；MIT 许可。
  • object-separation（本地视频主体分离 · Bart） — 指导使用本机 SAM 2 分离视频中的人物、产品或手部，输出逐帧蒙版及绿底主体视频。按设备能力选择模型规格；需要 PyTorch、SAM 2、模型权重和 FFmpeg，模型可能需另行下载。本地处理能力取决于硬件与依赖。 来源：Barty-Bart/motion-graphics；MIT 许可。
  • sound-effects（节拍音效与混音 · Bart） — 为动效视频建立 cue 清单、核对鼓点、按视觉事件放置音效并检查成片响度。含 CC0 音效库、来源清单和声音报告脚本；需要 FFmpeg 与 librosa、soundfile、NumPy、SciPy、matplotlib。外部音乐与运行时下载素材须分别核对许可。 来源：Barty-Bart/motion-graphics；MIT 许可。

三类讲解模板可以按叙事选择：explainer-default 偏干净的软件产品演示；explainer-high-energy 偏短促、高能、节拍明显的宣传片；explainer-engaging 让一个主角元素在连续镜头里走过产品流程，适合故事型讲解。

  • explainer-default（干净产品演示 · Bart） — 用代码制作约 45–90 秒的产品演示，围绕真实软件界面、操作细节、集成能力和品牌收尾展开。适合功能说明与产品介绍；需要浏览器渲染、Node.js/Python 与 FFmpeg 等配套工具，产品事实与素材由用户提供。 来源：Barty-Bart/motion-graphics；MIT 许可。
  • explainer-high-energy（高能动效宣传片 · Bart） — 用代码制作约 12–20 秒的高能宣传短片，包含节拍驱动的场景变化、动态排版、形状连续性和合成配乐。适合预告、产品短促宣传与 Showreel；需要本机渲染工具，具体节奏与品牌由项目 brief 确定。 来源：Barty-Bart/motion-graphics；MIT 许可。
  • explainer-engaging（连续镜头讲解 · Bart） — 以一个贯穿全片的元素串起产品流程，镜头跟随主体经过多个站点，最后拉远呈现完整旅程。适合约 10–30 秒的故事型讲解与循环动效；采用代码渲染，需要相应浏览器与视频导出工具。 来源：Barty-Bart/motion-graphics；MIT 许可。

2. Howseen：确定性、卡点和参考拆解

Howseen 的工作流从导演 brief、beat map 和关键帧出发，再进入 seek(t) 工程、浏览器渲染、音效与自检。它还提供 remake 相关脚本，用来分析参考的镜头、节奏与构图，再以自己的主题和品牌组织新作品。

这套材料保留了作者的工作室约定与工程示例。使用时需要把作者的本机路径、素材和私人作品库引用调整为自己的项目；素材与外部音乐也应按各自来源使用。21st.dev 组件检索是可选能力，基础动效制作不需要这把钥匙。

  • howseen-motion-design（确定性动效工作流 · Howseen） — 围绕 brief、beat map、关键帧、seek(t)、浏览器逐帧渲染、音画同步和自检组织制作，并提供参考视频拆解与 remake 脚本。原 Skill 名为 motion-design，包含作者工程约定及私人作品库路径，模板需按本机项目适配。21st.dev 组件检索为可选能力。 已规范说明头名称/格式并保留上游原文。 来源：howseen-ai/claude-motion-design；MIT 许可。

3. Charlie：从品牌到发布的 15 个专项

这一组围绕品牌一致性组织。brand-intake 先把品牌、色值、字体和参考变成项目规范；motion-brief-writer 明确单条动画的需求与准确数据；motion-prompt-writer 把想法编译成结构化制作提示词。

  • brand-intake（动效品牌资料采集 · Charlie） — 通过分批提问和参考帧，整理品牌、受众、素材、配色、字体、运动规则及禁用项，形成 brand.md 与 MOTION.md。适合作为同系列动效项目的前置步骤；未知事实保留待确认，规则写入项目时沿用用户授权范围。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • motion-brief-writer（动效需求简报 · Charlie） — 把动画想法整理为清楚的制作 brief，确认主题、准确数据、时长、尺寸、品牌和素材，区分真实结果与示例。适合开始编码前明确单条动态图形的需求，减少缺失信息和编造数字。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • motion-prompt-writer（动效提示词编写 · Charlie） — 把一个具体视觉时刻和品牌资料写成八部分动效提示词，覆盖目标、画幅、核心规则、外观、运动、禁用项、自检与场景。用于准备可复用 brief，不替代实际渲染和画面验收。 来源：charlie947/motion-graphics-skills；MIT 许可。

需要产品发布或内容推广时，选择 launch-video；希望采用 Mac 界面与组件展开的视觉语言，可以看 apple-launch-film；把一期 Newsletter 做成社交媒体预告，则用 newsletter-promo。

  • launch-video（产品发布视频 · Charlie） — 围绕一句核心表达、真实产品截图、证据画面和明确行动指引，规划约 30–45 秒的发布视频。先制作前段风格样张再推进全片，以 seek(seconds) 保持逐帧控制；需品牌资料与相应浏览器/视频渲染环境。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • apple-launch-film（Mac 风格发布片 · Charlie） — 以代码绘制 Mac 风格菜单栏、刘海和逐场景变化的组件，制作产品发布视频。强调事实清单、真实品牌和逐镜头参考检查；原工作流配合 apple-design 与 HyperFrames，相关能力及渲染环境需要另行准备。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • newsletter-promo（Newsletter 宣传短片 · Charlie） — 将一期 Newsletter 的真实内容组织成约 12–20 秒宣传短片，以问题开头、内容证据和阅读入口构成结构。适合社交媒体预告；需要原文、品牌资料和视频渲染环境，不自行补写未提供的事实。 来源：charlie947/motion-graphics-skills；MIT 许可。

专项画面里，animated-chart 强调数值保持准确；motion-effects 收集界面、图表、排版等 16 类动效；milestone-reveal 用粒子与数字揭晓呈现用户提供的真实成果。

  • animated-chart（动态图表 · Charlie） — 将用户提供的真实数据或明确标注的示例数据制作成循环图表，强调数值保持不变、标签稳定、循环接缝和可读性检查。以单个 HTML 与 seek(seconds) 组织画面；品牌规范可由 brand-intake 提供。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • motion-effects（16 类品牌动效 · Charlie） — 提供界面变形、图表、排版和系统动画等 16 类效果参考，以品牌规范和时间函数组织循环 HTML 动效。适合按钮变播放器、搜索变结果、图表变形、磁性 Dock 等专项；需要相应代码与浏览器环境。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • milestone-reveal（里程碑数字揭晓 · Charlie） — 将用户提供的里程碑数字制作成粒子聚合与数字揭晓短片，结合品牌字体、时间函数和循环检查。适合订阅、客户或业务成果展示；数字及事实来源必须由用户提供，不能补写虚构成绩。 来源：charlie947/motion-graphics-skills；MIT 许可。

如果从参考出发，reference-to-motion 帮助拆解与写分镜；需要电影感开场，可以看 title-sequence-3d；知识解释和纪录式表达，则可以尝试 vox-explainer 的撕纸、网点与排版语言。

  • reference-to-motion（参考视频转动效 Brief · Charlie） — 拆解参考视频或抽帧的运动、节奏和镜头结构，结合用户自己的主题与品牌，输出逐场景提示词。适合学习视觉手法和组织制作需求，参考素材的内容、标志与版权需独立核对。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • title-sequence-3d（3D 片头与标题序列 · Charlie） — 用 Three.js 和代码组织约 8–15 秒的电影感标题序列，通过场景、灯光和摄影机运动呈现主标题。适合作为视频开场或作品集片头；需要支持 WebGL 的浏览器、相应依赖和视频导出工具。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • vox-explainer（拼贴式纪录讲解 · Charlie） — 以撕纸、网点、粗体排版和分帧运动组织约 30–60 秒的纪录讲解动画。适合知识解释与社会议题内容；需要事实材料、素材来源和品牌要求，通过代码制作并检查每个关键画面。 来源：charlie947/motion-graphics-skills；MIT 许可。

收尾阶段，loop-cover 处理只让封面中指定元素运动的循环 GIF；reel-export 检查竖版安全区、编码与音轨；model-showdown 则适合在一致 brief 和渲染条件下，对比多个模型的首轮动效输出。

  • loop-cover（无缝循环动态封面 · Charlie） — 让现有封面中的指定元素运动，保留其余画面，输出可循环 GIF；检查首帧、循环接缝与运动幅度。适合博客或 Newsletter 封面，需要原始图片或 HTML、FFmpeg 和可用的图像处理环境。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • reel-export（竖版视频导出检查 · Charlie） — 把横向或方形动效视频组织成 1080×1920 竖版成片，检查标题、Logo 安全区、H.264、像素格式、颜色范围和音轨，并通过 ffprobe 核对导出。需原视频与 FFmpeg，适合社交平台交付整理。 来源：charlie947/motion-graphics-skills；MIT 许可。
  • model-showdown（模型动效对照 · Charlie） — 把同一 brief 交给多个模型，保留各自首轮结果，以一致的渲染条件制作横向或竖向对照视频。适合展示模型动效差异；需要对应模型访问与渲染环境，模型费用和授权由实际使用者管理。 来源：charlie947/motion-graphics-skills；MIT 许可。

4. Xilo：中文需求，先看方案与预览

xilo-opus-video 接受想法、文章、产品页、脚本或参考视频，先提出三个有区别的方案，每个配关键帧或短预览，确认后再形成 brief、逐镜头制作、自检和交付。

它提供 HTML/Canvas、WebGL、Three.js、Remotion、HyperFrames、Manim 等路线的选择方法，以及渲染、视频分析和声音脚本。适合希望先看方向、再决定制作方式的中文用户；具体采用哪种技术，以内容和已有工程为准。

  • xilo-opus-video（中文代码视频制作 · Xilo） — 接受想法、文章、产品页或参考视频，先提出三个方案与关键帧/短预览，确认后形成 brief 并逐镜头制作、渲染、自检。支持 HTML/Canvas、WebGL、Three.js、Remotion、HyperFrames、Manim 等路线；附环境检查、音频和渲染脚本，需相应依赖。 来源：Kianzzz/xilo-opus-video；MIT 许可。

5. Whaley：把品味、自检和声音放进工程

Whaley 的系列给出缓动、弹簧、文字节奏、配色、质感和连续性的具体规则。review-loop 要求看当前渲染的 contact sheet，再对照构图、文字和时序清单修改；sound-design 以共享时间轴组织程序化音效与响度检查。

这些 Skill 原本围绕作者的 Remotion 工程工作。本次条目包含所引用的工程与声音脚本，使用时仍要按自己的素材与时间轴适配。Howseen 与 Whaley 的上游都使用了 motion-design 这个名字，卡片已按作者区分。

  • claude-motion-design（Remotion 动效品味规则 · Whaley） — 提供弹簧、缓动、排版、配色、质感和场景连续性的具体规则。原 Skill 名为 motion-design，商店按作者区分；已附上游 Remotion 工程和声音/仿真脚本，需要 Node.js、Remotion、Python 与 FFmpeg，工程需适配本机素材。 已规范说明头名称/格式并保留上游原文。 来源：whaleyxbt/claude-motion；MIT 许可。
  • review-loop（动效逐帧自检 · Whaley） — 指导渲染草稿、按时间轴节拍制作 contact sheet、检查构图/文字/节奏/一致性，再修改重渲。面向同作者的 Remotion 工程；已附工程、抽帧和声音检查脚本，需要相应依赖与可查看图像的 Agent。 来源：whaleyxbt/claude-motion；MIT 许可。
  • sound-design（程序化声音设计 · Whaley） — 按与画面共用的时间表合成 click、pop、whoosh、chime、riser 等声音，并组织增益、声像和响度检查。已附上游 Python sfx 引擎与工程脚本；需要 Python、FFmpeg 和对应工程。语音或外部音效可选接入另行配置的服务。 来源：whaleyxbt/claude-motion；MIT 许可。

粒子、群体行为或 3D 机器演示，可以看同系列的 web-sims：先让场景由 render(t) 控制，再通过配套脚本逐帧捕获，适合仿真型画面。

  • web-sims（网页仿真视频 · Whaley） — 将粒子、群体或 3D 机器等仿真场景写成由 render(t) 控制的 HTML，再逐帧录制视频。已附 sims 引擎、示例、捕获和构建脚本；需要 Node.js、浏览器/WebGL、Python 与 FFmpeg，需按项目适配素材和时间轴。 来源：whaleyxbt/claude-motion；MIT 许可。

6. 手绘专项：水彩与墨线动画

painted-animation 用 p5.js、p5.brush 与时间函数组织手绘风画面，附带角色模型表、分镜指南和模板。它适合卡通短片、歌词 MV 和循环动画，也强调先定关键姿态、看静帧，再补动作与转场。

水彩填充、线条与运动模糊都有渲染成本。先做一个镜头和短预览，测清单帧耗时，再规划长片的镜头数量与正式输出。

  • painted-animation（水彩墨线动画 · Tu） — 用 p5.js、p5.brush 与确定性时间函数绘制水彩墨线动画，包含角色模型表、分镜指南、歌词视频参考和 MIT 模板。适合卡通短片、MV 与循环动画；需要 Node.js、Chrome/WebGL、FFmpeg，依赖和字体按模板说明准备。 来源：tuzhechen2005/opus-video-skills；MIT 许可。

7. Remotion：保留可维护的视频工程

remotion-motion-graphics 围绕 React/Remotion 组件组织制作，覆盖弹簧、错位编排、字幕、图层、调色、颗粒和关键帧检查。它也可以在已有视频之上增加字幕、片头和图形层。

如果已经在维护 Remotion 工程，或同一种模板需要反复换数据与内容，这条路线更容易延续。它附带主题模板、组件模式和设计参考，最后仍要渲染、抽帧、查看并修改。

  • remotion-motion-graphics（Remotion 视频动效制作 · haidrrrry） — 以 Remotion/React 组件制作或增强视频，覆盖弹簧、错位编排、字幕、图层、调色、颗粒和逐帧验证。附主题模板、动效组件与设计参考；需要 Node.js、Remotion 和 Chromium，已有素材分析可使用 FFmpeg。 来源：haidrrrry/claude-remotion-skill；MIT 许可。

四、案例与提示词：看成片，也看制作条件

看案例时，除了提示词，还可以记录时长、画幅、关键镜头、用到的真实素材、声音和迭代方式。原片与重制能帮助分析差异；案例数量和展示效果随项目更新，以对应页面为准。

五、快速选择与进阶搭配

给口播补素材： 从 Bart 的 motion-broll 开始；需要遮挡关系再加入主体分离，画面时间锁定后再做音效。

做产品片与发布片： 先用 brand-intake 固定品牌资料，再选择 Charlie 的发布片路线或 Howseen 的确定性流程。先看关键帧，产品界面和数据都使用真实来源。

中文需求、希望先看方案： 从 Xilo 开始，把三种方案的风格、结构与声音拉开，再选择一条继续。

提升动效完成度： 把参考、品牌规则、形状连续性和逐帧自检一起加入 brief。Whaley 的品味规则与 review loop 可以帮助建立检查习惯，使用时尊重主工程的视觉方向。

手绘角色动画或歌词 MV： 选择 painted-animation，先验证一个镜头的角色姿态与画风，再扩展故事。

可复用的 React 视频模板： 选择 Remotion 路线，用主题、组件和统一时间轴承载内容变化，保留工程和成片检查记录。

最后交付时，除了 MP4，也保留 brief、工程、素材来源、音频和检查结果。下一轮修改会更具体：哪一句需要多停留半秒、哪个镜头应该提前两拍、哪种转场需要换成同一形状的连续变化。