sn-motion-html

技能简介

sn-motion-html 是 OpenSenseNova/SenseNova-Skills 工具包中的一个 Skill，专门用于制作滚动驱动的沉浸式叙事网页。用户只需提供故事资料、视觉参考和叙事目标，Skill 即可驱动 AI 编程助手按流程完成从分镜规划、图像素材生成到网页组装的完整工作流，最终交付一个随页面滚动推进镜头的沉浸式网页体验。技能配套提供了详细的中文使用文档和《奥德赛》完整制作案例。

核心能力

• 沉浸式叙事网页生成：通过页面滚动控制镜头进程，读者滚动时镜头沿着故事线推进，支持向上回看和章节跳转
• 完整制作流程编排：Skill 将制作拆解为资料整理、大纲确认、分镜设计、风格固定、素材生成、网页组装等标准化阶段，每个阶段有明确的交付物和检查点
• 多工具协同：Skill 驱动图像生成工具创建分镜素材，驱动 FFmpeg 处理视频规格，驱动网页组装工具将素材与滚动逻辑绑定
• 角色一致性保持：通过结构化的角色描述块，确保主角在不同章节中外观、服饰、颜色保持视觉一致
• 章节导航与进度控制：提供章节导航栏、总进度条、视频加载占位图，支持减少动态效果的访问模式
• 中文文档支持：提供完整的中文使用指南和《奥德赛》实战案例，任何阶段均可切换中文与 AI 沟通
• 桌面与移动端适配：优先保证桌面效果，同时检查手机竖屏裁切和文字可读性

安装配置

前置要求：

• 已安装 SenseNova-Skills 工具包（可通过 Agent 自动安装）
• 配置 SenseNova 平台的 API Key 和接口地址（国内版和国际版接口不同，请从对应文档页获取）
• 建议使用 OpenClaw 或 hermes-agent 作为 Agent 运行时

安装方式一（自动，推荐）： 将 GitHub 仓库地址交给 Agent，发送指令：请从 https://github.com/OpenSenseNova/SenseNova-Skills 安装 SenseNova-Skills 到你的 skills 目录

安装方式二（手动）： git clone https://github.com/OpenSenseNova/SenseNova-Skills.git --depth=1 mkdir -p ~/.openclaw/skills cp -r SenseNova-Skills/skills/* ~/.openclaw/skills/

环境验证： 安装完成后，可使用 sn-image-doctor Skill 验证环境配置是否正确，包括 Python 依赖、API Key 和必要的环境变量是否齐全。

使用步骤

第一步：整理制作材料

建立项目目录，将以下材料分门别类整理：brief.md（项目目标、受众、章节规模、语言）、story-notes.md（故事梗概、必须保留的事件）、sources.md（资料来源和优先级）、interaction-reference.mp4（交互参考录屏）、visual-style.jpg（画风参考）、character-reference.png（主角外形参考）。

然后发送材料说明 prompt 给 Agent，让其先读取材料并提出制作方案。

第二步：输出内容大纲和分镜方案

发送第一条结构化 prompt，包含主题、受众、内容范围、视觉方向、交互方式、交付要求等，由 Agent 输出内容大纲、分镜方案和视觉提案。样图阶段先做开头、中间、结尾的小样，确认方向后再推进。

第三步：审核分镜表

收到分镜方案后，要求 Agent 将每章整理为标准分镜表，包含：章节标题及作用、实际显示文案、主画面事件及人物道具、构图与镜头运动方向、文字位置安排、章节进出方式。审核时特别关注容易发生跳切或空间关系不成立的位置。

第四步：固定风格和角色设定

为避免不同章节图像风格飘移，需单独编写角色统一设定块（发型、脸型、服装主色、道具等描述）和统一风格设定（色调、绘画质感、光线、景别）。风格和角色设定固定后，再逐章生成图像素材。

第五步：组装网页并调试验收

收到全部素材后，要求 Agent 按已确认的分镜和素材组装网页，重点检查：滚动进度与场景的映射关系、每章文字停留时间、手机端裁切和文字位置、动态效果减少模式下的降级表现。安装配套的验证脚本进行本地检查。

适用场景

• 文学与历史叙事：将小说、史诗、历史故事制作为可滚动的互动网页，适合文化推广和教育传播
• 品牌故事展示：将品牌历程、产品故事制作为沉浸式网页，提升用户停留时间和记忆点
• 旅行与摄影记录：将旅途见闻以滚动镜头的方式呈现，增强身临其境的感受
• 个人作品集展示：以故事化方式组织作品集，用镜头语言而非页面列表呈现创作历程

适用人群

内容创作者和叙事设计师，AI 编程助手用户，品牌运营者，以及教育内容开发者。

工作原理

sn-motion-html Skill 并不是一个直接生成网页的工具，而是一个流程编排框架。它在 Agent 运行时中工作，通过结构化的 prompt 序列驱动多个 AI 工具协同完成制作：图像生成模型负责创建分镜素材、FFmpeg 负责视频的规格处理、网页组装工具将滚动进度与视频位置绑定。Skill 的核心价值在于将一个复杂的创意项目拆解为多个可验证的阶段，每个阶段有明确的输入物、输出物和检查标准，大幅降低了 AI 编程过程中需求不清、方向走偏、返工频繁的问题。

官方链接

• GitHub 仓库：https://github.com/OpenSenseNova/SenseNova-Skills
• 中文使用文档：https://github.com/OpenSenseNova/SenseNova-Skills/blob/main/docs/sn-motion-html_cn.md
• Raccoon 在线体验：https://office.xiaohuanxiong.com/home
• 制作案例《奥德赛》：https://github.com/OpenSenseNova/SenseNova-Skills/blob/main/docs/sn-motion-html_cn.md