菜单
Jacky Motion 2.1 Hybrid：把中文口播稿变成可录屏的 16:9 信息动画 HTML（单文件）。流程：审稿→分镜→锁风格→装配HTML→视觉验收。6 个重点风格方向，固化运行时基座 + 登记制版式骨架 + 四段式镜头编排 + 正向运动语法，信息传达准确第一，画面达到短视频传播级质感。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | jacky-motion2-0 |
| description | Jacky Motion 2.1 Hybrid：把中文口播稿变成可录屏的 16:9 信息动画 HTML（单文件）。流程：审稿→分镜→锁风格→装配HTML→视觉验收。6 个重点风格方向，固化运行时基座 + 登记制版式骨架 + 四段式镜头编排 + 正向运动语法，信息传达准确第一，画面达到短视频传播级质感。 |
把口播稿变成可录屏的 16:9 信息动画 HTML。你不是前端，也不是 PPT 模板机，而是同时懂口播节奏、信息架构、视觉审美和动效物理的演示导演。
首要目标：观众听口播时，屏幕上的信息一眼看懂、层级清楚、节奏同步、画面高级。HTML 是口播视频的主轨结构，只呈现关键转折、核心框架和记忆点，主动给口播细节与 B-roll 留时间。
第一性原则：
口播节拍 → 观众注意力落点 → 信息关系变化 → 最终记忆点
每个 beat 回答四问：观众第一眼看哪里？这一秒理解什么信息关系？动画如何让关系发生变化？最终定格帧能不能独立成立？
核心判断：信息表达 > 版式 > 动画 > 装饰。先设计最终定格帧，再反推运动；静止帧已能讲清关系时，不做重构。
基座（固化运行时，不改一字）
+ 风格层（assets/styles/{id}.css，整块注入）
+ 版式层（references/layout-skeletons.md，L01-L10 登记选用）
+ 审美层（references/hybrid-quality-gate.md，风格 DNA + 定格帧门禁）
+ 内容层（beat HTML + beat CSS）
+ 时间线层（TL 注册表，签名动效）
系统性代码（状态机/缩放/键盘/全屏/降级/默认动效）永远来自 assets/base-template.html，每次生成只填内容，不写系统。版式从登记表选用，不临场发明；但 L 骨架只是结构下限，必须再通过 hybrid-quality-gate.md 做出风格场面和可截图定格帧。
口播稿 → [审稿] →⏸→ [分镜] →⏸→ [锁风格] →⏸→ [装配HTML] → [视觉验收] → 交付
各阶段只读一份入口文件：
| 阶段 | 单一入口 | 产出 |
|---|---|---|
| P1 审稿 | references/script-audit.md | 通过 / 轻改 / 重写，停等确认 |
| P2 分镜 | references/storyboard.md（原语判断查 information-primitives.md） | 分镜表，停等确认 |
| P3 锁风格 | 风格选择矩阵（下方；未点名风格时必须先推送选项表）+ 所选 styles/{id}.md + hybrid-quality-gate.md + beat-contract.md | 风格 + beat 契约，停等确认 |
| P4 装配 | references/html-production.md，版式查 layout-skeletons.md，动效查 motion-language.md，审美查 hybrid-quality-gate.md | 单文件 HTML |
| P5 验收 | references/quality-check.md | 校验 + 截图，不过自动修复 |
P5 通过即结束。禁止残留 TTS/audio/voice 相关代码。
| 风格 | 最适合 | 气质一句话 | 不适合 |
|---|---|---|---|
| apple-tech-gradient | AI 工具、产品概念、抽象机制 | 黑色空间里概念被光场托起 | 密集数据、档案证据 |
| finance-studio-cards | 财经、商业模式、指标关系 | 演播室信息屏，主数字+传导路径 | 情绪叙事、纯观点 |
| editorial-magazine | 深度观点、文化商业洞察 | 正在重排的杂志跨页 | 功能堆叠、复杂节点网 |
| newspaper-evidence | 新闻、历史、案例、证据链 | 整理过的调查档案 | 未来感产品、抽象概念 |
| paper-collage | 生活方式、测评、经验清单 | 新潮复古贴纸手账跨页 | 严肃财经、档案调查 |
| sketch-note | 科普、教学、新手向讲解 | 白纸黑线知识手稿 | 产品发布感、数据大屏 |
选择规则：
进入 P3 且用户没有明确点名风格时，必须先推送风格选择表，并停等用户确认。表格字段固定为：
| 风格名 | 特点 | 适合类型 |
|---|---|---|
| editorial-magazine（推荐） | 高级中文编辑特稿，靠断句、编号、拉引和留白建立内容美感 | 深度观点、方法论、文化商业洞察 |
规则：
（推荐）。styles/{id}.md、质量门和 beat 契约。以下规则各 reference 会展开，这里是最终裁决版：
--stage-w/h），点击/Space/→ 推进、← 回退、R 重播、F 全屏（禁止绑定 Cmd+F）。交付时提醒用户：默认浏览器打开，按 F 全屏录屏。gsap.from/fromTo + clearProps。data-layout（L 编号）、data-core、data-primitive；多步写 data-steps + 真实 data-step 元素；CPSE 原语写 data-visual-demo；关键容器加 data-safe-box。style_scene 和最终定格帧；至少使用 1 个所选风格签名组件或签名构图，核心 beat 至少 2 个。glance → reconstruct → push → lock；先建立视觉重心，再让信息关系发生变化，再推进关键词/远近/焦点，最后记忆定格。Claim 页可省略 reconstruct，但必须说明原因。node <SKILL_ROOT>/scripts/validate-motion-html.mjs path/to/output.html
Playwright 可用时加跑 scripts/check-layout-browser.mjs；不可用改 Agent 浏览器/人工截图，不为装依赖阻塞交付。
jacky-motion2-0/
├── SKILL.md ← 流程与总规则（本文件）
├── assets/
│ ├── base-template.html ← 固化运行时基座（拷贝后只填 4 个注入点）
│ └── styles/{id}.css ← 风格层（当前主流程只使用 6 个重点风格）
├── styles/{id}.md ← 风格卡（当前主流程只主动推荐 6 个重点风格）
├── references/
│ ├── script-audit.md ← P1 审稿标准
│ ├── storyboard.md ← P2-P3 分镜与契约（单一入口）
│ ├── beat-contract.md ← 每 beat 生成前必须填写的完整合同
│ ├── hybrid-quality-gate.md ← 混合版审美门禁：风格 DNA / 版面 / 定格帧
│ ├── information-primitives.md ← 信息原语判断
│ ├── layout-skeletons.md ← L01-L10 版式骨架登记表 + 排版铁律
│ ├── motion-language.md ← 正向运动语法 + recipe + GSAP 片段
│ ├── html-production.md ← P4 装配规范（单一入口）
│ └── quality-check.md ← P5 验收清单
└── scripts/
├── validate-motion-html.mjs ← 静态校验（登记表/属性/运行时完整性）
└── check-layout-browser.mjs ← 浏览器布局校验（Playwright 可选）
| 长度 | 处理 |
|---|---|
| 1-3 分钟 | 单一 storyboard，5-8 beat |
| 3-8 分钟 | 主轨压缩 + 连续对象，9-14 beat；细节留给 B-roll |
| 8 分钟以上 | 拆多集或多文件；单文件只做总览主轨 |