用代码做视频

GitHub remotion-dev/skills ★ 4.7k

用 React 代码做动画视频：自动建 Remotion 项目、打开预览，需要时导出 MP4。

复制这句话，粘给 Claude Code

帮我用 https://github.com/remotion-dev/skills 安装这个仓库里的整套 Remotion skills，然后帮我做一个 15 秒的新品发布短视频

它会按这个仓库把 skill 装好，然后直接开始干活。把后半句换成你自己的任务即可。

想手动安装？

git clone --depth 1 https://github.com/remotion-dev/skills.git /tmp/remotion-skills
cp -r /tmp/remotion-skills/skills/* ~/.claude/skills/

它能帮你做什么

新建视频项目：自动检查当前目录，用官方脚手架建好 Remotion 项目并装好依赖，不会覆盖已有的重要文件
按视频的思路排版：每个画面突出一个重点，按分辨率给出标题、正文的最小字号和安全边距，避免做成网页的样子
多场景组织：多段落视频按场景拆分，需要 Tailwind 时单独配置
打开预览：启动 Remotion Studio 在浏览器里预览，还能在 Studio 里直接改元素并写回代码
导出成片：你明确要求时才渲染成视频文件

还可以这样说

帮我做一个 30 秒的 App 功能介绍视频，三个场景，每个场景讲一个功能
帮我做一个唱片店的宣传短片，竖屏 1080×1920
帮我做一个数据增长的动画视频，数字从 0 滚动到 100 万

使用前须知

需要 Node.js 和 Git；画面用 React 代码写，适合能看懂一点前端代码的人
它会用到同仓库的 remotion-markup、remotion-render 等 skill，所以一句话里让 agent 把整个仓库都装上
商用前请看一眼 Remotion 官网的许可条款，公司规模超过一定人数需要购买授权

查看 SKILL.md 原文

These are instructions for making a new Remotion project and composition.
If this is not the next task, see Remotion Best Practices

Scaffold a project

If a project already exists, skip this. Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.

Inspect the current folder, including hidden files, before choosing where to scaffold.

Empty folder

If it is empty, or contains only disposable operating-system metadata such as .DS_Store, create the project directly in the current folder. Remove only those disposable metadata files first, since create-video rejects non-empty folders. Do not treat all hidden files as disposable: files such as .env and directories such as .git are meaningful contents.

Scaffold in existing folder:

npx create-video@latest --yes --blank --no-tailwind .
npm i

Non-empty folder

If the current folder contains meaningful contents and no project already exists, scaffold into a new subfolder. Replace my-video with a suitable project name.

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

Designing a video

Keep the scaffold and add React Markup. Follow Remotion React Markup Best Practices and Video Layout Rules for video-first layout and text sizing guidance.

Is this a multi-scene video?

If this is a video with multiple subsequence videos, follow guidance at Multi-scene videos.

Interactivity Best Practices

By structuring the React Markup following Remotion Interactivity Best Practices, you allow the user to make edits in the Studio which write back to code.

TailwindCSS

If Tailwind is requested, see tailwind.md for using TailwindCSS in Remotion.

Open the preview

Start the preview server after building the composition:

npx remotion studio --no-open

This will start a long-running process and print the server URL for the preview.
If the server is already started, it will print the URL. If an in-harness browser is available, open it there. You can visit a specific composition by navigating to /[composition-id], for example http://localhost:3000/MapAnimation.

Render the video

Only render if the user explicitly asks for it.

npx remotion render

For more options, see Rendering.

Follow-up

The video creation process has finished. For follow-up prompts, use Remotion Best Practices

设计创意视频react