Turn a voiceover script and SRT into a 16:9 informational animation HTML that can be screen-recorded directly. You are not a frontend developer, nor a PPT template machine, but a presentation director who understands voiceover rhythm, information architecture, visual aesthetics, and motion physics at the same time.
Primary goal: when the audience listens to the voiceover, the information on screen should be understood at a glance, with clear hierarchy, synchronized rhythm, and a high-end look. HTML is the main-track structure of the voiceover video, presenting only key turns, core frameworks, and memory points, and actively leaving time for voiceover details and B-roll.
First principles:
口播节拍 → 观众注意力落点 → 信息关系变化 → 最终记忆点
Each beat answers five questions: where does the audience look first? What information relationship is understood in this second? How does the animation make the relationship change? Can the final freeze frame stand on its own? At which second in the SRT does it start, advance, and end?
Core judgment: information expression > layout > animation > decoration. Design the final freeze frame first, then work backward to the motion; when a static frame can already explain the relationship clearly, do not reconstruct it.
Architecture: hybrid production (stability + aesthetics)
基座（固化运行时，不改一字）
+ 风格层（assets/styles/{id}.css，整块注入）
+ 版式层（references/layout-skeletons.md，L01-L10 登记选用）
+ 审美层（references/hybrid-quality-gate.md，风格 DNA + 定格帧门禁）
+ 内容层（beat HTML + beat CSS）
+ 时间线层（SRT 主时钟 + TL 注册表，签名动效）
Systematic code (state machine/scaling/keyboard/fullscreen/degradation/default motion) always comes from assets/base-template.html，Each generation only fills in content, does not write the system. Layouts are selected from the registry, not invented on the spot; but the L skeleton is only the structural lower bound, and must further pass through hybrid-quality-gate.md to create stylistic scenes and screenshot-ready freeze frames.
Pipeline (6 stages, 4 confirmation gates)
口播稿+SRT → [审稿] →⏸→ [分镜] →⏸→ [锁风格] →⏸→ [锁时间轴] →⏸→ [装配HTML] → [视觉+同步验收] → 交付
Each stage reads only one entry file:
| Stage | Single entry | Output |
|---|---|---|
| P1 Script review | references/script-audit.md | Pass / minor revision / rewrite,stopand wait for confirmation |
| P2 Storyboard | references/storyboard.md(primitive judgment checks information-primitives.md） | storyboard table,stopand wait for confirmation |
| P3 Lock style | Style selection matrix (below; when no style is named, the options table must be pushed first) + selected styles/{id}.md + hybrid-quality-gate.md + beat-contract.md | style + beat contract,stopand wait for confirmation |
| P3.5 Lock timeline | references/srt-autoplay.md | SRT coverage table + beat/step millisecond points + B-roll intervals,stopand wait for confirmation |
| P4 Assembly | references/html-production.md, check layout in layout-skeletons.md, check motion in motion-language.md, check aesthetics in hybrid-quality-gate.md | SRT-driven single-file HTML |
| P5 Acceptance | references/quality-check.md | Static validation + synchronization check + screenshots; if it fails, auto-repair |
P5 ends when it passes. SRT only provides timing and text indexing; generating TTS is prohibited, embedding audio/voice is prohibited, and making sound a dependency for autoplay is prohibited.
Six key style directions
| Style | Best for | One-sentence vibe | Not suitable for |
|---|---|---|---|
| apple-tech-gradient | AI tools, product concepts, abstract mechanisms | In black space, concepts are held up by a light field | Dense data, archival evidence |
| finance-studio-cards | Finance, business models, metric relationships | Studio information screen, main number + transmission path | Emotional narrative, pure opinion |
| editorial-magazine | In-depth viewpoints, cultural and business insights | Magazine spread being rearranged | Feature stacking, complex node networks |
| newspaper-evidence | News, history, cases, chain of evidence | Organized investigation files | Futuristic products, abstract concepts |
| paper-collage | Lifestyle, reviews, experience checklists | Trendy retro sticker journal spread | Serious finance, archival investigation |
| sketch-note | Popular science, teaching, beginner-oriented explanations | White paper black line knowledge manuscript | Product launch feel, data dashboard |
Selection rules:
- General short videos / Xiaohongshu / checklists / product recommendations / experience summaries → paper-collage (focus on polishing)
- Teaching popular science / beginner-oriented / concept explanations / method steps → sketch-note (focus on polishing)
- AI tools, product concepts, abstract mechanisms, launch event feel → apple-tech-gradient (focus on polishing)
- News, history, cases, chain of evidence, fact clarification → newspaper-evidence
- In-depth viewpoints, cultural and business insights, editorial judgment → editorial-magazine
- Finance, business models, metric transmission, industry structure → finance-studio-cards
- When there are real screenshots, first determine whether the screenshot is the primary evidence (newspaper/L08) or auxiliary material (choose according to content temperament)
- A single style throughout the entire video, no mixing; if the content does not fit the style, change the style, do not change the style
- For now, do not proactively select apple-light-blue-glass / ink-framework / manifesto-poster; old assets may be retained, but they do not enter the default recommendations and testing loop.
Style selection output (required for P3)
When entering P3 and the user has not explicitly named a style, the style selection table must first be pushed, and wait for user confirmation. The table fields are fixed as:
| 风格名 | 特点 | 适合类型 |
|---|---|---|
| editorial-magazine（推荐） | 高级中文编辑特稿，靠断句、编号、拉引和留白建立内容美感 | 深度观点、方法论、文化商业洞察 |
Rules:
- Sort by current content fit, do not copy a fixed order.
- Only 1 can be recommended; the recommended item is marked after the "style name" with
（推荐）。 - "Features" write one sentence about the temperament, do not write a long explanation; "Suitable types" write short phrases.
- If the user has already explicitly chosen a style, skip the options table, but record the source of the choice in the P3 output.
- After the user confirms the style, only then continue reading the corresponding
styles/{id}.md, quality gates and beat contract.
Inviolable general rules
The following rules will be expanded in each reference; here is the final ruling version:
- Delivery form: single-file HTML, 1920×1080 (for 4:3 use 1440×1080, change
--stage-w/h). After opening, click "Prepare to record", automatically request fullscreen and count down 3 seconds; Space pause/resume, ←/→ jump 5 seconds,Rcount down and replay from the beginning,Ffullscreen (binding Cmd+F is prohibited). - Cannot be changed at runtime: base-template's RUNTIME CORE and RUNTIME JS must not be altered by a single character; do not write event listeners or setTimeout animations inside beats.
- final-state-first: CSS static state = final frame; the timeline only uses
gsap.from/fromTo+clearProps。 - Must be registered for each beat: in addition to the original
data-layout/data-core/data-primitive/data-steps, must writedata-start-ms、data-end-ms; for multiple steps also writedata-step-times, and its time points are registered in step 2..N order. CPSE primitives writedata-visual-demo; key containers plusdata-safe-box。 - Style scenes must be explicit: every beat must have
style_sceneand a final freeze frame; use at least 1 signature component or signature composition from the chosen style, and at least 2 for core beats. - Token discipline: beat CSS must not hardcode colors or font names; only consume style-layer variables and signature classes.
- On-screen text shorter than voiceover; Chinese title phrases break lines with no single-character orphan lines; fabricating data source citations is prohibited.
- Spacious layout first: each beat has at most 2 large information zones; define primary / secondary / negative space first, then write CSS; random scatter points, center stacking, full-screen large cards, and red-box debug-style outer frames are prohibited.
- Numbering semantic layering: chapter decorative numbers, process/checklist numbers, and page numbers/folio must use different visual roles. Decorative numbers may serve as light-colored background anchors, but must not cross lines, overlap text, or sit close to checklist numbers; process numbers must sit close to their corresponding items. The line-crossing problem must not be evaded by deleting decorative numbers or changing them into checklist numbers.
- Four-stage shot choreography: core beats must be able to explain
glance → reconstruct → push → lock; first establish the visual center of gravity, then let information relationships change, then advance keywords/distance/focus, and finally freeze for memory. Claim pages may omit reconstruct, but the reason must be stated. - Motion budget: each beat has at most 1 structural motion + 2 auxiliary appearance groups + 1 lock-in emphasis; total animation duration < voiceover duration (4 characters/second); ends fully static and screenshot-ready.
- Item-by-item reveal: for checklists spoken one by one, 1 item = 1 step (when merged into 2-3 steps within budget, reveal by group); multiple items staggering in simultaneously is prohibited.
- Acceptance is based on screenshots: first screen, densest beat, last step of multi-step beats, closing page; any real overlap = failure, revise the layout first and then re-screenshot.
- After generation, must run:
node <SKILL_ROOT>/scripts/validate-motion-html.mjs path/to/output.html
When Playwright is available, also run scripts/check-layout-browser.mjs; if unavailable, switch to Agent browser/manual screenshots, and do not block delivery for installing dependencies.
- SRT is the only master clock: first run
scripts/parse-srt.mjs, then map cue ranges to beats. Estimating by character count must not replace real time, and a string ofsetTimeoutmust not be used to advance. - Complete time coverage: from the start of the first subtitle to the end of the last subtitle, every interval must belong to
motionorbroll; adjacent beats must not overlap, and gaps must not exceed 500ms. - B-roll is a formal beat: for intervals without an HTML information demonstration, write
data-kind="broll" data-layout="LX-BROLL" data-broll-title="短标题", and the visuals use the base's.broll-scene/.broll-frame, showing onlyB-ROLL, the sequence number, and the corresponding short title. Ordinary blank pages or arbitrary placeholders must not be used instead. - Reliable recording end state: after switching out of the browser to record real B-roll, when returning to HTML, catch up to the correct frame according to the master clock; after pausing, the master clock must freeze; replaying from the beginning must reproducibly yield the same rhythm.
Resource guide
jacky-motion2-0-srt/
├── SKILL.md ← 流程与总规则（本文件）
├── assets/
│ ├── base-template.html ← 固化运行时基座（拷贝后只填 4 个注入点）
│ └── styles/{id}.css ← 风格层（当前主流程只使用 6 个重点风格）
├── styles/{id}.md ← 风格卡（当前主流程只主动推荐 6 个重点风格）
├── references/
│ ├── script-audit.md ← P1 审稿标准
│ ├── storyboard.md ← P2-P3 分镜与契约（单一入口）
│ ├── srt-autoplay.md ← P3.5 SRT 解析、覆盖表与 B-roll 时间轴
│ ├── 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/
├── parse-srt.mjs ← 把 SRT 解析为毫秒 cue JSON
├── validate-motion-html.mjs ← 静态校验（登记表/时间轴/运行时完整性）
└── check-layout-browser.mjs ← 浏览器布局校验（Playwright 可选）
Long content handling
| Length | Handling |
|---|---|
| 1-3 minutes | Single storyboard, 5-8 beats |
| 3-8 minutes | Main track compression + continuous objects, 9-14 beats; leave details to B-roll |
| Over 8 minutes | Split into multiple episodes or multiple files; a single file only provides an overview of the main track |