图像与视频

用 Open Design + Remotion 做一个会动的知识卡片 Skill

🐘 用 Open Design + Remotion 做一个会动的知识卡片 Skill

2026-06-12飞书同步约 32 分钟

来自视频：【OpenDesign+Remotion】从0到1制作动态知识卡片全教程！

文档插图

🐘 用 Open Design + Remotion 做一个会动的知识卡片 Skill

——从零搭建，保姆级配套手册

这份手册是什么？这是视频教程《用 Open Design 和 Remotion，做一个会动的知识卡片 Skill》的配套粉丝资料包。视频里 2 小时跑通的全流程，我把每一个知识点、每一条避坑经验、每一个官方链接，全部整理成了你能照着一步一步做出来的操作手册。无论你是第一次听说 Open Design，还是从来没碰过 Remotion，只要跟着走，你就能做出来。

这份手册能帮你做到什么？

你将从一个空文件夹开始，最终得到一套长期可复用的知识卡片生产系统：

你说一句话 → AI 问你几个选择题 → 静态卡片自动生成 → 动效视频自动渲染 → 成品躺进你的文件夹

整个过程用到的工具全部开源、零费用。成品可以直接丢进 Premiere Pro / Final Cut Pro / 达芬奇等任何主流剪辑软件。

而且这不是一次性的——你搭好之后，以后每次出新卡片、新视频，几十秒就能搞定。

全流程一览：跟大象装冰箱一样简单

整个教程的逻辑，其实就跟"把大象装进冰箱"一模一样，只有三大步：

┌─────────────────────────────────────────────────────────┐
│                                                         │
│   第一步 · 打开冰箱门                                     │
│   → 项目准备：建文件夹、装工具、写规范                       │
│   │                                                     │
│   第二步 · 把大象放进去                                    │
│   → 出静态卡片：用 Open Design 生成知识卡片图片              │
│   │                                                     │
│   第三步 · 关上冰箱门                                     │
│   → 出动效视频：用 Remotion 渲染透明通道 MOV 视频            │
│                                                         │
└─────────────────────────────────────────────────────────┘

以后你遇到河马、长颈鹿、任何内容，都是同样的操作。

下面我们正式开始。

第一步 · 打开冰箱门：项目准备

这一步的目标：搭好工作环境，让 AI 认识你要的视觉风格，安装好所有工具。完成后你将拥有：一个干净的项目文件夹 + 量化的风格规范 + 就绪的 Open Design 和 Remotion 环境。

1.1 创建你的工作文件夹

在你的电脑上，找一个你喜欢的位置，新建一个空文件夹。名字随你取，比如 card、my-cards、nook-card-workspace 都可以。

📁 card/               ← 你的项目根目录，接下来所有东西都在这里面

为什么要专门建文件夹？一个项目的所有东西都应该放在一起。AI 助手需要一个明确的"工作路径"，才能稳定地读取规范、输出成果。

1.2 准备一张风格参考图

用 AI（比如 Midjourney、DALL·E、或者任何你喜欢的工具）生成一张你觉得好看的卡片样图。不用太完美，它只是一个"风格种子"。

把这张图拖进你的项目文件夹。

📌【请在此处查看风格参考图样例（项目根目录下的 demo.png）】

文档插图

1.3 让 AI 识别并量化你的风格

打开你的 AI 助手（如国产首选 Agent 工具 Trae、Kimi CLI、Kiro CLI、通义灵码，或国外的Codex、Claude Code 等），把项目文件夹路径告诉它，让它去看你的参考图。

你可以这样说：

我的项目路径是 ./card，里面有一张参考图片，请你看一下，告诉我它是什么风格的。

AI 会自动分析图片，给出风格名称和视觉特征总结。

🔑 关键知识点：为什么要"量化"风格？这是整个教程中最重要的一个认知。当你对 AI 说"高级一点"、"有质感一点"——这等于设计师最怕听到的"五彩斑斓的黑"。 AI 听不懂"红色再深一点点"，它只能听懂"这个圆角矩形色值是 E03A10 "。你的风格文档写得越量化，今后出图就越稳定。这种"把人的审美翻译成机器读得懂的规则"的能力，是不管技术怎么发展都不会过期的核心竞争力。

1.4 让 AI 建立项目核心文档

现在告诉 AI：

把这个文件夹设为我们的工作路径。
我要在这里搭建一套长期用于制作知识卡片的工作流。
请帮我新建两份笔记：
1. 总控笔记：记录我们交互的全过程 and 所有约定
2. 风格规范文档：把刚才识别的风格，写成量化的、任何大模型都读得懂的技术规范

AI 会为你生成：

文件	作用	给谁看的？
00 总控笔记.md	项目的"黑匣子"，记录所有决策 and 迭代历史	给 AI 看，防止它忘记之前的约定
01 风格规范.md	把视觉审美翻译成量化参数（色值、描边、阴影等）	给 AI 和设计工具看，确保产出稳定

1.5 审查并修正风格规范

千万不要直接跳过这一步。 AI 第一次写的风格规范几乎一定有问题。

常见问题：

❌ 把参考图的具体尺寸（如 1546×1740）也写死了——但你以后要做横屏卡、竖屏卡、方形卡
❌ 只有主观描述（"厚实的阴影"）——但没有可执行的数值

你需要给 AI 反馈，比如：

三个问题需要修改：
1. 规范必须让别的任何大模型也能看懂，不只是你
2. 卡片比例不能写死，要支持横屏竖屏方形，只固定"风格"不固定"尺寸"
3. 阴影要硬一点，边缘要锐利

AI 会理解你的意图——你要做的不是一张图，而是一套可迁移的风格系统。

1.6 量化风格规范长什么样？

以本项目的默认风格"触感软拟态卡片风"为例，一份合格的风格规范至少要包含以下内容：

📌【请在此处查看触感软拟态卡片默认风格效果样例】

文档插图

设计 Token（给 AI 和设计工具读的结构化参数）

{
  "style_name": "tactile_soft_skeuomorphic_card",
  "colors": {
    "background": "#F7F9F8",
    "card_surface": "#FFFFFD",
    "card_dot": "#DADFDA",
    "ink": "#010101",
    "shadow_hard": "#0B0B0B",
    "yellow_action": "#FDC703",
    "red_action": "#E03A10",
    "mac_red": "#F7524E",
    "mac_yellow": "#FDC528",
    "mac_green": "#28C959"
  },
  "stroke": {
    "outer_ratio": 0.010,
    "button_ratio": 0.0065,
    "color": "#010101"
  },
  "shadow": {
    "type": "hard",
    "blur_ratio": 0.000,
    "spread_ratio": 0.000,
    "opacity": 0.90
  },
  "surface_pattern": {
    "type": "subtle_dot_grid",
    "opacity": 0.055
  },
  "typography": {
    "font_family_fallback": ["Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei UI"],
    "weight_primary": 900
  }
}

CSS 变量写法（可直接用于 HTML/CSS 渲染）

:root {
  --card-bg: #F7F9F8;
  --card-surface: #FFFFFD;
  --card-ink: #010101;
  --card-shadow: #0B0B0B;
  --card-yellow: #FDC703;
  --card-red: #E03A10;
  --stroke-outer: clamp(10px, 1vw, 18px);
  --radius-card: clamp(44px, 5.5vw, 95px);
  --shadow-hard-card: 40px 46px 0 #0B0B0B;
}

动态布局原则

固定的是视觉基因，不是固定坐标
主卡片必须占画布宽度 72%~88%
内容区采用纵向栅格：顶部窗口区 → 主标题区 → 正文区 → 行动按钮区
文字多时优先增加卡片高度，不要削弱描边、阴影和按钮厚度
画面至少保留两个"风格锚点"（如粗黑描边 + 硬阴影 + 点阵底纹）

禁止项（同样重要）

❌ 扁平插画风
❌ 玻璃拟态（透明磨砂、大面积模糊）
❌ 低对比灰白软拟态
❌ 赛博霓虹风
❌ 复古纸张拼贴
❌ 极简细线 UI
❌ 金属、皮革、木纹等过度真实材质
❌ 只有文字，没有实体按钮/窗口隐喻的普通海报

生成后质检清单

每张卡片生成后，对照检查：

主卡片描边是否 13-18px 的粗度？
阴影模糊半径是否接近 0px（硬阴影）？
卡片表面是否有低可见度点阵底纹？
黄色按钮是否接近 #FDC703 ？
中文是否为超粗黑体？有没有文字溢出？
整体看起来像"可点击的软件界面卡片"，还是普通平面海报？

1.7 扩展项目文档结构

你的风格规范做好后，告诉 AI 继续完善项目架构：

文档要规范化。
skill 以后怎么触发、怎么交互，都需要写清楚。
我以后还会增加更多风格，规范应该具备可扩展性。

AI 会自动帮你新建更多配套文件：

文件	作用
02 卡片生产工作流规范.md	定义 AI 与用户交互的标准流程、确认清单
03 风格库索引.md	管理多套风格的注册表
04 OpenDesign Skill 接入规范.md	记录 Open Design 对 Skill 的技术要求

这些文件看着多，但绝大多数都是给 AI 看的，你不用自己写，只需要审阅和提反馈。

1.8 封装成 Skill 架构

Skill 是什么？简单说就是——一个可以被反复调用的"AI 技能配方"。

你告诉 AI 你的 Skill 命名规则（比如你叫 nook-card），让它把架构搭出来：

skill 统一用 nook 前缀命名，这个 skill 叫 nook-card。
请把 skill 的目录架构先搭出来。

最终的 Skill 目录结构如下：

nook-card/
├── SKILL.md                      ← 技能入口：触发词、交互逻辑、功能声明
├── DESIGN.md                     ← 默认设计系统摘要
├── example.html                  ← 最小真实预览样例
├── assets/                       ← 模板和静态资源
│   ├── templates/
│   │   └── card-base.html
│   └── samples/
│       └── demo.png
├── references/                   ← 规范参考库（核心内容都在这里）
│   ├── style-registry.md         ← 风格注册表
│   ├── motion-registry.md        ← 动效注册表
│   ├── interaction-protocol.md   ← 交互协议：AI 和用户怎么问答
│   ├── global-production-rules.md← 全局生产规则
│   ├── workflow.md               ← 工作流详细说明
│   ├── checklist.md              ← 质检清单
│   ├── card-spec.schema.json     ← 静态卡片交接协议
│   ├── remotion-handoff.schema.json ← 视频交接协议
│   ├── opendesign-card-contract.md  ← OpenDesign 适配说明
│   └── styles/                   ← 各套风格的量化配置
│       ├── tactile-soft-skeuomorphic-card.md
│       ├── glassmorphism-layered-card.md
│       ├── pop-art-comic-card.md
│       └── analog-journal-collage-card.md
└── tests/
    └── basic.prompt              ← 测试用例

✅ 到这一步你已经拥有了：项目工作文件夹、量化风格规范、完整的 Skill 框架。接下来要做的是——确保你的电脑能跑起来 Open Design 和 Remotion。

1.9 安装 Open Design

Open Design 是一个开源的本地设计生成工具，相当于 Claude Design 的平替。除了知识卡片，你还能用它做网站、PPT 等等。

第 1 步：下载安装包

前往 Open Design 官网下载页：

官网：https://open-design.ai
GitHub 仓库：https://github.com/nexu-io/open-design

找到对应你操作系统的安装包：

Windows：下载 .exe 安装文件
macOS：下载 .dmg 安装文件

第 2 步：安装

一路点"下一步"就行，没有任何复杂配置。

第 3 步：首次启动与配置

打开 Open Design 应用
（可选）在设置中切换为中文界面
重要：在设置中，将 Agent 绑定为你当前使用的 AI 助手（如字节跳动推出的国产开发工具Trae，国内流行的Kimi CLI、Kiro CLI，或经典的Codex、Claude Code 等）

大部分时候你不需要手动操作 Open Design 的界面——AI 会替你驱动它。

第 4 步：告诉 AI 你装好了

Open Design 已经安装好了，请验证一下环境。

AI 会自动检测安装路径，确认 Open Design 进程是否在运行。

1.10 安装 Remotion

Remotion 是一个强大的开源工具——用 React + CSS 写视频，然后在命令行里渲染成真正的视频文件。

第 1 步：确认基础环境

你的电脑需要已经安装了 Node.js 和一个包管理器（npm 或 pnpm）。如果没有，先去安装：

工具	下载地址	建议版本
Node.js	https://nodejs.org	LTS 最新版即可
pnpm （推荐）	安装 Node.js 后运行 corepack enable 激活	跟随 Node.js 自带版本
Google Chrome	https://www.google.com/chrome	最新稳定版

⚠️ 为什么需要 Chrome？ Remotion 在后台渲染视频时，需要启动一个"无头浏览器"来运行 React 组件。Chrome 是最稳定的选择。

第 2 步：让 AI 自动安装

你不需要手动敲安装命令。把 Remotion 的官方链接贴给 AI，让它自己处理：

这是 Remotion 的项目地址：https://github.com/remotion-dev/remotion
请帮我在当前项目中安装 Remotion 环境，然后验证是否可用。

AI 会自动在你的项目文件夹中执行安装（pnpm install remotion @remotion/cli），并运行环境检查。

第 3 步：处理 Chrome 路径问题

这是最常见的坑。 如果 AI 报错说找不到浏览器，或者报 ProtocolError: Target.createTarget: Not supported——

原因是：Remotion 默认在 PATH 中查找 Chrome，但你的系统可能没有把 Chrome 加入 PATH；或者它错误地找到了 Open Design 内置的 Electron 浏览器。

解决方法：在渲染命令中显式指定 Chrome 的安装路径。

Chrome 通常装在这里：

Windows：C:\Program Files\Google\Chrome\Application\chrome.exe
macOS：/Applications/Google Chrome.app/Contents/MacOS/Google Chrome

告诉 AI：

系统的 Chrome 浏览器路径是：（填入你的实际路径）
以后渲染 Remotion 视频时，请用这个路径。

1.11 部署 Skill 到 Open Design

让 AI 把你写好的 nook-card Skill 文件夹，复制到 Open Design 的技能目录中：

请把 nook-card skill 部署到 Open Design 的 skills 目录下。

部署完成后，在 Open Design 应用中：

打开设置 →技能（Skills）
搜索 nook-card
确认能看到它 ✅

如果看不到，重启一下 Open Design 应用。

✅ 到这一步你已经拥有了：项目文件夹 + 风格规范 + Skill 架构 + Open Design 就绪 + Remotion 就绪。 🎉 恭喜，冰箱门已经打开了！准备把大象放进去吧。

1.12 与 AI 交互的几个通用技巧

在整个过程中，你会频繁和 AI 对话。这里有几个提高效率的小技巧：

场景	技巧
AI 开始答非所问、越说越远	按下快捷键重新编辑，重新发送修改后的提示
AI 卡在某个下载/安装环节一直重试	不要让它无限重试。直接贴官网链接给它，让它读官方文档找解决方案
AI 自作主张跳过了确认步骤	明确告诉它："你不能跳过确认。每次触发 skill，必须先问我选择题"
想重新开始一段对话	清理上下文或开启新会话，同时 @ 项目文件夹路径让 AI 重新读取规范

第二步 · 放进大象：出静态卡片

这一步的目标：用 Open Design 生成高质量的知识卡片图片。完成后你将拥有：可直接发布的静态卡片 + 可供后续动效使用的透明卡片资产。

2.1 触发你的 Skill

用自然语言告诉 AI 你要做什么卡片：

使用 nook-card，帮我做一组关于"大象放进冰箱三步"的知识卡片。

或者更实际的：

使用 nook-card，做一组关于 PARA 文件分类方法的知识卡片。

2.2 AI 会问你选择题（不是开放题）

触发 Skill 后，AI 不会直接冲上去出图。它会一步一步问你选择题来确认需求。

下面是标准的确认流程，一共确认 7 项：

确认项总览

序号	确认项	说明	默认值
①	生产意图	只做静态卡？还是后续要做动效视频？	只做静态卡
②	舞台画幅	如果要做视频，视频的画面尺寸	横屏 1920×1080
③	卡片风格	使用哪套视觉风格	触感软拟态卡片风
④	卡片数量与拆卡方式	内容拆成几张卡，按步骤/分类/章节等方式拆	根据内容判断
⑤	卡片自身比例	卡片本身的宽高比（可以和视频画幅不同！）	根据用途判断
⑥	输出层级	只要预览图？只要透明资产？还是都要？	都要
⑦	文案与信息层级	哪句话最大、哪些做按钮、哪些做标签	AI 先建议，你确认

🔑 关键知识点：卡片比例 ≠ 视频画幅这是很多人会搞混的地方。比如你的视频是 16:9 横屏，但卡片本身可以是 3:4 竖卡——竖卡在横屏视频里反而更有视觉张力。所以 AI 会分开问这两个尺寸，不要以为它在重复提问。

🔑 关键知识点：结构化内容必须先拆卡 "PARA 方法"有 4 个分类，就应该拆成 4 张卡。"大象放冰箱"有 3 步，就应该拆成 3 张卡。不要把所有内容压进一张"总览卡"——那样文字会很密，动效也不好做。

2.3 理解"透明资产"和"预览图"的区别

这个概念非常重要，直接影响你后续能不能顺利做动效视频：

输出类型	英文标识	长什么样	用途
透明资产	transparent asset	卡片本体 + 阴影，四周背景完全透明	给 Remotion 或剪辑软件做叠加合成用
预览图	preview composite	卡片 + 漂亮的背景，完整的一张图	给人眼看效果、检查排版用

下面是透明卡片资产与带背景预览图的直观对比：

📌【请在此处查看透明卡片资产 (card-01-transparent.png)】

文档插图

📌【请在此处查看带背景预览图 (card-01-preview.png)】

文档插图

如果你后续要做动效视频，一定需要透明资产。否则视频里卡片周围会带着一块白色/灰色的"大补丁"，根本没法和其他素材合成。

2.4 静态卡片常见的坑与解法

坑 1：文字遮挡和按钮重叠

原因：AI 第一次写的 HTML/CSS 模板，经常把顶部三色点 and 底部按钮用 position: absolute 固定在边缘。当文案变多，中间的文字就会冲出去、和按钮叠在一起。

解法：告诉 AI 改用 CSS Grid 弹性布局——

.card-container {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* 顶部固定高度，中间弹性，底部自适应 */
  height: 100%;
}

这样不管文字多少，各个区域都会在自己的空间内安全排布。

坑 2：字号使用了 viewport 单位

如果字号写成 3vw 这样的 viewport 单位，在不同预览窗口大小下文字会忽大忽小，容易撑爆布局。建议使用 clamp() 函数限定范围。

坑 3：不满意怎么办？

不要追求一次出完美图。先跑通流程，再回来迭代：

我不满意这个版本。
问题是：文字和按钮重叠了，编号位置太靠左。
请修改模板后重新生成。

AI 会定位问题、修改模板、重新生成。正常情况下 2-3 轮迭代就能稳定下来。

2.5 成果输出到哪里？

所有静态卡片统一输出到项目文件夹下的 outputs/ 目录：

outputs/
├── cards/                    ← 静态卡片
│   ├── para-method/          ← 每个主题一个子文件夹
│   │   ├── card-01-transparent.png
│   │   ├── card-01-preview.png
│   │   ├── card-02-transparent.png
│   │   └── ...
│   └── elephant-fridge/
│       └── ...
└── videos/                   ← 动效视频（第三步会用到）
    └── ...

✅ 到这一步你已经拥有了：符合风格规范的静态知识卡片，包括透明资产 and 预览图。 🎉 如果你只需要静态卡片（发公众号、发小红书），到这里就完成了！如果你还想让卡片动起来——继续往下看。

📌【请在此处查看生成的静态卡片输出示例（以 PARA 方法分类卡片为例）】

文档插图

第三步 · 关上冰箱门：出动效视频

这一步的目标：用 Remotion 把静态卡片渲染成带透明通道的动效视频。完成后你将拥有：可直接导入 Premiere Pro / Final Cut Pro / 达芬奇的 MOV 视频文件。

3.1 为什么要做透明通道视频？

普通视频有一个固定的背景色（白色、黑色或渐变）。透明通道视频没有背景——卡片就像一张"贴纸"，你可以在剪辑软件中把它叠加到任何画面上。

这就是为什么我们在第二步要输出"透明资产"——Remotion 读取这些透明 PNG，加上动画效果，渲染出来的视频自然也是透明的。

3.2 确认动效风格

静态卡片满意后，AI 才会问你是否进入动效阶段（不会提前混在一起问）。

你只需要告诉它两件事：

用哪套动效
有什么具体要求

3.3 四套内置动效预设

nook-card Skill 内置了 4 套经过调试的动效预设：

① `pop_breathe`（默认）—— 底部弹出 + 呼吸感

适用场景：单张或少量卡片（1~6 张）、封面展示、重点提示

动画效果：

卡片从画面底部快速弹出，带物理回弹（overshoot）
弹出后保持在画面中央
持续轻柔的"呼吸"缩放（scale 振幅 0.4%~1.0%）
多张卡片时依次弹出，最终形成组合排列

多张卡片布局规则：

1 张：居中
2 张：左右分列或微重叠
3 张：主卡居中，副卡偏后两侧
4 张：扇形或 2×2
5~6 张：网格或弧形排列

📌【请在此处查看 pop_breathe 动态呼吸效果预览（以马斯洛需求理论为例）】

文档插图

② `timeline_arrow_reveal` —— 时间轴箭头生长

适用场景：步骤流程、教程拆解、历史进程、路线图

动画效果：

一条箭头/路径从画面一侧开始生长（可横向、纵向、或波浪线）
每当箭头到达一个节点位置，对应的卡片从节点旁弹出
卡片在路径两侧交替出现
箭头到达终点后，整体画面保持微弱的呼吸和路径流动感

关键规则：

箭头没到的位置，卡片不能提前出现
箭头必须表达"顺序"，不能只是装饰

📌【请在此处查看 timeline_arrow_reveal 动画效果预览（以大象装冰箱三步为例）】

文档插图

③ `portrait_carousel_focus` —— 竖卡走马灯聚焦

适用场景：多张竖版卡片连续展示、系列观点、章节列表

动画效果：

竖构图卡片围绕中心做 3D 环形旋转
正对观众的卡片清晰亮起（100% 不透明、原始大小）
两侧 and 后方的卡片缩小（54%~74%）、模糊（4~14px）、半透明（28%~58% 不透明度）
走马灯可以逐张步进（配合口播节奏），也可以缓慢循环

关键规则：

正面朝向观众的卡片绝对不能模糊
文字旋转角度不能大到无法阅读

📌【请在此处查看 portrait_carousel_focus 走马灯动态聚焦效果预览（以 PARA 方法分类为例）】

文档插图

④ `dynamic_compare_bars` —— 动态对比柱状图

适用场景：数据对比、年份变化、排名、增长趋势

动画效果：

柱状图从基线一根一根向上拔起
数字标签跟随柱子高度实时跳动计数
关键柱（最大/最新/用户指定）带高亮脉冲
保持轻微呼吸和摄像机漂移

关键规则：

数据值不能造假
动画速度要配合口播节奏，让观众看得清对比

3.4 动效的全局黄金规则

无论使用哪套动效预设，以下规则永远生效：

规则	说明
绝不静止	任何时候画面都不能出现"绝对静止"。即使卡片已经弹出到位，也要保持轻柔的呼吸感、微弱晃动、阴影位移或摄像机漂移
时长跟口播	如果你有旁白/口播，视频时长必须跟随口播节奏，不能机械套用固定秒数
文字要可读	动画过程中不要过于剧烈地移动含有密集文字的卡片
摄像机要克制	允许轻微透视/摄像机运动（ rotateX ±4° 、 rotateY ±6° ），但不能让文字变形到看不清

3.5 开始渲染

确认动效后，告诉 AI：

按默认动效（pop_breathe），开始。

或者指定动效和时长：

用 timeline_arrow_reveal 动效，时长 8 秒。

AI 会：

编写 Remotion 的 React 动效组件
读取你的透明卡片资产
调用 Remotion CLI 渲染视频
把成品输出到 outputs/videos// 下

3.6 为什么一定要 MOV，而不是 WebM？

格式	透明通道	Premiere Pro	Final Cut	达芬奇	文件大小
MOV (ProRes 4444)	✅ 完美	✅ 原生支持	✅ 原生支持	✅ 原生支持	较大
WebM (VP8/VP9)	✅ 有	⚠️ 不稳定	❌ 不支持	⚠️ 需转码	较小

结论：主交付格式必须是MOV / ProRes 4444 / alpha。WebM 只能作为快速预览用。

Remotion 渲染 MOV 的完整命令参数

npx remotion render  .mov \
  --codec=prores \
  --prores-profile=4444 \
  --pixel-format=yuva444p10le \
  --image-format=png \
  --browser-executable=""

可选：额外导出 WebM 预览版

npx remotion render  .webm \
  --codec=vp8 \
  --pixel-format=yuva420p \
  --image-format=png \
  --browser-executable=""

用 ffprobe 验证输出

渲染完成后，可以用 ffprobe 确认输出是否正确：

ffprobe -v quiet -show_streams .mov

你应该看到：

codec_name=prores
profile=4
pix_fmt=yuva444p12le    ← 带 'a' 表示有 alpha 通道

3.7 成果目录结构

outputs/
├── cards/
│   └── elephant-fridge/
│       ├── card-01-transparent.png    ← 透明卡片资产
│       ├── card-01-preview.png        ← 带背景预览图
│       ├── card-02-transparent.png
│       ├── card-02-preview.png
│       ├── card-03-transparent.png
│       └── card-03-preview.png
└── videos/
    └── elephant-fridge/
        ├── elephant-fridge.mov        ← 主交付：MOV ProRes 4444 + Alpha
        ├── elephant-fridge.webm       ← 可选预览
        ├── preview-frame.png          ← 视频预览帧
        └── remotion-handoff.json      ← Remotion 动效交接协议

✅ 恭喜！到这一步你已经得到了： ✅ 精美的静态知识卡片（透明 + 带背景两版） ✅ 带透明通道的 MOV 动效视频 ✅ 可直接导入 Premiere Pro / Final Cut Pro / 达芬奇 🎉 冰箱门关上了！大象已经稳稳当当在里面了！

📌【请在此处查看 Remotion 动效视频最终渲染画面效果】

文档插图

附录 A · 4 套卡片风格速查表

nook-card 目前内置 4 套风格。你可以直接使用，也可以按照"新增风格流程"自己扩展。

风格 ID	中文名	视觉关键词	适合什么内容
tactile soft skeuomorphic card	触感软拟态卡片风（默认）	粗黑描边、硬阴影、近白点阵底纹、macOS 三色点、实体按钮	教程封面、软件工具说明、带按钮的行动卡
glassmorphism layered card	毛玻璃层叠卡片风	半透明面板、18 36px 背景模糊、亮边描边、柔和渐变底	科技感封面、抽象概念解释、产品说明
pop art comic card	波普漫画卡片风	高饱和黄/青/品红、6 14px 粗描边、半调网点、爆炸气泡	强观点、社媒传播图、活动提示
analog journal collage card	手账拼贴卡片风	纸张质感、胶带、贴纸、印章、手写标签、轻微错位拼贴	个人方法论、旅行笔记、课程复盘

如何新增你自己的风格？

准备 1~3 张参考图
让 AI 提取视觉 DNA（色彩、描边、阴影、字体、图形元素、禁止项）
AI 会自动生成量化的风格规范文档，放入 references/styles/ 下
在 style-registry.md 中登记新风格
用两个不同内容密度的卡片测试（短标题 vs 长标题），确保它们"看起来像一家人"

下面是不同卡片风格的实际生成效果参考：

📌【请在此处查看触感软拟态风格（左）与波普漫画风格（右）效果对比】

文档插图

📌【请在此处查看手账拼贴卡片风格渲染效果】

文档插图

📌【请在此处查看波普漫画卡片风格渲染效果】

文档插图

附录 B · Skill 交互协议：AI 怎么问你

这套 Skill 的交互原则是**"选择题，不是论述题"**。

AI 每次都会给你选项，你选就行——不需要写长段描述。

交互流程图

触发 nook-card
     │
     ▼
① 生产意图？─── 只做静态卡 ──→ 跳过②，直接进③
     │
     └── 后续要动效 ──→ 进②
     ▼
② 舞台画幅？─── 横屏 1920×1080（默认）
     │          └── 竖屏 1080×1920
     ▼
③ 卡片风格？─── 触感软拟态（默认）
     │          ├── 毛玻璃层叠
     │          ├── 波普漫画
     │          └── 手账拼贴
     ▼
④ 卡片数量 & 拆卡方式？
     ▼
⑤ 卡片自身比例？
     ▼
⑥ 输出层级？─── 透明资产 + 预览图（默认）
     ▼
⑦ 确认文案与信息层级
     ▼
──── 生成静态卡片 ────
     ▼
   满意吗？─── 不满意 → 反馈修改 → 重新生成
     │
     └── 满意
     ▼
⑧ 是否进入动效？（只在静态确认后才问）
     ▼
⑨ 选择动效预设 & 具体要求
     ▼
──── 渲染动效视频 ────
     ▼
   完成 🎉

附录 C · 核心数据交接协议

在 nook-card 的内部，静态卡片和动效视频之间通过两个 JSON 文件做"交接"：

`card-spec.json`（静态卡片 → 动效阶段的桥梁）

记录每张卡片的内容结构、风格 Token、布局参数和资产路径。

`remotion-handoff.json`（动效阶段的执行清单）

字段	说明
scene id	分镜 ID
image asset	透明卡片资产路径
duration	分镜时长（有口播时跟随口播）
animation	入场、停留、强调、退场
voiceover	旁白文本
subtitle	字幕文本

这些 JSON 文件是 AI 自动生成的，你通常不需要手动编辑它们。

附录 D · 所有官方链接汇总

工具	用途	官方链接
Open Design	静态卡片设计生成	官网：open design.ai
		GitHub：github.com/nexu io/open design
		Skill 文档：opendesigner.io/skills
Remotion	视频渲染引擎	官网：remotion.dev
		文档：remotion.dev/docs
		GitHub：github.com/remotion dev/remotion
nook card Skill	本教程配套的知识卡片 Skill	GitHub：github.com/captain nook/nook card
Node.js	JavaScript 运行时	nodejs.org
Obsidian	知识库 / 笔记工具	obsidian.md
Google Chrome	Remotion 渲染依赖的浏览器	google.com/chrome

附录 E · 常见问题 FAQ

Q：我必须用 Codex 吗？别的 AI 助手可以吗？

A： Codex 只是视频中演示用的。你可以使用任何支持 Skill / Agent 协议的 AI 助手。对于国内观众，我们强烈推荐使用非常方便且完全汉化的国产 Agent 工具，比如字节跳动的 Trae、月之暗面的 Kimi CLI / Kimi Copilot、Kiro CLI / Kiro Agent、阿里通义灵码或腾讯云 AI 代码助手，以及经典的Codex、Claude Code 等。核心在于 Skill 的规范文件（如 SKILL.md），只要把相应的技能文件夹或规范贴给 Agent，任何主流 Agent 都能稳定读取和执行。

Q：Open Design 只能做知识卡片吗？

A：不是。Open Design 是一个通用的设计生成工具，知识卡片只是它的一个使用场景。你还可以用它设计网站原型、PPT、社媒图等等。

Q：我没有编程基础，能跟着做吗？

A：可以。整个流程中你不需要手写任何代码。所有的安装命令、渲染命令、代码模板都是 AI 帮你写的。你只需要和 AI 对话、做选择题、看效果、提反馈。

Q：渲染出来的 MOV 文件很大怎么办？

A： ProRes 4444 本身就是高质量无损格式，文件大是正常的。导入剪辑软件后，最终导出时剪辑软件会帮你压缩。如果只是快速预览，可以额外导出一份 WebM 小文件。

Q：我可以自己加新的动效预设吗？

A：可以。在 references/motion-registry.md 中按照现有格式添加新预设即可。建议活跃预设数量控制在 6~8 个以内。

Q：我想自己扩展风格或动效，但不知道怎么描述？

A：最好的方式是找 1~3 张参考图，贴给 AI，让它帮你提取视觉 DNA 并生成量化规范。你负责"觉得好不好看"，AI 负责"把好看翻译成规则"。

感谢你看到这里。你已经超过 99% 的人了。建议今天就去跑通你的第一张卡片。从一个空文件夹，到一套完整的知识卡片生产系统，也就 2 个小时。而以后每次使用它，几十秒就能出一条成品。所有配套 of Skill 源码、风格规范、动效预设，都已经开源在 GitHub 上了。还有问题可以在留言区交流，或者直接给我发消息，我都会回。

文档插图

🐘 用 Open Design + Remotion 做一个会动的知识卡片 Skill

——从零搭建，保姆级配套手册

这份手册能帮你做到什么？

全流程一览：跟大象装冰箱一样简单

第一步 · 打开冰箱门：项目准备

1.1 创建你的工作文件夹

1.2 准备一张风格参考图

1.3 让 AI 识别并量化你的风格

1.4 让 AI 建立项目核心文档

1.5 审查并修正风格规范

1.6 量化风格规范长什么样？

设计 Token（给 AI 和设计工具读的结构化参数）

CSS 变量写法（可直接用于 HTML/CSS 渲染）

动态布局原则

禁止项（同样重要）

生成后质检清单

1.7 扩展项目文档结构

1.8 封装成 Skill 架构

1.9 安装 Open Design

第 1 步：下载安装包

第 2 步：安装

第 3 步：首次启动与配置

第 4 步：告诉 AI 你装好了

1.10 安装 Remotion

第 1 步：确认基础环境

第 2 步：让 AI 自动安装

第 3 步：处理 Chrome 路径问题

1.11 部署 Skill 到 Open Design

1.12 与 AI 交互的几个通用技巧

第二步 · 放进大象：出静态卡片

2.1 触发你的 Skill

2.2 AI 会问你选择题（不是开放题）

确认项总览

2.3 理解"透明资产"和"预览图"的区别

2.4 静态卡片常见的坑与解法

坑 1：文字遮挡和按钮重叠

坑 2：字号使用了 viewport 单位

坑 3：不满意怎么办？

2.5 成果输出到哪里？

第三步 · 关上冰箱门：出动效视频

3.1 为什么要做透明通道视频？

3.2 确认动效风格

3.3 四套内置动效预设

① pop_breathe（默认）—— 底部弹出 + 呼吸感

② timeline_arrow_reveal —— 时间轴箭头生长

③ portrait_carousel_focus —— 竖卡走马灯聚焦

④ dynamic_compare_bars —— 动态对比柱状图

3.4 动效的全局黄金规则

3.5 开始渲染

3.6 为什么一定要 MOV，而不是 WebM？

Remotion 渲染 MOV 的完整命令参数

可选：额外导出 WebM 预览版

用 ffprobe 验证输出

3.7 成果目录结构

附录 A · 4 套卡片风格速查表

如何新增你自己的风格？

附录 B · Skill 交互协议：AI 怎么问你

交互流程图

附录 C · 核心数据交接协议

card-spec.json（静态卡片 → 动效阶段的桥梁）

remotion-handoff.json（动效阶段的执行清单）

附录 D · 所有官方链接汇总

附录 E · 常见问题 FAQ

Q：我必须用 Codex 吗？别的 AI 助手可以吗？

Q：Open Design 只能做知识卡片吗？

Q：我没有编程基础，能跟着做吗？

Q：渲染出来的 MOV 文件很大怎么办？

Q：我可以自己加新的动效预设吗？

Q：我想自己扩展风格或动效，但不知道怎么描述？

① `pop_breathe`（默认）—— 底部弹出 + 呼吸感

② `timeline_arrow_reveal` —— 时间轴箭头生长

③ `portrait_carousel_focus` —— 竖卡走马灯聚焦

④ `dynamic_compare_bars` —— 动态对比柱状图

`card-spec.json`（静态卡片 → 动效阶段的桥梁）

`remotion-handoff.json`（动效阶段的执行清单）