mcpField
C
chat-motion-overlay

chat-motion-overlay

github.com/nexu-io创意与媒体104.6k864 次安装今天更新
代码仓库

关于 chat-motion-overlay

Chat Motion Overlay 是一项将聊天文本或截图转换为可配置动态叠加视频的技能。它可生成 Remotion 可渲染的场景包，并支持选择聊天容器、头像、设备边框和输出格式。

主要功能

  1. 01规范化聊天记录
  2. 02配置场景选项
  3. 03生成 JSON 场景规格
  4. 04准备 Remotion 工程包
  5. 05输出透明视频及工程文件

适用场景

  1. 01根据文本制作动态聊天叠加视频
  2. 02将截图消息转换为叠加场景
  3. 03准备可编辑的 Remotion 或 Hyperframe 工程

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nexu-io/open-design --skill chat-motion-overlay

安装后在 Claude Code 中输入/chat-motion-overlay确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/examples/
chat-transcript.txt
config-wechat-phone.json
assets/remotion-template/
package.json
remotion.config.ts
tsconfig.json
assets/remotion-template/src/
chatSpec.ts
index.ts
Root.tsx
assets/remotion-template/src/components/
avatarLibrary.tsx
BubbleScene.tsx
ChatMotionOverlay.tsx
DeviceFrame.tsx
types.ts
references/
config-schema.md
input-format.md
output-modes.md
question-strategy.md
test-matrix.md
test-report.md
scripts/
build_chat_overlay_spec.py
prepare_chat_overlay_bundle.py
run_test_matrix.py

详细介绍

聊天动效叠加层

将聊天内容制作成可配置的动效叠加片段，而不是单一的硬编码微信模拟界面。

工作流

  1. 规范化聊天输入。

    • 如果用户提供截图，请将可见消息提取为 references/input-format.md 中的对话记录格式。
    • 如果用户提供纯文本，请保持每个节拍一条消息；需要确保真实性时，保留原文措辞。
    • 对于截图，可参考可见头像来判断参与者人数和消息分组，但默认不要裁剪或重制头像图片。推断参与者及消息所在的左右侧，然后使用预设头像进行渲染；除非用户提供头像文件或明确要求使用从截图提取的头像。

  2. 选择场景配置。

    • 阅读 references/config-schema.md。
    • 生成资源包之前，确定容器样式、头像模式、设备边框、昵称模式和交付格式。
    • 如果用户提供的信息不足，请遵循 references/question-strategy.md 中的提问策略。

  3. 构建场景规格。

    • 使用对话记录和可选的配置 JSON 运行 scripts/build_chat_overlay_spec.py。
    • 脚本会输出一份 Remotion 可直接渲染的 JSON 规格。

  4. 准备可渲染资源包。

    • 运行 scripts/prepare_chat_overlay_bundle.py。
    • 脚本会复制 Remotion 模板，注入 src/chatSpec.ts，并将上传的头像文件复制到 public/。

  5. 渲染目标输出。

    • 使用 references/output-modes.md 中的准确导出命令。
    • 编辑时优先选择 MOV（透明背景，可直接导入剪映 / PR / FCP 叠加）；浏览器播放时优先选择 WebM（透明背景，适合网页 / 浏览器播放）；如果用户希望后续继续合成，则提供可编辑的工程输出。

支持的尺寸

  • container：none、wechat、telegram、messenger
  • avatarMode：preset、upload、mixed
  • deviceFrame：none、iphone-dynamic-island
  • nicknameMode：hidden、first-message-only、always
  • deliveryFormat：
    • mov：MOV（透明背景，可直接导入剪映 / PR / FCP 叠加）
    • webm：WebM（透明背景，适合网页 / 浏览器播放）
    • remotion：Remotion 工程（适合继续编辑和拼装）
    • hyperframe：Hyperframe 工程（适合作为模块继续复用）
    • json：JSON 数据（适合程序处理 / 自定义渲染）
    • preview：预览图 / 预览工程（适合先确认效果）

输出规则

  • 用于叠加的输出，其合成根画布必须保持透明。
  • 独立气泡动效（无应用外壳）使用 container: none。
  • 如果平台界面是叙事的一部分，则使用 container: wechat|telegram|messenger。
  • 将上传的头像视为内容资源，并将其复制到 public/ 以供渲染资源包使用。
  • 如果用户未指定头像文件，优先使用预设头像。截图中的头像可能有助于识别参与者，但建议优先让用户提供头像文件，不要轻易从截图中裁剪或重制头像。
  • 明确使用配置驱动的行为；不要悄悄切换样式系列。

提问策略

  • 优先推断，其次提问。
  • 如果用户提供的信息足以得出合理的默认方案，请继续，并清楚说明所采用的假设。
  • 只询问影响较大的缺失选项。
  • 问题数量控制在 1～3 个。
  • 尽量使用面向用户的表达，而非技术术语。
  • 询问 deliveryFormat 时，使用 格式（场景描述） 标签，而非内部渲染术语。
  • 如果用户表示无所谓，则使用默认值继续，并在结果中注明。

资源

  • 对话记录格式：references/input-format.md
  • 配置字段和示例：references/config-schema.md
  • 提问策略：references/question-strategy.md
  • 输出命令和目标：references/output-modes.md
  • 将对话记录和配置转换为规格：scripts/build_chat_overlay_spec.py
  • Remotion 资源包准备：scripts/prepare_chat_overlay_bundle.py
  • Remotion 渲染模板：assets/remotion-template/

评论

支持 Markdown