智能体 Scroll World：一句话生成沉浸式滚动落地页，设计门槛归零

沉浸式滚动页面，为什么一直是大厂专属？​

苹果官网是很多人心中的网页设计天花板。手指在鼠标滚轮上轻轻滑过，镜头带你穿越进产品内部，视角无缝切换，没有任何生硬的转场。这种沉浸式滚动飞行交互，体验上确实震撼——但它背后需要精密的 3D 场景建模、复杂的运镜计算、严苛的镜头轨迹调试，还需要设计师和前端工程师反复拉扯、逐帧打磨。

对于中小团队和个人开发者来说，这种页面几乎是不可能的任务。不是技术上实现不了，而是「设计感」这个东西对大多数开发者来说，就像要求一个工程师画蒙娜丽莎。你可以写出完美的代码逻辑，但让你配色、排版、加动画——很多人连从哪里下手都不知道。
所以每次需要做展示型落地页的时候，选择只有两个：花大价钱请设计师，或者用模板硬凑。都很不痛快。

Scroll World 是什么？​

Scroll World 是一个开源的 Claude Code Skill，它能根据企业、产品或品牌的业务故事，生成一组风格统一的微缩场景和连续运镜视频，再把这些素材组合成一个由滚动进度控制的沉浸式落地页。

项目由开发者 oso95 开源在 GitHub 上，使用 MIT 协议。它兼容 Claude Code、Codex 以及任何支持 SKILL.md 的 Agent 平台。

一家咖啡品牌可以把官网设计成咖啡庄园 — 烘焙工坊 — 城市门店 — 配送网络 — 咖啡产品的连续世界；一家物流公司可以让镜头依次穿过仓库、港口、运输车辆和全球配送中心。访客滚动页面时，实际上是在控制预渲染视频的播放进度，获得类似摄影机在 3D 世界中不断飞行的效果。

---

它的工作原理：滚动即运镜​

Scroll World 最核心的交互逻辑非常优雅：页面滚动进度与视频播放进度绑定。用户向下滚动，摄影机便向前飞行；停止滚动，画面随之停下；反向滚动，镜头也可以沿原来的路径后退。

这种交互把访客从被动观看者变成了主动探索者——内容节奏完全交到了用户手中。不是在看一段视频，而是在驾驶一台穿越微缩世界的摄影机。

三步自动化流程​

当你在 Claude Code 中安装 Scroll World 并描述你的需求后，它会自动执行以下流程：

1品牌业务自动拆解

先了解项目主题、品牌名称、核心卖点、品牌色彩、视觉风格以及页面需要讲述的业务流程，然后将这些信息整理成一组具有先后顺序的场景。每个场景对应一个业务环节、一项产品能力或一个品牌故事节点。

2素材生成（场景 + 运镜 + 衔接）

依赖 Higgsfield 平台生成风格统一的等距微缩场景图片（GPT Image 2）和「潜入」运镜视频（Seedance / Kling image-to-video）。最关键的是衔接片段：相邻场景之间额外生成连接视频，使用前后视频的实际边界帧作为条件，确保接缝两侧画面完全一致。

3滚动控制引擎 + 页面组装

将所有视频素材喂入一套基于原生 JS 的滚动控制引擎（scrub-engine.js），生成一个配置驱动的完整 HTML 页面。滚动控制支持 blob-seek、懒加载和接缝交叉淡入淡出。

安装与使用​

环境依赖​

在使用 Scroll World 之前，需要确保以下工具已就绪：

• Higgsfield CLI — 已认证并充值 credits，用于场景图片和运镜视频的生成
• ffmpeg / ffprobe — 用于帧提取和视频编码
• Python 3 + Pillow — 用于移动端竖屏画布处理和可选的透明场景抠图
• Codex CLI（可选） — 如果已安装，场景图片可以通过 Codex 内置的 image_gen（同一 GPT Image 模型）生成，消耗 ChatGPT 订阅额度而非 Higgsfield credits

三种安装方式​

使用方式​

安装完成后，只需要在 Claude Code 中输入一句话描述即可：

/scroll-world
或者直接用自然语言描述你的需求，比如「为我的咖啡品牌做一个从庄园到杯中的滚动世界落地页」。Skill 会自动启动面谈流程，引导你确认品牌信息、视觉风格、场景顺序和预算，然后全自动生成。

---

技术栈与项目结构​

Skill 文件结构​

skills/scroll-world/
├── SKILL.md # 流程规则 + 接缝规则 + 注意事项
└── references/
├── prompts.md # 完整的 Higgsfield 提示词模板
├── pipeline.md # 批处理脚本（生成→帧提取→衔接→编码）
├── scrub-engine.js # 便携式滚动控制引擎
├── index-template.html # 独立页面模板
└── knockout.py # 透明场景背景抠图
整个 Skill 的代码构成非常清晰：83.8% JavaScript、8.3% Python、7.9% HTML。没有多余的技术债务，每个文件都有明确的职责。

---

实际应用：袋鼠帝的仓颉 Skill 官网​

开发者「袋鼠帝」在发布 Scroll World 不久后，就用它搭配腾讯新推出的设计 Agent Miora，为自己的开源项目「仓颉 Skill」做了一个皮克斯动画风格的滚动官网。

他的工作流很有参考价值——使用了 GPT Image 2 生成场景图、Seedance 2.0 生成场景视频，再通过首尾帧相连生成过渡视频，最后拼接到页面中。整个过程他自己做的活很少：提需求、确认文档、挑首图、给场景图挑毛病。剩下的生图、生视频、首尾帧过渡、拼接、写代码，几乎全是 Agent 自己完成的。

袋鼠帝后来基于 Scroll World 的核心实现思路，进一步补上了产品定位、需求文档、视觉风格确认、角色一致性、完整分镜、逐场景审核、视频连续性检查等环节，封装成了 scroll-promo-site-builder——一个更完整的产品级 Skill。
如果你只需要一个通用的滚动穿梭网站生成方案，可以直接使用 Scroll World；如果你希望从产品资料开始，按照「需求确认 → 视觉设计 → 生图 → 生视频 → 转场检查 → 网页交付」的完整步骤跑下来，可以使用 scroll-promo-site-builder。

---

Skill 从写代码延伸到做设计​

Scroll World 最让人兴奋的，不是它本身——虽然它确实很强大——而是它代表的趋势。

过去我们谈到编码智能体，谈的都是「写代码」。让它帮你写函数、写 SQL、写测试、写配置文件。这些东西本质上是文本生成——输入需求，输出代码。

但 Scroll World 不一样。它做的是设计——不是代码层面的优化，而是用户体验层面的创造。它不需要用户告诉它「用什么 CSS 属性」或者「动画曲线怎么调」，它只需要用户告诉它「我想表达什么感觉」。

这是一个根本性的转变。意味着 Skill 的能力边界，正在从「技术实现层」向「创意表达层」延伸。

有人评价 Scroll World：「这不是一个工具，这是一个思维转换。它让我开始相信，以后任何创意想法都可以直接变成页面，不需要中间人。」

点击展开...

想想 Canva 当年做的事：让不会用 Photoshop 的人也能做出好看的海报。Scroll World 在做的事情类似——让不会写前端动画的人也能做出苹果官网级别的滚动体验。但它更进一步：不是一个独立的设计工具，而是一个嵌入到编程环境中的设计 Skill。开发者不需要离开自己的环境，不需要切换工具，不需要学习新的设计软件。

当 AI 能帮你把一句话变成一整个沉浸式体验的时候，设计就不再是「你能不能」的问题，而是「你想不想」的问题。