狂揽7.8K Star！一个生成 3D 产品宣传页的Claude Code 技能爆火了！

yfj-unicorn

322人浏览 · 2026-08-14 19:15:39

yfj-unicorn · 2026-08-14 19:15:39 发布

前几天刷 GitHub，发现一个有点疯的项目：scroll-world。

废话不多说，先来看效果！

它的演示效果是这样的——你滚动页面，摄像机从场景外飞进建筑内部，穿过一个又一个等轴投影的微缩世界，场景之间无缝衔接，一镜到底。你大概见过 Apple 产品页那种「滚动驱动摄像机」的效果，scroll-world 做的就是这个，但整套资产全部由 AI 生成。

这不是一个独立的工具，而是一个 Agent Skill——给 Claude Code 或 Codex 装上之后，你直接跟 AI 说「帮我做一个医疗行业的沉浸式官网」，它就会一步步帮你生成场景图、摄像机飞入视频、接缝连接片段，最后交付一个可以直接部署的 HTML 页面。

我把它装上跑了一遍，记录一下。

它到底在做什么

先说清楚这个项目是什么，免得看了半天还是懵的。

scroll-world 本质上是一条完整的 AI 内容生产流水线，最终产出是一个「滚动穿越世界」的 Landing Page：

你滚动页面，播放时间线被驱动
摄像机按时间线从场景 A 的外部飞入内部，再无缝切换到场景 B
所有场景都是等轴投影（isometric diorama）风格的微缩沙盘，画风统一
整段「飞行」没有剪切点，是一镜到底的连续视频

这个效果之所以好看，关键在于两点：一是场景本身的美术风格，二是场景之间的接缝处理。大多数实现会在两段视频拼接的地方出现明显的画面跳变，scroll-world 的做法是：用相邻两段视频的实际渲染帧作为条件帧，生成一段「连接器片段」（Connector clip），保证每个接缝处完全帧一致。

这个细节处理得相当认真。

AI 流水线长什么样

整个生成链路分三层：

第一层：场景静帧

等轴投影风格的静帧图，默认走 Higgsfield + GPT Image 2 生成，也可以换成 Codex CLI（用 ChatGPT 订阅计费，不额外消耗 Higgsfield 额度）。

第二层：摄像机飞入视频

以静帧为起始帧，生成摄像机从外部飞入场景内部的视频片段。默认后端是 Monid（Seedance 2.0），按片计费，官方给的参考价是 6 个场景 1080p 约 $27；Higgsfield 作为 fallback，用它的 kling3_0 模型。选这两个的原因是它们都支持首末帧锁定（first/last-frame conditioning），这是保证接缝的前提条件，不支持帧锁的模型在这里用不了。

第三层：Connector clips

从相邻两个场景各取一帧，作为条件帧生成过渡片段，这样接缝处的画面是完全衔接的。这是这套方案里技术含量最高的地方。

移动端还有可选的 9:16 竖屏独立渲染，不是把横屏裁一刀，而是重新生成一套竖版资产，专门给手机用。

内置的滚动引擎

生成好的视频素材要怎么在页面上跑起来？

scroll-world 附带了一个叫 scrub-engine.js 的 vanilla JS 组件，不依赖任何框架，直接 <script> 引入就能用。核心机制是：把整段视频链路加载为 Blob，通过 video.currentTime 来 seek 播放位置，滚动事件映射成时间戳，配合懒加载和接缝淡入淡出，整体比较流畅。

<!-- index-template.html 的基本结构 -->
<script src="scrub-engine.js"></script>
<div id="scroll-world" data-config="config.json"></div>

配置文件 config.json 里定义每段视频的路径、场景信息和时间映射，引擎按配置跑。兼容 HTML、Next.js、Vue、Python 服务，只要能 serve 静态文件就行。

安装和使用

Claude Code 用户（推荐）

两行命令：

/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world

装好之后直接对话，比如：

帮我做一个物流行业的 scroll-world 落地页，3 个场景：仓储中心、配送车队、城市配送点

AI 会先问你品牌信息、场景顺序、是否需要移动端版本、选哪个渲染档位，给你看费用估算，确认之后才开始生成。不会直接就花你的钱跑起来。

也可以直接 /scroll-world 调用 Skill。

Codex 和其他 Agent

npx skills add oso95/scroll-world            # 选择目标 Agent
npx skills add oso95/scroll-world -a codex   # 直接指定 Codex

在 Codex 里用 $scroll-world 触发，或者 /skills 浏览列表。

手动安装（任意 Agent）

git clone https://github.com/oso95/scroll-world
cp -R scroll-world/skills/scroll-world ~/.claude/skills/   # Claude Code
cp -R scroll-world/skills/scroll-world ~/.codex/skills/    # Codex

依赖清单

运行之前要把这几个东西备好：

依赖	用途	备注
Monid CLI + API Key	默认视频生成后端	按片计费，需要余额
Higgsfield CLI	场景静帧生成 + 视频 fallback	需要 `higgsfield auth login`
ffmpeg / ffprobe	视频抽帧和编码	大多数环境已有
Python 3 + Pillow	移动端画布处理、背景抠图	可选
Codex CLI	场景静帧走 GPT Image 计费	可选，替代 Higgsfield 的图生图

重点是 Monid 和 Higgsfield 都要有余额/额度。这套方案本质上是 AI 生成资产，是有成本的，项目本身也很坦诚地把「生成前先看费用」做成了必须步骤。

项目结构一览

skills/scroll-world/
├── SKILL.md                    # Skill 的执行流程、接缝规则、注意事项
└── references/
    ├── prompts.md              # 问卷 + Higgsfield prompt 模板
    ├── pipeline.md             # 批处理脚本：生成→抽帧→连接→编码
    ├── scrub-engine.js         # 可移植滚动引擎（blob-seek、懒加载、接缝淡入）
    ├── index-template.html     # 最小化页面模板
    └── knockout.py             # 场景背景抠图

SKILL.md 是整个 Skill 的大脑，定义了 AI 应该走什么流程、接缝规则怎么处理、什么情况算 gotcha。scrub-engine.js 是可以单独拿走用的，不依赖其他部分。