Back to Details

studio

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Remocn Studio hand-off

Remocn Studio 交接

Remocn Studio (https://remocn.studio) is a desktop app for macOS and Linux. It previews a Remotion project live, lets the user tune elements by hand, and exports mp4. It only opens folders it recognises, so a project goes through Prepare once and can then be Opened any time.
The helper script is 
${CLAUDE_SKILL_DIR}/scripts/studio.mjs
(outside Claude Code: 
scripts/studio.mjs
next to this file). It needs only Node and prints one JSON object per command. Run it from the Remotion project root, or pass the root as the first argument.
Remocn Studio（https://remocn.studio）是一款适用于 macOS 和 Linux 的桌面应用。它可以实时预览 Remotion 项目，让用户手动调整各个元素，并导出 mp4。它只能打开能够识别的文件夹，因此项目需要先经过一次 准备，之后便可随时 打开。
辅助脚本为 
${CLAUDE_SKILL_DIR}/scripts/studio.mjs
（在 Claude Code 之外运行时，路径为 
scripts/studio.mjs
，即与本文件同级）。该脚本只需要 Node，并且每条命令都会打印一个 JSON 对象。请在 Remotion 项目根目录中运行它，或者将项目根目录作为第一个参数传入。

Prepare

准备

bash
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" init <project-root> --name "<video or product name>"
What it does, and what to tell the user:
  • Writes 
    .remocn/project.json
    (Studio's project manifest: a fresh 
    projectId
    , 
    revision: 0
    , no brand) if it isn't there. An existing manifest is never touched: its 
    projectId
    is the project's identity in Studio.
  • Places Studio's scan at 
    src/videos/registry.tsx
    if missing, and wraps the root in the entry point as 
    registerRoot(withVideos(Root))
    . From then on every 
    src/videos/<slug>/index.tsx
    that exports 
    meta
    is a composition with id 
    <slug>
    , in Remotion Studio and in Remocn Studio alike. The user's own compositions in 
    Root.tsx
    keep working.
In a project the user already had, ask before running it: it edits their entry point (one import, one wrap) and adds two files.
If the result says 
ok: false
with an entry-point reason, the entry point doesn't call 
registerRoot(Root)
exactly once after its imports. Do the wrap by hand: add 
import { withVideos } from "<registry.specifier>";
using the 
specifier
from the result (it is relative to the entry point, e.g. 
../src/videos/registry
for 
remotion/index.ts
), and change the call to 
registerRoot(withVideos(Root))
. If that isn't possible, explain why to the user.
Then check 
npx remotion compositions
lists every video slug.
bash
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" init <project-root> --name "<video or product name>"
它执行的操作，以及需要告知用户的内容：
  • 如果 
    .remocn/project.json
    不存在，则创建该文件（Studio 的项目清单：包含全新的 
    projectId
    、
    revision: 0
    ，且不含品牌配置）。已有的清单绝不会被修改：其中的 
    projectId
    是项目在 Studio 中的唯一标识。
  • 如果 
    src/videos/registry.tsx
    不存在，则将 Studio 的扫描入口放在该位置，并在入口文件中将根组件包装为 
    registerRoot(withVideos(Root))
    。从那时起，每个导出 
    meta
    的 
    src/videos/<slug>/index.tsx
    都会成为一个 id 为 
    <slug>
    的 composition，在 Remotion Studio 和 Remocn Studio 中均是如此。用户自己在 
    Root.tsx
    中定义的 composition 仍然可以正常使用。
对于用户已有的项目，运行前应先征得用户同意：该操作会修改入口文件（添加一次 import 和一次包装），并新增两个文件。
如果结果显示 
ok: false
，且原因是入口文件有问题，则说明入口文件在完成导入后没有恰好调用一次 
registerRoot(Root)
。请手动完成包装：根据结果中的 
specifier
添加 
import { withVideos } from "<registry.specifier>";
（该路径相对于入口文件，例如 
remotion/index.ts
对应 
../src/videos/registry
），并将调用改为 
registerRoot(withVideos(Root))
。如果无法完成，请向用户说明原因。
然后检查 
npx remotion compositions
是否列出了每个视频 slug。

Open

打开

Only after the user says yes to opening the project in Studio:
bash
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" open <project-root>
Relay the 
message
from the result. By 
action
:
  • deep-link
    : Studio is opening the project and shows a confirmation dialog. Nothing else to do.
  • launched
    : Studio is starting but can't be told which folder to open yet. Tell the user to choose Open Folder (⌘O on macOS, Ctrl+O on Linux) and pick the project root, and give them the path.
  • not-installed
    : give the download link (https://remocn.studio) and the same Open Folder steps for after installing.
  • unsupported-platform
    : Studio doesn't run on this OS. The video still previews with 
    npx remotion studio
    and renders with 
    npx remotion render <slug>
    .
If the result says the manifest is missing, run Prepare first.
To check whether Studio is installed without opening anything, run the 
detect
command.
仅在用户确认要在 Studio 中打开项目后运行：
bash
node "${CLAUDE_SKILL_DIR}/scripts/studio.mjs" open <project-root>
请转述结果中的 
message
。根据 
action
采取以下操作：
  • deep-link
    ：Studio 正在打开项目，并会显示确认对话框。无需执行其他操作。
  • launched
    ：Studio 正在启动，但目前无法告知它要打开哪个文件夹。请提示用户选择 打开文件夹（macOS 为 ⌘O，Linux 为 Ctrl+O），然后选择项目根目录，并向用户提供该路径。
  • not-installed
    ：提供下载链接（https://remocn.studio），并提供安装后使用的相同“打开文件夹”步骤。
  • unsupported-platform
    ：Studio 无法在此操作系统上运行。仍可使用 
    npx remotion studio
    预览视频，并使用 
    npx remotion render <slug>
    渲染视频。
如果结果提示清单文件缺失，请先运行 准备。
如需在不打开任何内容的情况下检查 Studio 是否已安装，请运行 
detect
命令。

Don'ts

禁止事项

  • Don't create 
    .remocn/project.json
    by hand or copy one from another project. Two projects with the same 
    projectId
    collide in Studio, and it refuses the second.
  • Don't move videos out of 
    src/videos/<slug>/
    . Studio identifies a video by its folder name.
  • In claude.ai or ChatGPT there is no local project to hand off. Point the user to a coding agent (Claude Code, Codex) with this plugin, or to Remocn Studio's own templates.
  • 不要手动创建 
    .remocn/project.json
    ，也不要从其他项目复制该文件。两个具有相同 
    projectId
    的项目会在 Studio 中发生冲突，Studio 将拒绝打开第二个项目。
  • 不要将视频移出 
    src/videos/<slug>/
    。Studio 通过文件夹名称识别视频。
  • 在 claude.ai 或 ChatGPT 中，没有可供交接的本地项目。请引导用户使用安装了此插件的 coding agent（Claude Code、Codex），或使用 Remocn Studio 自带的模板。