القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/cdz-hy/aura-mas --skill jacky-motionيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | jacky-motion |
| description | 把中文口播稿变成可录屏的 16:9 信息动画 HTML。6阶段流水线：审稿→分镜→锁风格→生成HTML→验收→配音录制。 |
把口播稿变成可录屏的 16:9 信息动画 HTML。信息表达驱动一切——布局服务于信息层次，动画服务于信息节奏。
本 skill 在 AURA 中只负责视觉画面和 GSAP 入场动画。播放器、翻页、缩放、配音、字幕、进度和视频导出全部由宿主应用注入。
<section class="beat">，第一个额外带 active；禁止嵌套 .beat。data-narration="..."，内容是该分镜的中文口播稿，30-220 字；必须是自然讲解，禁止包含 HTML、CSS、JavaScript、选择器或 GSAP 代码。data-narration，每个 beat 的可见正文总量不超过 180 个中文字符。<script>：head 中一个 GSAP CDN 外链，以及 </body> 前一个完整内联动画脚本。window.animateBeat(index)；按 index 为对应 beat 创建并播放 GSAP timeline。不得自动调用，不得切换 active class。#stage 固定为 1920x1080；宿主负责将其缩放到实际视口。br/img/input/hr/meta/link 等空元素不得用于承载结构。标准骨架：
<main id="stage">
<section class="beat active" data-narration="30-220字的第一段自然讲解">...</section>
<section class="beat" data-narration="30-220字的第二段自然讲解">...</section>
</main>
<script>
window.animateBeat = function(index) {
const beat = document.querySelectorAll('.beat')[index];
if (!beat) return;
gsap.killTweensOf(beat.querySelectorAll('*'));
const tl = gsap.timeline();
// 根据 index 编排当前分镜；不要切页或绑定事件
return tl;
};
</script>
口播稿 → [审稿] →⏸→ [分镜] →⏸→ [锁风格] →⏸→ [生成HTML] → [验收] → [配音录制] → 交付
按 script-audit.md 的 6 条标准检查 → 输出：通过 / 轻改 / 重写。 停止，等用户确认。
按口播自然段落拆节拍，数量由内容决定，不设上限。每个节拍填表：
节拍 | 口播摘要 | 核心信息(1句) | 信息结构 | 视觉动词 | 屏幕文字
停止，等用户确认。 硬约束：每个节拍必须有视觉动词；核心信息只能一句话；屏幕文字必须短于口播。
推荐风格 → 读 styles/{ID}.md → 为每个节拍描述构图方案。输出：
风格：[ID]
Beat 1 → 构图：[描述] → 核心元素：[列表] → 4段编排简述
Beat 2 → ...
停止，等用户确认。全片单一风格，不可混搭。
data-narration 提供口播，不生成音频或播放逻辑按 quality-check.md 检查 → 不通过自动修复。
验收通过后询问用户选择配音方式：
轻量级 TTS 流水线，无 npm，单文件 HTML + 外部 mp3 文件夹。
检查 mmx CLI 是否可用：
mmx auth status
如果未安装，提示用户三选一：
npm install -g mmx-cli && mmx auth login --api-key <KEY>（推荐，中文效果好）从分镜表提取每个步骤（step）的口播文本，生成 audio-segments.json：
[
{"beat": 1, "step": 0, "text": "口播文本…", "file": "audio/b1-s0.mp3"},
{"beat": 1, "step": 1, "text": "口播文本…", "file": "audio/b1-s1.mp3"},
{"beat": 2, "step": 0, "text": "口播文本…", "file": "audio/b2-s0.mp3"}
]
规则：
audio/ 文件夹逐条调用 TTS，串行执行避免限频：
mkdir -p audio
for each segment in audio-segments.json:
mmx speech synthesize --text "$text" --out "$file"
已存在的 mp3 自动跳过（安全重跑）。加 --force 强制重新合成。
在已生成的 HTML 中做两处修改：
1) 给每个 step 标注音频路径：
在每个 .beat 上添加 data-audio-map 属性，值为 JSON：
<section class="beat" data-steps="2" data-audio-map='["audio/b4-s0.mp3","audio/b4-s1.mp3"]'>
单步节拍（无 data-steps）：
<section class="beat" data-audio-map='["audio/b1-s0.mp3"]'>
2) 添加播放模式切换 + 音频控制器脚本：
// 三种模式：manual / audio / auto
// manual: 原始手动翻页，无音频
// audio: 播放音频，但手动翻页
// auto: 播放音频 + 音频结束自动翻页
//
// 切换方式：按 M 键循环，或 URL 参数 ?auto=1 / ?audio=1
// 浏览器自动播放限制：auto 模式首次需要用户点击一次启动
音频控制器核心逻辑：
let mode = 'manual'; // manual | audio | auto
let audioEl = null;
function playStepAudio(beat, step) {
if (mode === 'manual') return;
const map = JSON.parse(beat.dataset.audioMap || '[]');
const src = map[step];
if (!src) return;
if (audioEl) { audioEl.pause(); audioEl = null; }
audioEl = new Audio(src);
audioEl.play().catch(() => {});
if (mode === 'auto') {
audioEl.onended = () => setTimeout(advance, 200);
}
}
advance() 后调用 playStepAudio(currentBeat, currentStep)?auto=1 启用自动播放模式如果不用 MiniMax，替换合成命令即可，接口约定：
curl -s https://api.openai.com/v1/audio/speech \
-H "Authorization: Bearer $OPENAI_API_KEY" \
-H "Content-Type: application/json" \
-d '{"model":"tts-1","input":"文本","voice":"alloy"}' \
--output "$file"
| 视觉动词 | 含义 | 信息结构适配 |
|---|---|---|
| 高亮 | 看这里 | 证据、引用、对比 |
| 连接 | 有关联 | 关系、层级、流程 |
| 增长 | 数量增加 | 数据、对比 |
| 对比 | A和B不同 | 对比、数据 |
| 推近 | 细节重要 | 证据、概念、引用 |
| 展开 | 背后有逻辑 | 概念、层级、流程、结论 |
| 流动 | 在系统中传递 | 流程、关系、时间线 |
| 堆叠 | 证据/层级累积 | 证据、时间线 |
| 计数 | 数字重要 | 数据 |
| 灰化聚焦 | 先忽略其他 | 概念、关系、对比、结论 |
每个节拍的动画分 4 个阶段，点击后自动完成，然后停在 hero frame：
这是编排思路，AI 用 GSAP timeline 自由实现。总时长 2-4 秒，各阶段留出呼吸感。
| 风格 | 适用 | 气质 |
|---|---|---|
| newspaper-evidence | 新闻、历史、政策、社会议题 | 证据、档案、纪录片 |
| apple-tech-gradient | AI工具、产品概念、抽象机制 | 克制keynote、概念展开 |
| finance-studio-cards | 财经、商业、公司分析 | 演播室信息大屏 |
| editorial-magazine | 深度知识、文化、商业洞察 | 高级编辑版面 |
position:absolute;inset:0 撑满画布，不加 padding；只有内部容器有 padding。beat 内部容器加 overflow:hidden，子元素禁止超出 stage 边界object-fit:cover。容器用 display:flex;align-items:center;justify-content:center + padding 居中，img 用 max-width:100%;max-height:100%;display:block 自然缩放，配合 border-radius + box-shadow 做卡片包裹。容器不设 background-color，避免灰色背景框.crop-frame + object-fit:coverdata-steps="N" 标记，点击依次推进步骤，全部步骤完成后才进入下一个节拍。列表/标签/要点等多项内容必须逐项出现（1 项 = 1 步），不可同时 stagger 全部涌入#stage 主背景色相同。stage 使用固定 1920×1080；禁止生成任何缩放 JavaScript从口播内容推导动画，不要凭空添加装饰：
口播内容 → 提取内容动作（对比？递增？展开？）→ 匹配视觉动词 → 选择信息结构
如果内容没有明确动作，退回到最基础的：居中概念 → 辅助信息浮出。绝不添加内容中不存在的运动。
以下是 AI 生成内容常见的低质量视觉模式，必须避免：
| 禁止模式 | 替代方案 |
|---|---|
| 紫粉渐变背景 | 使用对应风格的背景色体系 |
| 彩色左边框卡片 | 使用对应风格模板定义的卡片组件 |
| Emoji 作为图标 | 纯文字标签或极简线性图标 |
| 所有节拍同一动画 | 每个节拍独立编排 |
| 居中大标题 + 3 列卡片 | 信息结构驱动布局（对比用左右、层级用上下、展开用中心外扩） |
| 深色卡片面板铺满屏幕 | 空间层次感，概念在空间中展开 |
| 彩虹色多强调色 | 使用对应风格的强调色，克制使用 |
| 长度 | 处理 |
|---|---|
| 1-3 分钟 | 单一 storyboard，一个 HTML |
| 3-8 分钟 | 拆章节，先做第 1 章确认视觉锚点 |
| 8 分钟以上 | 拆成多集或多文件 |