RoleModel 品牌在 HyperFrames 中的使用
我们已经拥有强大的 HyperFrames 工具集。请从该清单开始，而不是从零开始。 此技能只是其上的品牌层：定义我们的价值观来源、选择哪个工具以及我们不去做什么。
工具清单
已安装两套工具，名称有重叠。请知晓你正在调用的是哪一套。
官方（HeyGen），位于 ~/.claude/skills：
| 技能 | 何时使用 |
|---|---|
hyperframes | 构图创作、时间控制、媒体、生产工作流 |
hyperframes-core | 构图契约和 data-* 时间属性 |
hyperframes-animation | 动效规则、场景蓝图、GSAP 及其他运行时 |
hyperframes-keyframes | 特写镜头、镜头移动、重新取景、搜索安全关键帧 |
hyperframes-creative | 调色板、节拍规划、旁白、构图模式 |
hyperframes-audio | 混音已经放置的轨道——淡入淡出、闪避、自动化 |
hyperframes-cli | 初始化、lint、检查、预览、渲染、转录、TTS |
hyperframes-registry | 安装块和组件 |
media-use | 获取或生成音乐、音效、图片、配音 |
标准（我们自己的），位于 ~/.claude/skills/synced：
| 技能 | 何时使用 |
|---|---|
hyperframes | 我们自己的构图技能——读取 design.md、house-style.md |
hyperframes-cli | 我们自己的 CLI 说明 |
hyperframes-direction-harness | 在最终 index.html 之前，当方向尚未锁定时 |
optics-context | 任何同时作为产品表面的内容 |
gsap | GSAP 特定细节 |
impeccable | 我们的工艺底线 |
名称冲突。
hyperframes和hyperframes-cli同时存在于两套工具中。 当具体调用哪一套很重要时，请显式说明。
请不要再重复它们中的任何规则。 构图契约、lint 错误、轨道冲突、暂停的时间线——所有这些都属于那些技能并由它们维护。二次复制的副本在它们发布新版本时就会过时且无人察觉。如果缺少某条规则，请在上游修复，而不是在此文件中。
品牌通过 design.md 到达 HyperFrames
标准的 hyperframes 技能已经从项目根目录读取 design.md 作为品牌颜色、字体和约束的真值来源，并且会使用其精确值而不自行发明。这就是切入点。请使用它。
品牌仓库生成一个：
cp rolemodel-brand/dist/design.md <video-project>/design.md
它由 rolemodel-brand/tokens/brand.json 通过 scripts/build-tokens.mjs 生成，因此不会与其他 RoleModel 表面使用的 token 矛盾。切勿手动编辑——请修改 brand.json 并重新运行。
该文件包含颜色、字体、完整的动效比例、四个动效原则以及以下约束。一旦放入项目中，现有技能会处理其余工作。
对于构图本身的 CSS 自定义属性：
<link rel="stylesheet" href="rolemodel-brand/css/academy-theme.css">
<body data-theme="academy">
选择动效 token
完整值位于 design.md 中。选择规则很简单：
根据元素的行为选择，而不是其外观。
- 某事物进入 →
--duration-base+--ease-enter - 同一事物消失 →
--duration-fast+--ease-exit。 离开总是比进入更快。 - 已经在屏幕上的物体改变位置或大小 →
--ease-move - 故意引人注目 →
--ease-emphasis，唯一允许过冲的曲线 - 一组 → 兄弟元素之间使用一个
--stagger，从不全部同时动作
切勿在构图中编写原始时长或原始 cubic-bezier。工作室对颜色的使用也遵循同样规则，原因相同。
我们不去做什么
以下为强制约束。其中几条由工具包中的 npm run check 强制执行，且全部位于 design.md 中，构图技能会从中读取。
- 任何地方都禁止径向渐变。 品牌是线性的——强调方向，而非团块。
- 禁止帧擦除。 不要绘制白色或亮色框、边框或盒子作为场景过渡扫过画面。Claude 会不假思索地这样做；这属于模板式的华丽效果，不是我们的风格，而且会将注意力引向虚无。通过剪切来过渡，或者用
--ease-enter揭示进入的内容。不要在任何地方绘制画面框。 - 禁止装饰性规则、下划线或分隔线。 不要为标题添加下划线，在段落之间添加分割线，或在卡片、统计数字、引用或下方三分之一处添加边框。Claude 会使用这些来表示结构；它们只表明添加了某些东西。分隔应来自空间、重量和背景。系统中唯一认可的一条规则是标题下方的短品牌条，而且
rm-title会绘制它——切勿手动添加第二条。 - 边缘是实线边框，而非渐变。 这决定了必要的边缘该如何绘制；并不允许随意添加。如果没有边缘不会产生歧义，就不需要边缘。
- 橙色仅用作强调色——绝不能作为背景。
- 禁止装饰。 如果某个元素既不传递信息也不引导注意力，就删除它。
当方向尚未锁定时
不要开始编写 index.html。请使用 hyperframes-direction-harness——它正是为此设计的，可在任何构图之前生成可供评审的看板：
01_intake.md → 02_design_direction.md → 03_critical_frame_plan.md
→ direction_board.html (导演工作台，需评审)
→ 04_render_plan.md (仅在评审后准备就绪)
→ 移交给 hyperframes 技能
只有在修改现有构图的小改动时（如拼写错误、时间微调、单个颜色、lint 修复）才可以绕过它。
哪种工具解决哪种问题
HyperFrames 用于构图；不用于捕捉。如果视频必须展示真实的产品 UI，则它是不合适的工具。
| 输入 | 工具 | 保持最新？ | |
|---|---|---|---|
| 录制 | 你的屏幕 | openscreen | 否——需手动重新录制 |
| 构图 | 脚本或简报 | HyperFrames | 重新运行简报 |
| 从测试生成 | Playwright 跟踪 | playwright-recast | 是——重新运行测试 |
对于在捕捉内容之上放置标题卡片、下方三分之一和动效图形，请使用 HyperFrames。
旁白、时间控制、交付
不要在构图内部合成旁白。
rm-voice <project> --script opener --voice af_nova
每行一个片段，每个片段已测量，SRT 根据已知时长编写——因此时间精确无误，副本编辑只需重新合成更改的部分。Kokoro 本地运行：无需 API 密钥，且未发布的客户产品相关信息不会离开本机。
渲染和旁白轨道在不同时钟上运行。 playwright-recast 会压缩空闲时间；旁白则取决于词语所需时长。将 22 秒的字幕轨道烧入 3.8 秒的渲染中，cue 1 会等待整个片段，而其余部分会被静默丢弃——看起来像是成功的。
rm-mux --video demo.mp4 --audio narration.wav --srt narration.srt -o final.mp4
rm-share final.mp4 --project "Ridgeline Railing"
rm-share 返回一个链接，客户端无需账号即可打开并留下带时间戳的评论。rm-share --check 可查看是否已配置。
在客户端项目之前
export HYPERFRAMES_NO_TELEMETRY=1
遥测默认开启。项目名称和视频内容不会被收集，但 hyperframes auth login 会将你的 HeyGen 账户邮箱链接到你的使用情况并将之前的匿名活动关联到它。 请在脚手架中加入退出选项。
固定版本。HyperFrames 使用 Apache-2.0 许可证——无席位数量限制、无公司规模门槛，这也是它成为我们默认选择的原因——但它处于 1.0 版本之前，几乎每日发布且未声明兼容性保证。今天渲染的客户端项目应在六个月后以相同方式渲染。
致谢
三级框架以及剪切 → 故事板 → 动效图形管线来自 RoboNuggets 的 Jay 开发的 hyperframes-helper，在 CC BY 4.0 许可下使用。若重新分享此内容，请保留署名——这是该许可的要求。