面向 Claude Code 与 Codex 的智能体技能,用 Remotion 代码把产品页面制作成电影感宣传视频。
Liamrjohnston/remotion-motion-graphics-skill
一套让 AI 编程智能体用 Remotion 制作动态图形与短视频片段的 Agent Skills。
- Star
- 119
- Fork
- 9
- 未关闭 Issue
- 0
- 最近提交
- 3个月前
这是什么?
这是一套面向 Claude Code、Codex、Cursor 等 AI 编程智能体的 Agent Skills,用于指导智能体基于 Remotion 制作完整的动态图形片段,涵盖动态文字、流程图、镜头运动、终端演示和编辑风格的高亮卡片。智能体在编写代码前会先确认输出格式(4:3 或 9:16)和背景风格,并对指定产品及其标识进行调研。
仓库包含四个技能:一个用于调研、素材校验和交付审核的门控技能;一个通过关键帧摄像机在连续场景中运镜的 cinematic-camera 技能;一个用于真实命令行演示的 terminal-inserts 技能;以及一个用于新闻风格荧光笔高亮卡片的 article-highlights 技能。门控部分包含校验来源、计算素材哈希的脚本,并要求独立审核通过后才能标记为可交付。项目还明确禁止霓虹、发光和渐变光球等视觉样式。
这些技能以 Markdown 形式编写,遵循 Agent Skills 格式,可通过一条 npx 命令安装。建议与官方 Remotion 技能搭配使用,后者负责 API 的正确性。
核心功能
- 01包含四个技能,分别覆盖动态图形、镜头运动、终端演示和编辑风格高亮。
- 02构建前询问输出格式(4:3 或 9:16)和背景风格。
- 03调研指定产品,使用真实的标识和产品界面素材。
- 04提供校验来源、计算素材哈希并控制交付的脚本。
- 05统一禁止霓虹、发光等视觉样式。
适用场景
- 借助 AI 智能体,根据脚本文案制作竖屏短视频(如 Reels 或 TikTok)。
- 为产品视频制作真实的 CLI 工具或编程智能体终端演示。
- 为版本发布等内容制作带荧光笔高亮的新闻风格卡片。
- 在使用 AI 助手构建的 Remotion 项目中加入统一的镜头运动效果。
快速上手
- 1
创建 Remotion 项目并安装技能
npx create-video@latest my-graphics - 2
进入项目文件夹
cd my-graphics - 3
将本仓库的技能安装到项目中
npx skills add liamrjohnston/remotion-motion-graphics-skill -y - 4
在 Remotion Studio 中预览图形
npx remotion studio
使用前须知
- 这些技能是给 AI 编程代理使用的指令,因此你需要 Claude Code 或 Codex 等代理以及一个 Remotion 项目。
- 每次构建前都要回答画幅和背景选择问题,每个请求都会多一步。
标签
常见问题
- remotion-motion-graphics-skill 是什么?
- 一套让 AI 编程智能体用 Remotion 制作动态图形与短视频片段的 Agent Skills。 这是一套面向 Claude Code、Codex、Cursor 等 AI 编程智能体的 Agent Skills,用于指导智能体基于 Remotion 制作完整的动态图形片段,涵盖动态文字、流程图、镜头运动、终端演示和编辑风格的高亮卡片。智能体在编写代码前会先确认输出格式(4:3 或 9:16)和背景风格,并对指定产品及其标识进行调研。
- remotion-motion-graphics-skill 可以免费使用吗?用的什么许可证?
- remotion-motion-graphics-skill 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- remotion-motion-graphics-skill 还在维护吗?
- 半年内有更新。remotion-motion-graphics-skill 最近一次提交是在 2026年7月24日。
- remotion-motion-graphics-skill 适合用来做什么?
- 借助 AI 智能体,根据脚本文案制作竖屏短视频(如 Reels 或 TikTok)。 为产品视频制作真实的 CLI 工具或编程智能体终端演示。 为版本发布等内容制作带荧光笔高亮的新闻风格卡片。 在使用 AI 助手构建的 Remotion 项目中加入统一的镜头运动效果。
- remotion-motion-graphics-skill 怎么安装和运行?
- 创建 Remotion 项目并安装技能: npx create-video@latest my-graphics 进入项目文件夹: cd my-graphics 将本仓库的技能安装到项目中: npx skills add liamrjohnston/remotion-motion-graphics-skill -y 在 Remotion Studio 中预览图形: npx remotion studio
- 在哪里获取 remotion-motion-graphics-skill?
- 源代码和安装说明在 GitHub 上:https://github.com/Liamrjohnston/remotion-motion-graphics-skill
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
一个 MIT 开源的 Claude Agent Skill,让 Claude 用 Remotion 通过代码创作和编辑动态图形视频。
一组 Agent Skills,帮助 Claude Code、Codex、Cursor 等 AI 编程助手按最佳实践开发 Remotion 视频项目。
让 Claude Code / Codex 制作口播解说视频的 agent skill,支持字级配音同步与 Remotion 渲染。
一组可安装的智能体技能,教 AI 编程助手制作动态图形、动画与视频。
一个让 Claude Code、Codex 等 agent 用代码直出商业级产品发布片的 skill,支持作曲配乐和在画面上指点修改。