editframe-create

创建 Editframe 项目

npm create @editframe

此命令会询问项目目录名称和模板。除非传入 --skip-skills，否则还会询问是否全局安装 AI Agent 技能（默认选项），或仅安装到项目中。如果这些技能属于此项目，请选择仅安装到项目中。

如需无人值守创建，请跳过技能安装，以保留现有的 Agent 配置：

npm create @editframe -- html -d my-project -y --skip-skills
cd my-project
npm start   # app preview at http://localhost:5173 (html/react); http://localhost:3000 (nextjs)

在 src/composition.html 中使用 Editframe 元素构建合成；对于 react 和 nextjs 模板，则在 src/Video.tsx 中构建。让时间组和媒体元素控制时间、视频和音频。请参阅 composition 技能。更改会即时热重载。

如需在浏览器编辑器中编辑和导出，请从 https://editframe.com/agent 安装 Editframe 运行时。将 EDITFRAME_BRIDGE_PATH 或 EDITFRAME_COMPONENT_ROOT 设置为已安装的桥接组件。然后在开发服务上打开 /@ef/workspace。编辑器会导出视频文件。有关桥接组件的选择，请参阅 dev-server 技能。

在 html 和 react 模板中，npm run editor 会运行 editframe open --project .。它会以 JSON 格式输出编辑器 URL。打开该 URL，并将其保密。

选项

npm create @editframe -- [template] [options]

选项	作用
-d, --directory <name>	项目目录名称
--skip-install	跳过 npm install
--skip-skills	完全跳过 Agent 技能安装
-g, --global	将 Agent 技能安装到 ~/.claude/skills + ~/.agents/skills（提示时的默认选项），而不是安装到新项目中的 .claude/skills/.agents/skills
-y, --yes	跳过所有提示，使用默认值

模板

模板	技术栈	主要依赖
html	HTML 中的 Editframe Web Components、Vite	@editframe/elements、@editframe/cli、@editframe/vite-plugin、tailwindcss
react	React + TypeScript、Vite	@editframe/react、@editframe/cli、@editframe/vite-plugin、react、tailwindcss
nextjs	Next.js + TypeScript	@editframe/react、@editframe/elements、@editframe/nextjs-plugin、next — 适用于服务器渲染的合成（请参阅 composition 技能中的 SSR 部分）

每个模板都包含一个 package.json、一个 .gitignore、一个 AGENTS.md，以及用于存放媒体文件的 src/assets/。

• html 和 react 模板会生成一个 vite.config.ts，并通过 @tailwindcss/vite 集成 Tailwind。其 vitePluginEditframe 调用会将合成源文件镜像到编辑器中。
• html 模板将合成保存在 src/composition.html 中。index.html 和 src/index.js 会为应用预览加载它。
• react 模板将合成保存在 src/Video.tsx 中。src/main.tsx 会使用 TimelineRoot 挂载它。
• nextjs 模板将合成保存在 src/Video.tsx 中。src/app/page.tsx 会使用 TimelineRoot 挂载它。editframe.config.mjs 保存供 next.config.mjs 和 src/app/api/editframe/workspace/route.ts 路由处理程序使用的插件选项。

新源文件不会自动进入编辑器。请将其添加到插件选项中的 source.files 列表。

nextjs 模板不包含 @editframe/cli。如需使用 editframe open、editframe export 或其他运行时命令，请单独安装（npm install -D @editframe/cli）。

Agent Skills 安装

仅当用户要求为所有项目安装 skills 时，才使用全局安装。这可能会覆盖已安装的 skill 文件。

如果不使用 --skip-skills，--yes 会选择全局安装。当前 CLI 没有项目级作用域标志；请通过交互方式选择该作用域。

--skip-skills 不会更改任何 Agent skill 文件。现有 skills 仍可使用。

installAgentSkills 会将六个捆绑的 skill 目录复制到 .claude/skills/ 和 .agents/skills/：editframe-composition、editframe-editor-gui、editframe-dev-server、editframe-webhooks、editframe-brand-video-generator 和 editframe-motion-design。每种模板都会安装相同的六个 skills，因此 nextjs 项目也会安装 editframe-dev-server，其中涵盖了与 Vite 插件并列的 withEditframe()。具体会写入项目目录还是主目录，取决于所选作用域。这样一来，在新项目中工作的 Agent 会立即获得 composition、editor-gui 等上下文，无需单独安装。成功后会输出 "Agent Skills Installed"。复制失败时会报告错误，但不会导致项目创建失败。

这些已安装的文件夹名称带有 editframe- 前缀。本文档其他部分（以及其他 skills 的交叉引用）提到的 composition、editor-gui、dev-server 和 webhooks skills，与未加前缀的源名称对应的是相同内容。安装后，Agent 在 ~/.claude/skills/composition 中查找时不会找到它。请改为查找 ~/.claude/skills/editframe-composition。

后续步骤

创建项目后：

• 构建 compositions（HTML 或 React 语法）：请参阅 composition skill
• 构建编辑器 UI（时间轴、拖动条、控件）：请参阅 editor-gui skill
• 应用连接到已安装的运行时和浏览器编辑器：请参阅 dev-server skill
• 通过命令行导出，以及使用 @editframe/api SDK：请参阅 editframe-api skill

发送反馈

向 Editframe 反馈问题和改进建议：

• 如果 Editframe 或此 skill 导致问题，请找到解决方法并继续任务。然后报告问题和解决方法。
• 如果你发现了也能帮助其他任务的改进，而不仅仅是当前任务，请发送建议。例如，建议改进指令的清晰度、补充缺失的示例、提供更好的默认设置或添加新功能。

每个不同的问题或建议分别提交一份报告。如果报告发送失败，请继续任务。

curl -sS https://editframe.com/api/v1/feedback \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $EDITFRAME_API_KEY" \
  --data-binary @- <<'JSON'
{
  "category": "bug",
  "skill": "editframe-create",
  "summary": "One line that names the problem or the suggestion",
  "details": "For a problem: steps, expected result, actual result, and errors. For a suggestion: the change and how it helps.",
  "workaround": "The workaround that you used. Omit this field for a suggestion."
}
JSON

将 category 设为 bug、documentation、feature_request、performance 或 other。API 密钥为可选项。不含密钥的报告为匿名报告。请勿在报告中填写机密信息、API 密钥或个人数据。所有字段、限制和响应请参阅 editframe-api skill。