一个可以生成3D微缩世界的Skill——Scroll-World

一个可以生成3D微缩世界的Skill——Scroll-World

苹果官网那些炫酷的产品落地页——手指滑过滚轮，镜头穿越进产品内部，视角无缝切换。这种沉浸式滚动飞行交互曾经是大厂专属，需要精密 3D 建模和逐帧调试。而现在，一个名为 scroll-world 的开源 Agent Skill，把门槛降到了一句话。

scroll-world 是什么

scroll-world是一款Agent Skill，适用于 Claude Code、Codex、WorkBuddy（TraeWork）及任何兼容 SKILL.md 的编程智能体。它能根据品牌故事，自动生成一组风格统一的微缩场景和连续运镜视频，再组合成一个由滚动进度控制的沉浸式落地页 。

给它一句话——比如「做一个咖啡品牌从庄园到杯中的滚动页面」——就能得到一个可直接打开使用的完整页面：有动画、有过渡、有叙事节奏。

scroll-world 沉浸式滚动体验：笔记本和手机同时展示品牌滚动世界

核心原理：滚动即运镜

scroll-world 把页面滚动进度与视频播放进度绑定。向下滚动，摄影机向前飞行；停止滚动，画面定格；反向滚动，镜头沿原路后退。

访客从「被动观看者」变成了「主动探索者」——好的滚动页面像一部电影，用户不是在浏览信息，而是在经历一个故事。

三步生成流程：

三步生成流程

四大核心能力

安装教程

scroll-world 支持 Claude Code、Codex 和 WorkBuddy（TraeWork）三大平台，以下是各自完整安装流程。

Claude Code 安装（2 行命令）

# 1. 添加插件市场并安装/plugin marketplace add oso95/scroll-world/plugin install scroll-world@scroll-world# 2. 直接描述需求即可触发"做一个关于太空探索的滚动页面"

Codex 安装（完整四步）

第 1 步：安装 Codex CLI

确保 Node.js 版本 ≥ 18（推荐 ≥ 22），然后全局安装 Codex 命令行工具。

# 检查 Node.js 版本node -v# 安装 Codex CLInpm install -g @openai/codex# 国内网络慢？使用淘宝镜像npm install -g @openai/codex --registry=https://registry.npmmirror.com# 验证安装codex --version

第 2 步：登录认证

• 方式 A：有 ChatGPT Plus 账号——直接运行 codex，浏览器自动弹出登录授权。

• 方式 B：无 Plus 账号——在 ~/.codex/auth.json 中配置 API Key，并在 config.toml 中设置中转地址。

{  "OPENAI_API_KEY": "sk-你的实际API密钥"}

第 3 步：安装 scroll-world Skill

使用 Vercel 的 skills CLI 一键安装到 Codex。

# 方式一：交互式安装（选择 Codex）npx skills add oso95/scroll-world# 方式二：直接指定 Codexnpx skills add oso95/scroll-world -a codex# 方式三：手动拷贝 Skill 文件git clone https://github.com/oso95/scroll-worldcp -R scroll-world/skills/scroll-world ~/.codex/skills/

第 4 步：调用 Skill

在 Codex 中输入 $scroll-world 调用，或输入 /skills 浏览已安装技能，也可以直接用自然语言描述需求自动触发。

# 直接调用$scroll-world# 或自然语言触发"帮我做一个咖啡品牌从庄园到杯中的沉浸式滚动页面"

WorkBuddy / TraeWork 安装（三种方式）

WorkBuddy（TraeWork 的 AI 助手）内置 Skill 市场和技能管理系统，安装 scroll-world 无需命令行，全程对话即可完成 。

方式 A：对话安装（最简单）

直接在 WorkBuddy 对话框中告诉它你要安装 scroll-world，它会自动搜索并推荐。

# 直接发送 GitHub 链接，让 WorkBuddy 自动安装"帮我安装这个 skill：https://github.com/oso95/scroll-world"# 或者用自然语言描述需求"帮我找一个能生成沉浸式滚动页面的 skill"# WorkBuddy 会自动下载、安全检测、一键安装

方式 B：技能市场安装

打开 WorkBuddy 左侧侧边栏 → 点击**「技能」进入 Skill 市场 → 顶部搜索框输入 scroll-world → 找到后点击右侧「+ 添加技能」**，自动完成部署。

方式 C：上传本地包

先将 scroll-world 仓库克隆到本地，然后在 WorkBuddy 技能页面点击右上角**「添加技能」** → 选择**「上传技能」** → 将包含 SKILL.md 的文件夹拖入即可。

# 先克隆到本地git clone https://github.com/oso95/scroll-world# 然后在 WorkBuddy 中上传 skills/scroll-world 文件夹# 文件夹内必须包含 SKILL.md 文件

WorkBuddy 调用方式：安装完成后，有两种调用方式——方式一：在对话框输入 @scroll-world 显式调用；方式二：点击输入框左下角 + 按钮，选择「技能」，从列表中找到 scroll-world 点击即可。也可以直接用自然语言描述需求，WorkBuddy 会自动匹配并触发。

使用教程

安装完成后，如何用 scroll-world 从零生成一个完整的沉浸式滚动页面？以下以一个咖啡品牌为例，完整演示从发起到部署的全过程，包含你实际发送给 AI 的每句话和收到的回复。

品牌概念到沉浸式 3D 世界的转化过程

使用过程

使用过程

部署上线

生成的项目是纯静态文件，可以直接部署到任意平台：

# 方式一：直接拖入任意静态服务器cp -r scroll-world-output/ /var/www/html/shanye-coffee/# 方式二：嵌入现有网站（Next.js / Vue / Python）# 将 scrub-engine.js 和 assets/ 拷入项目# 在页面中引入引擎并传入 config.js 即可# 方式三：Vercel / Netlify 一键部署# 将 scroll-world-output/ 作为项目根目录推送即可

实战技巧
场景数量：4-6 个场景效果最佳，太少叙事感不足，太多成本飙升且加载变慢。
风格统一：在访谈环节明确指定视觉风格关键词（如 isometric、warm tones），避免每个场景风格不一致。
移动端必开：大部分流量来自手机，9:16 竖屏版本不是裁剪而是原生重绘，体验差异明显。
预算控制：先从 3-4 个场景试水，满意后再追加场景。每次生成前都会显示费用预估。
品牌色导入：如果品牌已有官网，直接给 scroll-world 发 URL，它会自动提取配色方案。

本地依赖：
Monid CLI（视频生成，调用 Seedance 2.0）、Higgsfield CLI（场景图 + 备用视频链路）、ffmpeg（帧提取编码）、Python 3 + Pillow（竖屏画布）。Codex CLI 在场时，场景图可走 ChatGPT 订阅 。WorkBuddy / TraeWork 用户如仅做页面组装（素材由 AI 生成），无需手动安装这些依赖。

成本预估：6 场景 1080p 页面，Monid 视频生成约 $27（按 token 计费，无订阅费）。移动端竖屏版本使视频量翻倍。所有费用生成前明确告知，确认后执行。

适合做什么

产品发布页``品牌官网``旅行展示``地产展示``个人作品集``融资演示页``活动落地页

• 咖啡品牌：庄园 → 烘焙工坊 → 城市门店 → 配送网络 → 产品。一条滚动飞行的品牌叙事。

• 物流公司：仓库 → 港口 → 运输车辆 → 全球配送中心。供应链故事在滚动中展开。

Skill 正在从写代码到做设计

过去编码智能体谈的都是「写代码」——输入需求，输出代码。但 scroll-world 做的是设计——它不需要你告诉它用什么 CSS 属性，只需要你说「我想表达什么感觉」。

Canva 让不会 Photoshop 的人也能做海报；scroll-world 让不会写前端动画的人也能做炫酷滚动页面。把专业能力封装成工具，让非专业人士也能使用。

它不是一个独立设计工具，而是嵌入编程环境的「设计 Skill」。不切换工具，不学新软件，在工作流中随时生成。当一句话就能变成沉浸式体验时，设计不再是「能不能」的问题，而是「想不想」的问题。