动效讲究、引擎驱动、绝不廉价的宣传片 —— 以 Remotion 合成的形式产出。 frame-smith 是一个导演,不是渲染器。它读你的 brief、定寄存器、选一个效果引擎、铺节拍时间线、配乐加音效、写出
.tsx并注册进你的 Remotion Root。真正的渲染由它所依附的视频运行时完成。
frame-smith 是一个给 AI 编码助手(Claude Code 等)用的视频动效技能,是 UI 设计技能 finesse 的"动态视频版"——同一套哲学:高级手艺 · 零 AI 廉价感,只是从静态排版转向了运动。
 |
 |
 |
 |
左→右、上→下:海报立方体翻滚 Poster-cube tumble · 胶囊翻主题 Capsule theme-flip · 建筑数据脉冲 Architecture data-pulse · 粒子相册 Particle-burst album。每条片子只承载一个引擎,做满 100%。
给一句 brief("做个产品发布片头" / "把这个页面做成 15 秒电影感短片" / "竖屏抖音带字幕"),frame-smith:
- 先检查运行时(硬门槛)。 它写 Remotion 合成但不渲染——所以需要装
hyperframe或remotion其中一个 Skill(装一个就够)。都没有就停下来引导安装,而不是产出一个你跑不起来的文件。 - 定寄存器 ——
cinematic(横屏1920×1080,无旁白,大字收尾)或short(竖屏1080×1920,抖音/小红书,可带字幕)。 - 选一个效果引擎,做满 100% —— 从上面四个原型里挑。
- 铺节拍时间线 ——
H0…Hn以秒为单位,一拍一件事,最后一拍要落地。 - 编排出入场(reveal) —— 文字与元素怎么进、怎么出:变换入场向量、错峰、hero 单独一个动作(绝不"所有东西一起 fade 上移")。
- 配声音 —— 背景音乐按能量选曲 + 转场音效砸在拍点上 + 音画同步(声音是手艺的一半;无旁白 ≠ 无声)。
- 写出并注册合成 —— 导出三件套(
X/XCover/X_FRAMES)、Root 里的<Composition>配对、正确的时长/帧率/画幅。 - 过反廉价黑名单 + 起飞前自检 + 好视频评分表 —— 并证明它真的会动(Studio 预览或渲一张静帧)。
一条高级片子 = 四层合一,缺一不可:
- 引擎 —— 一个招牌效果,做透。
- 节拍 —— 是拍子不是章节:hook 快、一拍一事、结尾落地。
- reveal 编排 —— 出入场有编排,错峰不雷同。
- 声音 —— 配乐 + 音效与画面匹配。
再加把四层焊成一体的连接组织——同步:每个音效、每个音乐 drop,都落在和画面同一个拍点帧上。一句话检验:静音了还读得懂吗?闭眼只听声音,像不像这条片子?两者落在同一帧上吗?
frame-smith 需要一个视频运行时。装其一即可:
hyperframe(推荐)—— 效果模板库 + 一个可用的 Remotion 工程,直接从现成片子里搬手法。remotion—— 光运行时(脚手架、studio、render、<Composition>注册表),效果按 frame-smith 的配方现写。
已经有 Remotion 工程但没装 Skill?frame-smith 可以直接指过去当回退方案(见 references/environment.md)——装 Skill 是长期正解。
从自然语言自动触发("视频动效"、"promo video"、"HyperFrame"、"竖屏短视频"……),或直接调用:
/frame-smith [命令] [brief]
| 命令 | 作用 |
|---|---|
craft [brief] |
完整流程:环境门 → Frame Read → 旋钮 → 引擎 → 节拍 → reveal → 声音 → 注册(默认) |
env |
报告哪个运行时在位,都没有就给安装路径 |
engine [目标] |
换效果引擎,保留节拍 |
beats [目标] |
重剪时间线——移动拍界、修空拍 |
reveals [目标] |
重编排文字/元素的出入场 |
sound [目标] |
重配声音——配乐、音效、ducking、音画同步 |
slower / faster |
重定速:压住一条太躁的片 / 唤醒一条太闷的片 |
register [目标] |
横屏 ↔ 竖屏 换向 |
restage [目标] |
升级已有合成,先审后改 |
audit [目标] |
只读:反廉价 + 起飞前自检 + 评分表 |
frame-smith 永远在 Frame Read 之后停下等你确认,才动手写代码。
不止 Claude。skills/frame-smith/ 是唯一源,派生出各家 AI 编码助手的镜像:
| Agent / 运行时 | 读取 |
|---|---|
| Claude Code(插件 / Skill) | .claude-plugin/plugin.json → skills/frame-smith/ |
| Cursor | .cursor/rules/frame-smith.mdc |
OpenAI Codex 等读 AGENTS.md 的运行时 |
AGENTS.md |
| GitHub Copilot | .github/copilot-instructions.md |
| Trae · Trae 国内版 · CodeBuddy | .trae/ · .trae-cn/ · .codebuddy/(逐字镜像) |
改动只在源 skills/frame-smith/ 里做,然后跑 bash scripts/sync-mirrors.sh 一键同步所有镜像(--check 只报漂移不改动)。AGENTS.md 与 Copilot 文件是手写精简版,工作流变化时手动跟进。
frame-smith/
├── .claude-plugin/plugin.json # Claude Code 插件清单
├── AGENTS.md # Codex 等读 AGENTS.md 的运行时
├── .cursor/rules/frame-smith.mdc # Cursor 规则(sync 从 SKILL.md 生成正文)
├── .github/copilot-instructions.md # GitHub Copilot
├── .trae/ · .trae-cn/ · .codebuddy/# Trae / Trae国内版 / CodeBuddy 逐字镜像
├── assets/examples/ # README 展示图(四个引擎原型)
├── scripts/sync-mirrors.sh # 单一源 → 各镜像同步 + 漂移检查
└── skills/frame-smith/ # ★ 唯一源
├── SKILL.md # 路由器:环境门 → 寄存器 → 旋钮 → 引擎 → 节拍 → reveal → 声音 → 注册
├── references/
│ ├── environment.md # §0 运行时门槛——检测 hyperframe/remotion、安装引导
│ ├── motion-floor.md # 动效地基:30fps、f(sec)、clampOpts、S 缩放、安全区、easing、导出三件套
│ ├── effect-catalog.md # 效果引擎词汇表(四个原型 + 可复用子效果)
│ ├── effects-menu.md # 视频动效清单(点菜单)——和 AI 聊时照着点效果
│ ├── beat-structure.md # 节拍时间线架构 + 叙事骨架
│ ├── reveals.md # 文字与元素的出入场编排
│ ├── sound-design.md # 背景音乐、转场音效、混音与音画同步
│ ├── showcraft.md # 好视频总纲——四层 + 同步,10 项评分
│ ├── registration.md # 导出三件套契约 + <Composition> 注册
│ ├── anti-cheap-motion.md # 动效 + 声音反廉价黑名单
│ ├── assets.md # 图片 / 字体 / 音频加载
│ └── preflight.md # 交付前检查表 + 证明它会动
├── templates/
│ └── PosterCubeTumble.tsx # 一个可运行的骨架(占位内容、零素材)
├── examples/
│ └── EXAMPLES.md # 四个引擎原型——各该学什么
└── scripts/
└── check-runtime.sh # §0 运行时门槛的脚本版
references/*.md 是深度材料,按当前阶段按需加载,不一次全塞。
MIT · © 2026 西瓜同学